如何将 Howler.masterGain 输出通过管道传输到 mediaRecorder答案

【问题标题】：How to pipe Howler.masterGain output to mediaRecorder如何将 Howler.masterGain 输出通过管道传输到 mediaRecorder
【发布时间】：2020-02-11 20:56:37
【问题描述】：

我正在尝试记录来自 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)

【问题讨论】：

标签： web-audio-api howler.js web-mediarecorder

【解决方案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);

【讨论】：

【解决方案2】：

问题是 Howler.masterGain 在您创建 Howl 实例后发生变化：

const audioURL = 'https://cdn.glitch.com/02dcea11-9bd2-4462-ac38-eeb6a5ad9530%2F331_full_beautiful-minds_0171_preview.mp3?1522829295082';
const masterGain = Howler.masterGain;
const sound = new Howl({ html5: false, src: audioURL });
sound.play();

console.log( masterGain === Howler.masterGain ); // false

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.min.js"&gt;&lt;/script&gt;

因此，您连接到 MediaStreamDestination 节点的节点不是将传递音频数据的节点，因此它只记录静音。

我真的不知道这个库，所以我不知道它为什么会这样，或者是否有办法让它表现不同，但一个简单的解决方法是初始化你的流并只创建你的记录器在你初始化你的 Howl 实例之后：

onclick = e => { onclick = null; msg.remove();

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

Howler.mute(false) // to initialize Howler internals  

// first initiate your Howl instance
const sound = new Howl( { html5: false, src: audioURL } );
sound.play();
// now intitiate your MediaStreamDestination

const mediaDest = Howler.ctx.createMediaStreamDestination();
Howler.masterGain.connect( mediaDest );

// set up media recorder to record output
const audioChunks = []
const mediaRecorder = new MediaRecorder( mediaDest.stream, { mimeType: 'audio/webm' } );

mediaRecorder.onstart = (event) =>
  { console.log('Started recording Howl output...') };
mediaRecorder.ondataavailable = (event) =>
  { audioChunks.push( event.data ) };
mediaRecorder.onstop = (event) =>
  { console.log('Completed Recording', new Blob( audioChunks ) ) };

mediaRecorder.start();

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

};

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.min.js"></script>
<pre id="msg">click anywhere to start</pre>

【讨论】：