Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@eduarte/wavesurfer.js
Advanced tools
Wavesurfer.js is an interactive waveform rendering and audio playback library, perfect for web applications. It leverages modern web technologies to provide a robust and visually engaging audio experience.
Gold sponsor 💖 Closed Caption Creator
Install and import the package:
npm install --save wavesurfer.js
import WaveSurfer from 'wavesurfer.js'
Alternatively, insert a UMD script tag which exports the library as a global WaveSurfer
variable:
<script src="https://unpkg.com/wavesurfer.js@7"></script>
Create a wavesurfer instance and pass various options:
const wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: '#4F4A85',
progressColor: '#383351',
url: '/audio.mp3',
})
To import one of the plugins, e.g. the Regions plugin:
import Regions from 'wavesurfer.js/dist/plugins/regions.esm.js'
Or as a script tag that will export WaveSurfer.Regions
:
<script src="https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.min.js"></script>
TypeScript types are included in the package, so there's no need to install @types/wavesurfer.js
.
See more examples.
See the wavesurfer.js documentation on our website:
We maintain a number of official plugins that add various extra features:
wavesurfer.js v7 is rendered into a Shadow DOM tree. This isolates its CSS from the rest of the web page.
However, it's still possible to style various wavesurfer.js elements with CSS via the ::part()
pseudo-selector.
For example:
#waveform ::part(cursor):before {
content: '🏄';
}
#waveform ::part(region) {
font-family: fantasy;
}
You can see which elements you can style in the DOM inspector – they will have a part
attribute.
See this example to play around with styling.
Have a question about integrating wavesurfer.js on your website? Feel free to ask in our Discussions forum.
However, please keep in mind that this forum is dedicated to wavesurfer-specific questions. If you're new to JavaScript and need help with the general basics like importing NPM modules, please consider asking ChatGPT or StackOverflow first.
Alternatively, you can use the Web Audio shim which is more accurate.
Wavesurfer.js v7 is a TypeScript rewrite of wavesurfer.js that brings several improvements:
Most options, events, and methods are similar to those in previous versions.
backend: "MediaElement"
)startTime
.audioContext
, closeAudioContext
, audioScriptProcessor
autoCenterImmediately
– autoCenter
is now always immediate unless the audio is playingbackgroundColor
, hideCursor
– this can be easily set via CSSmediaType
– you should instead pass an entire media element in the media
option. Example.partialRender
– done by defaultpixelRatio
– window.devicePixelRatio
is used by defaultrenderer
– there's just one renderer for now, so no need for this optionresponsive
– responsiveness is enabled by defaultscrollParent
– the container will scroll if minPxPerSec
is set to a higher valueskipLength
– there's no skipForward
and skipBackward
methods anymoresplitChannelsOptions
– you should now use splitChannels
to pass the channel options. Pass height: 0
to hide a channel. See this example.drawingContextAttributes
, maxCanvasWidth
, forceDecode
– removed to reduce code complexityxhr
- please use fetchParams
insteadbarMinHeight
- the minimum bar height is now 1 pixel by defaultgetFilters
, setFilter
– see the Web Audio exampledrawBuffer
– to redraw the waveform, use setOptions
instead and pass new rendering optionscancelAjax
– you can pass an AbortSignal in fetchParams
skipForward
, skipBackward
, setPlayEnd
– can be implemented using setTime(time)
exportPCM
is replaced with exportPeaks
which returns arrays of floatstoggleMute
is now called setMuted(true | false)
setHeight
, setWaveColor
, setCursorColor
, etc. – use setOptions
with the corresponding params instead. E.g., wavesurfer.setOptions({ height: 300, waveColor: '#abc' })
See the complete documentation of the new API.
To get started with development, follow these steps:
yarn
yarn start
This command will open http://localhost:9090 in your browser with live reload, allowing you to see the changes as you develop.
The tests are written in the Cypress framework. They are a mix of e2e and visual regression tests.
To run the test suite locally, first build the project:
yarn build
Then launch the tests:
yarn cypress
We appreciate your feedback and contributions!
If you encounter any issues or have suggestions for improvements, please don't hesitate to post in our forum.
We hope you enjoy using wavesurfer.js and look forward to hearing about your experiences with the library!
FAQs
Audio waveform player
We found that @eduarte/wavesurfer.js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.