我有一个<audio>元素，我正在更改速度、开始/结束边界和音调。我想看看是否可以录制我在浏览器中听到的音频。但是我不想只用麦克风录音，因为质量较低。
我可以在服务器端实现相同的效果，但我不想这样做，因为我基本上用两种不同的技术复制相同的功能。
为了回应旗帜投票，因为“不清楚我在问什么”，我将重新措辞。
我有一个<audio>元素在页面上播放。我有一些 javascript 操纵播放速率、音量等。然后我想要我的browser录制音频据我所知。这不是麦克风。我想创建一个尽可能接近正在播放的音频文件。如果是 75%，那么新文件的体积将是 75%。
在支持浏览器中，您可以使用MediaElement.captureStream() https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/captureStream方法以及媒体记录器 API https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder.
但请注意，这些技术仍在积极开发中，并且当前的实现仍然充满错误。
例如，对于您的情况，如果您在录制时更改音量，当前稳定的 FF 将停止原始媒体音频的渲染...我没有时间搜索有关它的错误报告，但无论如何，这只是一个您会发现许多错误。
// 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>
对于较旧的浏览器，您可以使用 Web Audio APIcreateMediaElementSource https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource方法，通过 API 传递音频元素媒体。
从那里，您可以将原始 PCM 数据提取到 arrayBuffers 并保存它。
在下面的演示中，我将使用recorder.js https://github.com/mattdiamond/Recorderjs/blob/master/dist/recorder.js图书馆，它做greatly帮助提取+保存到 wav 过程。
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
