search

mathiasvr / audio-oscilloscope

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

attaching createMediaElementSource mutes audio #2

Closed heaversm closed 7 years ago

heaversm commented 7 years ago

Hi - I know the oscilloscope is designed to work with a createMediaStream source and not createMediaElement source, but I'm trying to get your library to work with audio files vs getUserMedia.

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.

At any rate. I am pulling audio files from an api, and playing them throw an html5 web audio node. I then want oscilloscope to visualize the waveform of that recording.

I can play the audio successfully, and, when I add:

var source = context.createMediaElementSource($audio) //MH TODO: sound gets cut here
scope.addSignal(source, options.color)

where $audio is the reference to the html5 audio node, the sound cuts out, but the waveform is visualized as if the audio is still playing. Once it finishes, it successfully moves to the next recording in the playlist, and visualizes that. If I comment out the above two lines, the audio plays fine again.

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

Let me know if you have any ideas. 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, and (hopefully), they mirror each other. But it feels sloppy.

You can see the source code here

mathiasvr commented 7 years ago

Hi, yes it seems createMediaElementSource disconnects the output, so it for example can be connected to an analyser instead, which is what oscilloscope does. You just need to add this line, after calling addSignal, to reconnect it:

source.connect(context.destination)
heaversm commented 7 years ago

Thank you so much!

On Fri, Jun 16, 2017 at 1:48 PM, Mathias Rasmussen <notifications@github.com

wrote:

Hi, yes it seems createMediaElementSource disconnects the output, so it for example can be connected to an analyser instead, which is what oscilloscope does. You just need to add this line, after calling addSignal, to reconnect it:

source.connect(context.destination)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mathiasvr/audio-oscilloscope/issues/2#issuecomment-309130507, or mute the thread https://github.com/notifications/unsubscribe-auth/AAfxXUphHqQFlRDxM-vHOclFf6WagF-_ks5sEuoIgaJpZM4N82Yt .

-- Mike Heavers mikeheavers.com 917-345-6634