WAVEFORM COLOR WAVESURFER JS HOW TO
WAVEFORM COLOR WAVESURFER JS INSTALL

Number of seconds to skip with the skipForward() and skipBackward() methods. Otherwise the waveform is shrunk to the container width (see fillParent). Whether to scroll the container with a lengthy waveform. The fill color of the part of the waveform behind the cursor. If true, normalize by the maximum peak instead of 1.0. Minimum number of pixels per second of audio. You can switch this parameter at any time later on. Whether the mouse interaction will be enabled at initialization. Whether to hide the horizontal scrollbar when one would normally be shown. Whether to fill the entire container or draw only according to minPxPerSec. The fill color of the cursor indicating the playhead position. AudioElement is a fallback for unsupported browsers.ĬSS-selector or HTML-element where the waveform should be drawn. In most cases you don't have to set this manually. Use your own previously initialized AudioContext or leave blank. Stop: document.getElementById('btn-stop')ī. Pause: document.getElementById('btn-pause'), 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. 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').

WAVEFORM COLOR WAVESURFER JS 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.

WAVEFORM COLOR WAVESURFER JS 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'.

Waveform color wavesurfer js