search

mathiasvr / audio-oscilloscope

:musical_note: Waveform audio visualizer for the HTML5 canvas.
MIT License
92 stars 13 forks source link

ability to use oscilloscope with html5 audio (not get user media) #1

Closed heaversm closed 7 years ago

heaversm commented 7 years ago

Hi! Just wondering if there's a way to load an html5 audio source as the source for the oscilloscope instead of a get user media stream? I currently get this error:

screen shot 2017-05-30 at 8 57 22 am
heaversm commented 7 years ago

Realized this is an issue with html5 audio api itself, not oscilloscope. I should be using createMediaElementSource instead of createMediaStreamSource. Closing.

mathiasvr commented 7 years ago

Hi, I was just going through some old code, but I only found loading audio through ajax. If you have an example of how to do it with html5 audio, it could be nice to add it to the readme 😃

heaversm commented 7 years ago

Cool - yeah - here's how I did it. I'm using the twilio API, so my voice recordings are coming from there. Init as normal, with the only difference being the:

initScope = function () {
        context = new window.AudioContext()
        canvas = document.querySelector('.visualizer')
        audio = document.querySelector('.audio') //or audio = $('.audio')[0] if using jQuery

        var options = {
            stroke: 1,    // size of the wave
            buffer: 1024  // buffer size ranging from 32 to 2048
        }

        scope = new Oscilloscope(canvas, options)

        var source = context.createMediaElementSource(audio) //create media element source on your audio html element
        scope.addSignal(source, '#ffffff')
    }

Then I also had to add a crossOrigin property to the audio element because it was coming from twilio to prevent getting access restrictions:

audio.crossOrigin = "anonymous"