I am attempting to visualize call recordings from the twilio API using an html5 web audio analyser, but whenever I attach my analyser (visualizer), it mutes my audio.
here is the relevant code:
initScope = function () {
context = new window.AudioContext()
canvas = document.querySelector('.visualizer')
scope = new Oscilloscope(canvas, options)
source = context.createMediaElementSource($oscilloscope[0]) //MH TODO: sound gets cut here
}
is where the analyser is set up, where [Oscilloscope][1] is the analyser library I am using.
And here is where I'm loading and playing the audio:
loadAudio = function () { $audio[0].src = '/recordings/' + playlist[current].recordingSid $audio[0].addEventListener('canplaythrough', playAudio) $audio[0].load() }
playAudio = function () { scope.addSignal(source) $audio[0].play() }
I actually had it working for a bit, but it may have actually been a bug in chrome that allowed things to play, that stopped working when chrome was updated.
If I comment out the
source = context.createMediaElementSource($audio)
The audio will play (just without visualizations) and vice versa.
I'm wondering if there is something in the oscilloscope code that would mute the audio stream for some reason, or something I need to do to connect the source or scope to the audio node. I saw something about connecting streams in the documentation
I've temporarily solved this issue by cloning the audio node, so that I have one node for the actual audio, and one node for oscilloscope, but it feels sloppy.
Appreciate any ideas or pointers.
Thought this was a CORS issue at first BTW, but I resolved that so my server acts as a local proxy for the recordings from twilio.
