如何将Howler.masterGain输出输出到mediaRecorder

Question

我正在尝试记录来自Howler的组合Web-Audio-API输出（一堆通过编程方式组合的声音和音频精灵）。

到目前为止，我已经尝试将Howler.masterGain上下文连接到createMediaStreamDestination节点，但是MediaRecorder.ondataavailable事件仅触发一次且没有数据。

这里是带有有线版本的示例：https://jsfiddle.net/chadananda/kvzrsx5t/86/

const audioURL = 'https://cdn.glitch.com/02dcea11-9bd2-4462-ac38-eeb6a5ad9530%2F331_full_beautiful-minds_0171_preview.mp3?1522829295082'

// connect MediaStreamDestination to Howler.masterGain
Howler.mute(false) // to initialize Howler internals  
let mediaDest = Howler.ctx.createMediaStreamDestination()
// first disconnect
Howler.masterGain.disconnect() 
// then reconnect to our new destination?
Howler.masterGain.connect(mediaDest)  


// set up media recorder to record output
let audioChunks = []
let mediaRecorder = new MediaRecorder(mediaDest.stream, {mimeType: 'audio/webm'})
mediaRecorder.onstart = (event) => { console.log('Started recording Howl output...') }
mediaRecorder.ondataavailable = (e) => { if (e.data.size) audioChunks.push(e.data) }
mediaRecorder.onstop = (event) => {
  console.log('Completed Recording', audioChunks) // why is this returning empty?
    // let buffer = new Blob(chunks)  
    // let audioPlayer = document.createElement("AUDIO")
    // audioPlayer.src = window.URL.createObjectURL(buffer)
    // audioPlayer.play()
}

// example of recording one sound looping for 3 seconds
let sound = new Howl({ html5: false, src: audioURL })
// start sound and recording
sound.play(); mediaRecorder.start()  
// stop in a few seconds 
setTimeout( ()=>{ mediaRecorder.stop(); sound.stop() }, 5000)

Answer 1

录音似乎被自动播放策略阻止，该策略阻止您在没有用户交互的情况下播放任何内容。如果您是从点击处理程序中触发录制的，那么它将起作用。我创建了您的提琴的更新版本。

https://jsfiddle.net/786zkLcu/

我只更改了最后几行。该代码现在生成一个动态按钮并附加一个单击处理程序。这也意味着用户必须单击按钮才能开始录制。

const $button = document.createElement('button');

$button.innerHTML = 'click';
$button.onclick = () => {
    sound.play();
    mediaRecorder.start();

    setTimeout(() => {
        mediaRecorder.stop();
        sound.stop();
    }, 5000);
};

document.body.append($button);