It's built using plain HTML, CSS, and vanilla Javascript. Example: var lowpass = .This tutorial will walk you through the steps required to create a SoundCloud-style audio player with custom audio controls and a live waveform. With the WebAudio or the MediaElementWebAudio backend you can insert your own Web Audio nodes into the graph using the method setFilter(). ItĪlso changes the parameter minPxPerSec and enables the

Parameter is a number of horizontal pixels per second of audio.

zoom(pxPerSec) – Horizontally zooms the waveform in and out.

toggleInteraction() – Toggle mouse interaction.

toggleMute() – Toggles the volume on and off.

stop() – Stops and goes to the beginning.

setSinkId(deviceId) - Set the sink id to change audio output device.

skipForward() - Skip ahead skipLength seconds.

skipBackward() - Rewind skipLength seconds.

skip(offset) – Skip a number of seconds from the current position (use a negative value to go backwards).

setWaveColor(color) – Sets the fill color of the waveform after the cursor.

setProgressColor(color) – Sets the fill color of the waveform behind the cursor.

Can be a boolean value of true to mute sound or false to unmute

setMute(mute) – Mute the current sound.

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

setPlayEnd(position) – Sets set a point in seconds for playback to stop at.

setPlaybackRate(rate) – Sets the speed of playback ( 0.5 is half speed, 1 is normal speed, 2 is double speed and so on).

setFilter(filters) - For inserting your own WebAudio nodes into the graph.

setHeight(height) – Sets the height of the waveform.

setCursorColor(color) – Sets the fill color of the cursor indicating the playhead position.

setBackgroundColor(color) – Sets the background color of the waveform container.

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

seekAndCenter(progress) – Seeks to a progress and centers view (0 = beginning, 1 = end).

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

Optional start and end measured in seconds can be used to set the range of audio to play.

play(]) – Starts playback from the current position.

unAll() – Unsubscribes from all events.

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

See WaveSurfer Events for the list of all events.

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

loadBlob(url) – Loads audio from a Blob or File object.Optional preload parameter, passed to the Audio element if using backend MediaElement. load(url, peaks, preload) – Loads audio from URL via XHR.isPlaying() – Returns true if currently playing, false otherwise.exportImage(format, quality, type) – Return waveform image as data URI or Blob.Optional parameters length - default: 1024, accuracy - default: 10000, noWindow - default: false, start - default: 0

exportPCM(length, accuracy, noWindow, start) – Exports PCM data into a JSON array.getWaveColor() – Returns the fill color of the waveform after the cursor.getFilters() – Returns an array of the current set filters.getMute() – Returns the current mute status.getVolume() – Returns the volume of the current audio clip.getProgressColor() – Returns the fill color of the waveform behind the cursor.getPlaybackRate() – Returns the playback speed of an audio clip.getDuration() – Returns the duration of an audio clip in seconds.getCursorColor() – Returns the fill color of the cursor indicating the playhead position.getCurrentTime() – Returns current progress in seconds.getBackgroundColor() – Returns the background color of the waveform container.getActivePlugins() – Returns a map of plugin names that are currently initialised.empty() – Clears the waveform as if a zero-length audio is loaded.destroy() – Removes events, elements and disconnects Web Audio nodes.cancelAjax() – Cancel the audio file loading process.After creating an instance of the player (with var wavesurfer = WaveSurfer.create()), you can call the following methods on it:

Wavesurfer preload audio