通过 javascript 录制网站的内部音频答案

【问题标题】：Record internal audio of a website via javascript通过 javascript 录制网站的内部音频
【发布时间】：2020-09-07 15:02:15
【问题描述】：

我制作了this webapp 来创作音乐，我想添加一个功能以将作品下载为 .mp3/wav/whateverFileFormatPossible，我一直在寻找如何做到这一点，但总是放弃了。 '没有找到任何关于如何做到这一点的例子，我发现的只有麦克风录音机，但我想记录网站的最终音频目的地。我用这种方式播放音频：

const a_ctx = new(window.AudioContext || window.webkitAudioContext)()
function playAudio(buf){
    const source = a_ctx.createBufferSource()
    source.buffer = buf
    source.playbackRate.value = pitchKey;
    //Other code to modify the audio like adding reverb and changing volume
    source.start(0)
}

其中 buf 是 AudioBuffer。

总而言之，我想录制整个窗口的音频但想不出办法。

link to the whole website code on github

【问题讨论】：

标签： javascript html html5-audio web-audio-api

【解决方案1】：

也许您可以使用 MediaStream Recording API (https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API)：

MediaStream Recording API，有时简称为 Media Recording API 或 MediaRecorder API，与 Media Capture and Streams API 和 WebRTC API 密切相关。 MediaStream Recording API 可以捕获由 MediaStream 或 HTMLMediaElement 对象生成的数据，以进行分析、处理或保存到磁盘。它也非常容易使用。

另外，你可以看看这个话题：new MediaRecorder(stream[, options]) stream can living modify?。它似乎讨论了一个相关问题，并可能为您提供一些见解。

以下代码生成一些随机噪音，应用一些变换，播放它并创建一个音频控件，允许通过“将音频另存为...”从上下文菜单中下载噪音（我需要更改扩展名将保存的文件转换为 .wav 以便播放。）

<html>
<head>
<script>

const context = new(window.AudioContext || window.webkitAudioContext)()

async function run()
{
    var myArrayBuffer = context.createBuffer(2, context.sampleRate, context.sampleRate);
    // Fill the buffer with white noise;
    // just random values between -1.0 and 1.0
    for (var channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
      // This gives us the actual array that contains the data
      var nowBuffering = myArrayBuffer.getChannelData(channel);
      for (var i = 0; i < myArrayBuffer.length; i++) {
        // audio needs to be in [-1.0; 1.0]
        nowBuffering[i] = Math.random() * 2 - 1;
      }
    }
    playAudio(myArrayBuffer)
}

function playAudio(buf){
    const streamNode = context.createMediaStreamDestination();
    const stream = streamNode.stream;
    const recorder = new MediaRecorder( stream );
    const chunks = [];
    recorder.ondataavailable = evt => chunks.push( evt.data );
    recorder.onstop = evt => exportAudio( new Blob( chunks ) );

    const source = context.createBufferSource()
    source.onended = () => recorder.stop();
    source.buffer = buf
    source.playbackRate.value = 0.2
    source.connect( streamNode );
    source.connect(context.destination);
    source.start(0)
    recorder.start();
}

function exportAudio( blob ) {
  const aud = new Audio( URL.createObjectURL( blob ) );
  aud.controls = true;
  document.body.prepend( aud );
}


</script>
</head>
<body onload="javascript:run()">
<input type="button" onclick="context.resume()" value="play"/>
</body>
</html>

这是你要找的吗？

【讨论】：