我可以记录< audio>的输出吗?不使用麦克风? [英] Can I record the output of an <audio> without use of the microphone?

问题描述

我有一个<audio>元素，并且正在更改速度，开始/结束范围和音高.我想看看是否可以在浏览器中录制我听到的音频.但是，由于质量较低，我不想只用麦克风录音.

I have an <audio> element and I'm changing the speed, start/end bounds, and pitch. I want to see if it's possible to record the audio I hear in the browser. However I don't want to just record with the microphone because of the lower quality.

我可以在服务器端执行相同的效果，但是我宁愿不这样做，因为我基本上会使用两种不同的技术来复制相同的功能.

I could do the same effects server-side but I'd rather not since I'd be basically duplicating the same functionality with two different technologies.

由于对不清楚我要问的内容"的全民投票，我将重新措辞.

In response to a flag vote since it's "unclear what I'm asking", I'll rephrase.

我在页面上播放一个<audio>元素.我有一些Javascript操作播放速率，音量等.然后，我希望我的浏览器记录我听到的​​音频 .这不是麦克风.我想创建一个新的音频文件，该文件尽可能接近正在播放的音频文件.如果为75％，则新文件的音量为75％.

I have an <audio> element playing on the page. I have some javascript manipulating the play-rate, volume, etc. I then want my browser to record the audio as I hear it. This is not the microphone. I want to create a new audio file that is as close as possible to the one playing. If it's at 75%, then the new file will be at 75% volume.

推荐答案

在支持的浏览器中，您可以使用 MediaRecorder API .

In supporting browsers, you could use the MediaElement.captureStream() method along with the MediaRecorder API.

但是请注意，这些技术仍在积极开发中，并且当前的实现仍然存在许多错误.
例如，就您的情况而言，如果您在录制时更改音量，当前稳定的FF将停止呈现原始媒体音频...我没有时间来搜索它的错误报告，但是无论如何，这只是一个您会发现许多错误.

But note that these technologies are still in active development and that current implementations are still full of bugs.
E.g, for your case, current stable FF will stop the rendering of the original media audio if you change its volume while recording... I didn't had time to search for a bug report on it, but anyway, this is just one of the many bugs you'll find.

// here we will save all the chunks of our record
const chunks = [];
// wait for the original media is ready
audio.oncanplay = function() {
  audio.volume = 0.5; // just for your example
  // FF still does prefix this unstable method
  var stream = audio.captureStream ? audio.captureStream() : audio.mozCaptureStream();
  // create a MediaRecorder from our stream
  var rec = new MediaRecorder(stream);
  // every time we've got a bit of data, store it
  rec.ondataavailable = e => chunks.push(e.data);
  // once everything is done
  rec.onstop = e => {
    audio.pause();
    // concatenate our chunks into one file
    let final = new Blob(chunks);
    let a = new Audio(URL.createObjectURL(final));
    a.controls = true;
    document.body.append(a);
  };
  rec.start();
  // record for 6 seconds
  setTimeout(() => rec.stop(), 6000);
  // for demo, change volume at half-time
  setTimeout(() => audio.volume = 1, 3000);
};

// FF will "taint" the stream, even if the media is served with correct CORS...
fetch("https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3").then(resp => resp.blob()).then(b => audio.src = URL.createObjectURL(b));

<audio id="audio" autoplay controls></audio>

对于较旧的浏览器，您可以使用WebAudio API的 方法，以通过API传递音频元素媒体.
从那里，您可以将原始PCM数据提取到arrayBuffers并保存.

For older browsers, you could use the WebAudio API's createMediaElementSource method, to pass your audio element media through the API.
From there, you'd be able to extract raw PCM data to arrayBuffers and save it.

在下面的演示中，我将使用 recorder.js 该库对提取+保存到WAV过程非常有帮助.

In following demo, I'll use recorder.js library which does greatly help for the extraction + save to wav process.

audio.oncanplay = function(){
  var audioCtx = new AudioContext();
  var source = audioCtx.createMediaElementSource(audio);
  var gainNode = audioCtx.createGain();

  gainNode.gain.value = 0.5;

  source.connect(gainNode);
  gainNode.connect(audioCtx.destination);  

  var rec = new Recorder(gainNode);

   rec.record();
  setTimeout(function(){
    gainNode.gain.value = 1;
    }, 3000);
  setTimeout(function(){
    rec.stop()
    audio.pause();
    rec.exportWAV(function(blob){
      var a = new Audio(URL.createObjectURL(blob));
      a.controls = true;
      document.body.appendChild(a);
      });
    }, 6000);
  };

<script src="https://rawgit.com/mattdiamond/Recorderjs/master/dist/recorder.js"></script>
<audio id="audio" crossOrigin="anonymous" controls src="https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3" autoplay></audio>

这篇关于我可以记录< audio>的输出吗?不使用麦克风?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！