#Html5 audio player with visualization how to
#Html5 audio player with visualization install

The following document is ready to be tested and you only need to provide a valid audio file. Var WaveSurfer = require('wavesurfer.js') just require the module instead of using the global variable: Wavesurfer is easy to use too with webpack, browserify etc. The plugin exposes the global variable WaveSurfer in the browser, so you can simply use it once the script is loaded. Load the audio file from your own domain ! Do whatever you need to do with the player Do something when the file has been loaded Create an instance of wave surfer with its configuration The audio URL expects to be from your own domain or the URL from a song in another domain that supports CORS headers: After creating an instance you can load the audio file to create its waveform using the load method. However, you can also pass any number of options. It can be either a unique CSS3 selector, or a DOM element. The only required parameter is container. The method of your interest is the create method. With the introducition of the version 2.0, now you can use it with bundlers and not only directly in the window: With VanillaJS in the browser For more information about this library, please visit the official website or the official repository at Github here. Then you will be able to require the module using require('wavesurfer.js').

#Html5 audio player with visualization install

You will need to install the module in your project using the following command: npm install If you want to use a module bundler like browserify, webpack etc, then you will need to use the version that supports this approach. The first one is by simply including the script in your document from a CDN or a local copy:

According to the way you work, you can load this library in 2 ways. Wavesurfer.js is a customizable audio waveform visualization, built on top of Web Audio API and HTML5 Canvas.

#Html5 audio player with visualization how to

With wavesurfer.js you can create anything from an HTML5 audio player to a sophisticated DJ application, but in this case we'll only show you how to create a basic wave form viewer and an easy audio player with 3 single buttons namely play, pause and stop. Willing to make it in the browser? Then Wavesurfer.js is the right tool for you. Just kidding, we aren't so technical! If you are working on some platform that needs to play some audio to an user, for example to sell some Audio file, it's pretty awesome to show its wave form so the user will be impressed about the structure of the Audio and of what your platform can do. 'A sound wave is the pattern of disturbance caused by the movement of energy traveling through a medium such as air'.