通过javascript记录网站的内部音频 [英] Record internal audio of a website via javascript
问题描述
我制作了此网络应用来创作音乐，我想向其中添加功能将合成文件下载为.mp3/wav/whateverFileFormatPossible，我已经进行了很多次搜索，但由于我找不到有关该方法的任何示例而总是放弃，只有发现的是麦克风录音机，但我想记录网站的最终音频目的地.我以这种方式播放音频:
i made this webapp to compose music, i wanted to add a feature to download the composition as .mp3/wav/whateverFileFormatPossible, i've been searching on how to do this for many times and always gave up as i couldn't find any examples on how to do it, only things i found were microphone recorders but i want to record the final audio destination of the website. I play audio in this way:
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.
where buf is the AudioBuffer.
总而言之，我想录制整个窗口的音频，但无法提出一种方法.
To sum up, i want to record the whole window audio but can't come up with a way.
推荐答案
也许您可以使用MediaStream Recording API(
Maybe you could use the 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对象生成的数据成为可能，以进行分析，处理或保存到磁盘.使用它也很容易.
The MediaStream Recording API, sometimes simply referred to as the Media Recording API or the MediaRecorder API, is closely affiliated with the Media Capture and Streams API and the WebRTC API. The MediaStream Recording API makes it possible to capture the data generated by a MediaStream or HTMLMediaElement object for analysis, processing, or saving to disk. It's also surprisingly easy to work with.
此外，您还可以查看以下主题: new MediaRecorder(stream[，options])流可以修改吗?.它似乎正在讨论一个相关的问题，可能会为您提供一些见识.
Also, you may take a look at this topic: new MediaRecorder(stream[, options]) stream can living modify?. It seems to discuss a related issue and might provide you with some insights.
以下代码生成一些随机噪声，应用一些变换，播放它并创建一个音频控件，该控件允许通过将音频另存为..."从上下文菜单中下载该噪声.(我需要将保存的文件的扩展名更改为.wav才能播放.)
The following code generates some random noise, applies some transform, plays it and creates an audio control, which allows the noise to be downloaded from the context menu via "Save audio as..." (I needed to change the extension of the saved file to .wav in order to play it.)
<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记录网站的内部音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
