JSFiddle - React, Tailwind, and code Playground

by Ben Gillbanks

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.min.js"></script>
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>

JavaScript

// ** Failed example of capturing all Howl output to MediaRecorder

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) // connect masterGain to destination


// 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 chunks empty?
    
    let buffer = new Blob(audioChunks)  
    let audioPlayer = document.createElement("AUDIO")
    audioPlayer.src = window.URL.createObjectURL(buffer)
    audioPlayer.play()
    document.body.appendChild(audioPlayer);
}

// 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)