如何使用 Web Audio API 创建 .wav 文件？

Question

我很确定我所做的一切都是正确的，但是当我尝试播放或下载文件时，没有任何播放。我正在使用网络音频 api 将麦克风中的音频录制为 WAV 格式。我正在使用这个library 创建 .wav 文件。似乎什么都没有被编码。

    navigator.mediaDevices.getUserMedia({
        audio: true,video:false
    })
    .then((stream) => {
    var data
    context = new AudioContext()

    var source = context.createMediaStreamSource(stream)
    var scriptNode = context.createScriptProcessor(8192, 1, 1)

    source.connect(scriptNode)
    scriptNode.connect(context.destination)

    encoder = new WavAudioEncoder(16000,1)
    scriptNode.onaudioprocess = function(e){

        data = e.inputBuffer.getChannelData('0')
        console.log(data)
        encoder.encode(data)



    }
    $('#stop').click(()=>{
        source.disconnect()
        scriptNode.disconnect()
        blob = encoder.finish()
        console.log(blob)
        url = window.URL.createObjectURL(blob)
// audio source
        $('#player').attr('src',url)
// audio control
        $("#pw")[0].load()
    })


    })

Answer 1

我想通了！帮助任何需要做同样事情的人。它使用 Web Audio API 和这个 javascript library

navigator.mediaDevices.getUserMedia({
    audio: true,video:false
})
.then((stream) => {


context = new AudioContext()

var source = context.createMediaStreamSource(stream)

var rec = new Recorder(source)
rec.record()




$('#stop').click(()=>{
rec.stop()
blob = rec.exportWAV(somefunction) // exportWAV() returns your file 
})

Answer 2

使用recordRTC录制视频和音频，我在我的项目中使用过，效果很好，这里是使用recordrtc.org录制音频的代码

 startRecording(event) { // call this to start recording the Audio( or video or Both)
    this.recording = true;
    let mediaConstraints = {
      audio: true
    };

    // Older browsers might not implement mediaDevices at all, so we set an empty object first
    if (navigator.mediaDevices === undefined) {
      navigator.mediaDevices = {};
    }

    // Some browsers partially implement mediaDevices. We can't just assign an object
    // with getUserMedia as it would overwrite existing properties.
    // Here, we will just add the getUserMedia property if it's missing.
    if (navigator.mediaDevices.getUserMedia === undefined) {
      navigator.mediaDevices.getUserMedia = function(constraints) {

        // First get ahold of the legacy getUserMedia, if present
        var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

        // Some browsers just don't implement it - return a rejected promise with an error
        // to keep a consistent interface
        if (!getUserMedia) {
          return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
        }

        // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
        return new Promise(function(resolve, reject) {
          getUserMedia.call(navigator, constraints, resolve, reject);
        });
      }
    }


    navigator.mediaDevices.getUserMedia(mediaConstraints)
      .then(successCallback.bind(this), errorCallback.bind(this));
  }

 successCallback(stream: MediaStream) {  
    var options = {
          type: 'audio' 
        };
        this.stream = stream;
        this.recordRTC = RecordRTC(stream, options);
        this.recordRTC.startRecording();
  }

errorCallback(stream: MediaStream) {
     console.log(stream);
  }

 stopRecording() { // call this to stop recording 
    this.recording = false;
    this.converting = true;
    let recordRTC = this.recordRTC;
    if(!recordRTC) return;
    recordRTC.stopRecording(this.processAudio.bind(this));
    this.stream.getAudioTracks().forEach(track => track.stop());
  }



processAudio(audioVideoWebMURL) {
    let recordRTC = this.recordRTC;
    var recordedBlob = recordRTC.getBlob(); // you can save the recorded media data in various formats, refer the link below.
    console.log(recordedBlob)
    this.recordRTC.save('audiorecording.wav');
    let base64Data = '';
    this.recordRTC.getDataURL((dataURL) =>  {
      base64Data = dataURL.split('base64,')[1];
      console.log(RecordRTC.getFromDisk('audio', function(dataURL,type) {
        type == 'audio'
      }));
      console.log(dataURL);
     })
}

请注意，除非您的网站启用了 https，否则您无法在 Google Chrome 中录制实时网站的音频/视频