代码之家  ›  专栏  ›  技术社区  ›  Jeahel

使用MediaRecorder录制音频webm时没有元数据

  •  2
  • Jeahel  · 技术社区  · 7 年前

    在我的项目中,我使用MediaRecorder录制用户音频,它几乎可以正常工作。当我想显示用户录制的波形时,我的问题就出现了波浪冲浪者.js,不会加载我的录音。不过,用音频元素播放录音效果很好。

    以下是ffprobe的输出和其中一个文件:


    元数据:

    持续时间:不适用,开始时间:0.000000,比特率:不适用
    流0:0(英语):音频:opus,48000 Hz,单声道,fltp(默认)

    // Somewhere in the code...
    this._handleUserMedia(await navigator.mediaDevices.getUserMedia({ audio: true }));
    
    // ... and elsewhere
    _handleUserMedia(stream) {
        this._mediaRecorder = new MediaRecorder(stream, { audioBitsPerSecond : 64000 });
    
        this._mediaRecorder.ondataavailable = event => {
          this._mediaBuffer.push(event.data);
        };
    
        this._mediaRecorder.onstop = () => {
          // Ajoute le buffer et une URL vers le buffer dans les résultats pour la sauvegarde et le playback
          let blob = new Blob(this._mediaBuffer, { type: "audio/webm" });
          this.state.results[this.state.currentWordIdx].recordingBlob = blob;
          this.state.results[this.state.currentWordIdx].recordingUrl = URL.createObjectURL(blob);
    
          // Réinitialise le buffer pour l'enregistrement suivant
          this._mediaBuffer = [];
    
          this._gotoNextWord();
        };
    
        this._gotoNextWord();
      }
    

    如您所见,我创建了一个blob,稍后用NodeJS保存 fs.writeFile . 当我需要显示波形时,我使用 fs.readFile

    fs.readFile(`${this.getAppData()}/${filePath}`, (err, buffer) => {
        if (err) { reject(err); }
        const blob = new Blob([buffer], {type : 'audio/webm'});
        resolve(URL.createObjectURL(blob)); // Si besoin d'un ArrayBuffer => toArrayBuffer(buffer)
    });
    
    0 回复  |  直到 7 年前
    推荐文章