How to pipe Howler.masterGain output to mediaRecorder - web-audio-api

Question

I'm trying to record composed Web-Audio-API output from Howler (a bunch of sounds and audio sprites combined programmatically).
So far I've tried connecting the Howler.masterGain context to a createMediaStreamDestination Node but the MediaRecorder.ondataavailable event only fires once and without data.
Here's an example with a wired up version here: 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

The recording seems to be blocked by the autoplay policy which prevents you from playing anything without a user interaction. If you trigger the recording from within a click handler it works. I created an updated version of your fiddle which does that.
https://jsfiddle.net/786zkLcu/
I only changed the last lines. The code now generates a dynamic button and attaches a click handler. This also means that the user has to click the button to start the recording.
const $button = document.createElement('button');
$button.innerHTML = 'click';
$button.onclick = () => {
sound.play();
mediaRecorder.start();
setTimeout(() => {
mediaRecorder.stop();
sound.stop();
}, 5000);
};
document.body.append($button);

Answer 2

The problem is that Howler.masterGain changes after you create your Howl instance:
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
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.min.js"></script>
So the one you connect to your MediaStreamDestination node is not the one where the audio data will be passed, and hence it records only silence.
I don't realy know this library, so I can't tell why it behaves like that, or if there is a way to make it behave differently, but a simple workaround is to initialize your stream and create your recorder only after you initialized your Howl instance:
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>