WAVEFORM COLOR WAVESURFER JS HOW TO

The regions plugin allows the user to create regions on the waveform of the audio by clicking and dragging.

WAVEFORM COLOR WAVESURFER JS HOW TO

Today, I will share how I built an advanced audio player using WavesurferJS in NextJS.Īdditionally, I will also show how to use the regions plugin with wavesurfer. Audio files can be loaded from a remote URL or locally. Wavesurfer is a JavaScript library that uses Web Audio API and HTML5 canvas to display and play audio files. It also emits helpful events like play, pause, end, seek, etc.īut if you want to build something more advanced like an audio editor, the audio tag isn’t sufficient. It supports looping, autoplay, mute, enable/disable controls, etc. The tag is supported by most modern browsers (IE too!) and has all the basic features required for an audio player. If you prefer a video over text, click here.īuilding an audio player has become fairly simple after HTML5.

ready – When audio is loaded, decoded and the waveform drawn.

Callback will receive (integer) loading progress in percents.

loading – Fires continuously when loading.

Callback will receive (string) error message.

init – The SWF has loaded and is ready to init.

exportPCM() – Get the PCM wave data as an array.

toggleMute() – Toggles the volume on and off.

stop() – Stops and goes to the beginning.

setVolume(newVolume) – Sets the playback volume to a new value (0 = silent, 1 = maximum).

seekTo(progress) – Seeks to a progress (0=beginning, 1=end).

playPause() – Plays if paused, pauses if playing.

play() – Starts playback from the current position.

unAll() – Unsubscribes from all events.

un(eventName, callback) – Unsubscribes from an event.

See WaveSurfer Events section below for a list.

on(eventName, callback) – Subscribes to an event.

Optionally you can supply your own waveform data.

isPlaying() – Returns true if currently playing, false otherwise.

getDuration() – Returns the duration of an audio clip in seconds.

getCurrentTime() – Returns current progress in seconds.

There are 106 other projects in the npm registry using wavesurfer.js. Start using wavesurfer.js in your project by running npm i wavesurfer.js. Latest version: 6.4.0, last published: 2 months ago.

init(options) – Initializes with the options listed above. Interactive navigable audio visualization using Web Audio and Canvas.

The fill color of the waveform after the cursor. Latest version: 6.2.0, last published: 4 months ago. The fill color of the part of the waveform behind the cursor. Interactive navigable audio visualization using Web Audio and Canvas.

The fill color of the cursor indicating the playhead position. Below you'll find a list of everything that's supported. Not all of the wavesurfer.js is currently supported. on ( 'init', function ( ) ) įor more examples, please refer to the readme of wavesurfer.js. embed the SWF on the page using any method you like // Wait for the swf to initialize wavesurfer.

The API is similar to the js version, although not all methods and configuration options are You need to run this demo on a webserver. In mind that you cannot view the Flash version when running from your local disk. Please refer to the demo folder for an example on how to implement wavesurfer.swf. Wavesurfer.swf has no requirements apart from wavesurfer.js! However, we use SWFObject in It was originally built to support IE9 - IE11 which all Browser supportĪny browser that runs Flash. It does this by mimicking the js version in Flash, using the same API. The purpose of wavesurfer.swf is to bring as many wavesurfer.jsįunctionalities as possible to browser that do not support WebAudio or Canvas. No one should use Flash anymore and my knowledge of ActionScript has withered away :) Goal Note: This repository is now archived and readonly.

Waveform color wavesurfer js