search

goldfire / howler.js

Javascript audio library for the modern web.
https://howlerjs.com
MIT License
23.74k stars 2.22k forks source link

How can I use a custom container to generate the audio waveform? #991

Open tareq0065 opened 6 years ago

tareq0065 commented 6 years ago

Is there any way to use a custom div or canvas to generate the waveform? Normally we are using this.

var sound = new Howl({ src: ['sounds/game-sounds.ogg', 'sounds/game-sounds.mp3'], sprite: { warmSound: [0, 750], coldSound: [875, 950], winSound: [1930, 2500], sameSound: [4518, 850], loseSound: [6093, 1700] } }); This is a very good library for use. But where I can use a custom waveform container like below. The existing example is not good. What I can do for a single audio file and generate a full sprite to a custom div.

image

Jasonnor commented 6 years ago

Same issue here: #701

kosso commented 5 years ago

I implemented this after onload using parts of my 'MediaDrop' script. https://github.com/kosso/MediaDrop/blob/master/media_drop.html#L274

After the onload event, simply read the file into a Javascript File object and follow the process in the simple script provided.

This would be a very easy thing to add to Howler, I suppose.

However, I'm now on the hunt for more 'live' visualisation, animating the waves while playing. ;)