选择音频上下文目标输出

Question

我需要一个解决方案来将<audio>元素设置为解码流音频的目标。我希望用户可以单击录制按钮并录制音频，直到他释放按钮，然后使用 websockets 我将音频发送给同一房间中的其他用户，他们可以按播放按钮收听收到的音频。

我在SO上搜索了一下，我找到了两种解决方案，我已经实现了两种解决方案来解码从MediaRecorder()发送的ArrayBuffer，但它会自动播放，并且我无法将音频分配给html元素。

这是我解码音频的JS代码：

// socket.io listening for audio event
socket.on('audio', function(audio){
console.log(audio);
// this part comes from a suggested solution to read the ArrayBuffer into an audio 
console.log("now playing a sound, that starts with", new Uint8Array(audio.slice(0, 10)));
var dest;
audioCtx.decodeAudioData(audio, function (buffer){
if (!buffer) {
console.error("failed to decode:", "buffer null");
return;
}
var source = audioCtx.createBufferSource();
source.buffer = buffer;
source.connect(audioCtx.destination);
//source.start(0);
// here is where I'm trying to pass the audio to the <audio> element
dest = audioCtx.createMediaStreamDestination();
console.log(dest.stream);
var player = document.getElementById('audio-player');
player.src = URL.createObjectURL(dest.stream.id);
console.log("started...");
}, function (error) {
console.error("failed to decode:", error);
});
});

这是我正在使用的录制按钮代码，我想按照我在问题中的描述进行更改以记录，直到用户发布为止。

$('.audio-message').on("click",function(){
console.log('clicked');
navigator.mediaDevices.getUserMedia({
audio: true
})
.then(function(stream){
var mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
mediaRecorder.ondataavailable = function(e){
// chunks.push(e.data);
console.log(e.data);
socket.emit('audio', e.data);
}
setTimeout(function(){
mediaRecorder.stop();
}, 10000);
});
});

对我来说，理想的解决方案是在从用户那里收到文件时动态生成音频元素。任何帮助，不胜感激。

Answer 1

发送方可以Blob发送数据，因为MediaRecorder.ondataavailable返回BlobEvent并且URL.createObjectURL()已经将Blob作为参数。 这通常已经是 Websocket 的默认binaryType。您可以保持发件人代码不变，但可以简化接收方。(假设您只是从服务器转发数据而不更改它(

socket.on('audio', function(audio){
console.log(audio);
var player = document.getElementById('audio-player');
player.src = URL.createObjectURL(audio);
console.log("started...");
}, function (error) {
console.error("failed to decode:", error);
});
});