It provides several Vue components that allows to draw light and nice visualization for 'audio' HTML elements. It is built with HTML5 Web Audio API and compatible with all browsers that support HTML5 audio API.
SM2 also has an optional Flash fallback option for antique browsers. The element in HTML5, as you already guessed, does not provide low-level API. Overview An audio spectrum visualizer plugin for VueJS framework. The examples on their site are not great (imho) but with imagination you can do some cool things. I have found it robust and reliable although I had some initial difficulty on one project with multiple players on the same page.
#Html5 audio visualization code# Personally I like SoundManager 2 as the code is completely decoupled from display, meaning that I am free to create whatever UI / display that I like (or that the client wants). But overall it is surely better to calculate your peaks once, server-side, then simply send the data via JSON (or even create + cache your graphics server-side - there are numerous PHP chart libraries or you can do it natively with GD).įor playback on the browser, there are several good (non-Flash!) options. I am not sure if streaming files (eg MP3) can be used to calculate peaks as the file is coming in. Also, bear in mind that the entire audio file has to reach the browser before you can calculate peaks and render a waveform.
Rather than use the Audio Data API, which you cannot be sure is supported by all your users' browsers, it might be better if you generate your waveform data server-side (the BBC team created a C++ app to do that) and then at least you are decoupling the client-side display aspect from the playback aspect. The results all seem to be openly available and rather good.
Here's an article from the BBC's R&D team showing how they did exactly that to build a couple of JS libraries and more besides.
0 kommentar(er)
