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

Question

我制作了这个网络应用程序来创作音乐，我想添加一个功能以将作品下载为 .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。

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

链接到github上的整个网站代码

Answer 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>

这就是你要找的吗？

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

问题描述

1 个解决方案

解决方案1
2 2020-09-06 12:05:35

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

问题描述

1 个解决方案

解决方案1 2 2020-09-06 12:05:35

解决方案1
2 2020-09-06 12:05:35