Question

我试图在录制2500毫秒后生成音频文件（.mp3格式）。我正在使用navigator，主要使用HTML5-audio。我正在生成下载文件的链接。 window.URL.createObjectURL(stream)返回blob:http://localhost:4200/e6a5a51e-ae11-4b77-9b2c-06251b13ca39。我不知道如何将其转换为可下载的文件。

这是录制功能的样子：

  this.record = () => {     
      var headers = new Headers();
      var browser = <any>navigator;      
      var obj = {
        audio: true,
        sampleSize: 16
      };

      var audio = document.createElement('audio');      

      browser.getUserMedia = (browser.getUserMedia || browser.webkitGetUserMedia || browser.mozGetUserMedia || browser.msGetUserMedia);
      browser.mediaDevices.getUserMedia(obj).then(stream => {            
        setTimeout(function(){        
          var track = stream.getTracks()[0]; 
          var source = window.URL.createObjectURL(stream);   // returns blob:http://localhost:4200/e6a5a51e-ae11-4b77-9b2c-06251b13ca39
          audio.src = source;      
          audio.autoplay= true; 
          var link = document.createElement("a");
          link.href = source;
          link.download = 'audio_recording_' + new Date().getTime() + '.mp3'; //"audioSample.wav";
          link.innerHTML = "Click here to download the file";
          document.body.appendChild(link); 

          track.stop(); 
          // window.URL.revokeObjectURL(stream);    
        }, 2500);

      });
    };

任何帮助将不胜感激。谢谢！

Answer 1

音频和视频格式与Chrome中的webm格式相同。

类似于视频

1。在“ audio / webm” mimeType中记录音频

2。以webm格式下载blob

3。将webm转换为mp3（或者您也可以在下载前使用javascript进行转换，但是这很耗费时间，尽管很容易在github中找到解决方案。也许它会被本机api吸引）

ref：https://github.com/webrtc/samples

ios对wav的引用：https://github.com/ai/audio-recorder-polyfill和 https://github.com/kaliatech/web-audio-recording-tests

e.x。镀铬

  function startRecording() {
  recordedBlobs = [];
  let options = {mimeType: 'audio/webm'};

  try {
    mediaRecorder = new MediaRecorder(window.stream, options);
  } catch (e) {
    console.error('Exception while creating MediaRecorder:', e);
    errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
    return;
  }

  console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
  recordButton.textContent = 'Stop Recording';
  playButton.disabled = true;
  downloadButton.disabled = true;
  mediaRecorder.onstop = (event) => {
    console.log('Recorder stopped: ', event);
  };
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start(10); // collect 10ms of data
  console.log('MediaRecorder started', mediaRecorder);
}

const downloadButton = document.querySelector('button#download');
downloadButton.addEventListener('click', () => {
  const blob = new Blob(recordedBlobs, {type : 'audio/webm'});
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'test.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
});

Answer 2

如果blob确实是有效的blob，并且您的代码中存在错误，以使下载可用：我成功使用file-saver

Answer 3

尝试创建一个新音频，引用您的来源，如下所示：

var audioFile = new Audio(source)

，然后在您的 link.href 和 audio.src 中尝试进行设置，例如：

audio.src = audioFile
link.href = audioFile

请让我知道这是否有效！

如何在Angular 6中从Blob URL下载音频文件？

3 个答案: