![]() Willing to make it in the browser? Then Wavesurfer.js is the right tool for you. 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. ![]() Wavesurfer.js is a customizable audio waveform visualization, built on top of Web Audio API and HTML5 Canvas. 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. If you want to use a module bundler like browserify, webpack etc, then you will need to use the version that supports this approach. You will need to install the module in your project using the following command: npm install Then you will be able to require the module using require("wavesurfer.js"). 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. The method of your interest is the create method. The only required parameter is container. It can be either a unique CSS3 selector, or a DOM element. However, you can also pass any number of options. 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. The plugin exposes the global variable WaveSurfer in the browser, so you can simply use it once the script is loaded. ![]() 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 following document is ready to be tested and you only need to provide a valid audio file. Play: document.getElementById("btn-play"), The core file of Wavesurfer is included through the CDN: In this case, we have a simple responsive audio spectrum that will be rendered in the browser and 3 controls namely play, pause and stop.
0 Comments
Leave a Reply. |