Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@blerp/wavesurfer
Advanced tools
Interactive navigable audio visualization using Web Audio and Canvas
Interactive navigable audio visualization using Web Audio and Canvas.
See a tutorial and examples on wavesurfer-js.org.
wavesurfer.js works only in modern browsers supporting Web Audio.
It will fallback to Audio Element without graphics in other browsers (IE 11 and lower).
Yes, if you use the backend: 'MediaElement'
option. See here: https://wavesurfer-js.org/example/audio-element/. The audio will start playing as you press play. A thin line will be displayed until the whole audio file is downloaded and decoded to draw the waveform.
No. Web Audio needs the whole file to decode it in the browser. You can however load pre-decoded waveform data to draw the waveform immediately. See here: https://wavesurfer-js.org/example/audio-element/ (the "Pre-recoded Peaks" section).
Choose a container:
<div id="waveform"></div>
Create an instance, passing the container selector and options:
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
Subscribe to some events:
wavesurfer.on('ready', function () {
wavesurfer.play();
});
Load an audio file from a URL:
wavesurfer.load('example/media/demo.wav');
See the documentation on all available methods, options and events on the homepage.
See the upgrade document if you're upgrading from a previous version of wavesurfer.js.
Install Wavesurfer:
npm install wavesurfer.js --save
# or
yarn add wavesurfer.js
Use it with a module system like this:
// import
import WaveSurfer from 'wavesurfer.js';
// commonjs/requirejs
var WaveSurfer = require('wavesurfer.js');
// amd
define(['WaveSurfer'], function(WaveSurfer) {
// ... code
});
For a list of projects using wavesurfer.js, check out the projects page.
Install development dependencies:
npm install
Development tasks automatically rebuild certain parts of the library when files are changed (start
– wavesurfer, start:plugins
– plugins). Start a dev task and go to localhost:8080/example/
to test the current build.
Start development server for core library:
npm run start
Start development server for plugins:
npm run start:plugins
Build all the files. (generated files are placed in the dist
directory.)
npm run build
Running tests only:
npm run test
Build documentation with esdoc (generated files are placed in the doc
directory.)
npm run doc
If you want to use the VS Code - Debugger for Chrome, there is already a launch.json with a properly configured sourceMapPathOverrides
for you.
The homepage and documentation files are maintained in the gh-pages
branch. Contributions to the documentation are especially welcome.
When preparing a new release, update the version in the package.json
and have it merged to master. The new version of the package will be published to NPM automatically via GitHub Actions.
The main maintainer: Thijs Triemstra
Many thanks to all the awesome contributors!
This work is licensed under a BSD 3-Clause License.
FAQs
Interactive navigable audio visualization using Web Audio and Canvas
We found that @blerp/wavesurfer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.