Add HTML5 waveform parsing

[laino]

Hello. Soundmanger2 was always a little limited in its capabilities by only having waveform and equalizer data available when using the flash plugin.

I have implemented a 'waveform parser' for the HTML5 player in JavaScript.
It works at least in Chrome, using the standard HTML5 Web Audio API (But it should work in all other browsers offering that API too) and in Firefox, using Firefox's soon to be deprecated Audio API.

Currently it will only enable itself if DSP.js is available, because it uses a fast Fourier transform to convert the waveform data into 'equalizer' data. So include DSP.js in the page if you want to test it.

I also had to modify the eqData property a little, so it only has left and right channels now, not that 'global' channel that was left there for compatibility reasons.
The eqData property is now also different in the way that it may have an other number of float values than 255.

I wrote this for http://volafile.io and it works for my use case. I didn't test it for anything else and can't guarantee it's bugfree, as I had troubles comprehending the 6000 lines of source code of the project. I just wanted to give some of my work back to the community.

[notpushkin]

Great!

[cacheflowe]

+1

This works great and is easy on the CPU. Well done, @binlain! The fact that this works on iOS and doesn't melt your computer (like the Flash version) is a pretty big deal.

[mxnr]

Its crash for me on

"Uncaught TypeError: Cannot read property 'spectrum' of undefined"

if(s.instanceOptions.useEQData){
                   eqData = {leftEQ: s._fftLeft.spectrum,
                              rightEQ: s._fftRight.spectrum};
                }

I must elsewhere init s._fftLeft.spectrum and s._fftRight.spectrum?

[thepixelmonk]

@scottschiller it's been almost a year now, surely we could see some html5 waveform support?

[ferrislucas]

@darrencauthon... drop it in! @saiko-chriskun

[darrencauthon]

hey @saiko-chriskun , you want html5 waveform support? Here's an idea:

[scottschiller]

I want this feature also! However, it needs to be supported consistently and in a "good" way that will scale for SM2 users.

I'm keeping an eye on Web Audio API support in modern browsers. Some current implementations (mobile in particular, I think) effectively require an XHR2 object and a buffer to play back audio, which means the whole sound must load up front - undesirable for cases where you're playing a 4-minute MP3, or a 60-minute DJ mix etc.

The implementation I plan to have will attach the Web Audio API into an existing Audio() object via createMediaElementSource(). However, that API is not very stable nor well-supported at present outside of Chrome.

I've made some tests and filed bugs with appropriate browser vendors. IE 11 doesn't have Web Audio API support, but MS have said they intend to support it in a future IE release.

See this link for live demos, bug notes and so on.
http://isflashdeadyet.com/tests/web-audio-visualization/

Side note: Firefox Nightly (Aurora) looks to be more stable these days in terms of providing visualization data. Testing on the iOS 8 "GM" made available earlier this week, I get no event or zeroes for the data when sound playback starts.

More discussion here.
https://getsatisfaction.com/schillmania/topics/waveform_peak_data_with_web_audio_api

[wangko27]

great,

[wangko27]

great, look my head, it is china beijing's map;