Bachir Soussi Chiadmi 0942e9a212 added audioplayer contrib module | 7 år sedan | |
---|---|---|
.. | ||
.github | 7 år sedan | |
example | 7 år sedan | |
spec | 7 år sedan | |
src | 7 år sedan | |
.babelrc | 7 år sedan | |
.editorconfig | 7 år sedan | |
.esdoc.json | 7 år sedan | |
.eslintrc.js | 7 år sedan | |
.gitignore | 7 år sedan | |
.jscsrc | 7 år sedan | |
.npmignore | 7 år sedan | |
.travis.yml | 7 år sedan | |
CHANGES.md | 7 år sedan | |
CNAME | 7 år sedan | |
LICENSE | 7 år sedan | |
README.md | 7 år sedan | |
bower.json | 7 år sedan | |
karma.conf.js | 7 år sedan | |
package.json | 7 år sedan | |
webpack.config.babel.js | 7 år sedan |
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 in other browsers (without graphics). You can also try wavesurfer.swf which is a Flash-based fallback.
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.
Note on version 2: The wavesurfer.js core library and the plugins were refactored to be modular so it can be used with a module bundler. (You can still use wavesurfer without, e.g. with <script>
tags) The code was also updated to ES6/ES7 syntax and is transpiled with babel and webpack. Read below how to update your code.
The API has mostly stayed the same but there are some changes to consider:
MultiCanvas renderer is now the default: It provides all functionality of the Canvas renderer. – Most likely you can simply remove the renderer option – The Canvas renderer has been removed. (The renderer
option still exists but wavesurfer expects it to be a renderer object, not merely a string.)
Constructor functions instead of object constructors
// Old:
var wavesurfer = Object.create(WaveSurfer);
Wavesurfer.init(options);
// New:
var wavesurfer = WaveSurfer.create(options);
// ... or
var wavesurfer = new WaveSurfer(options);
wavesurfer.init();
// EITHER - accessing modules with <script> tags
var WaveSurfer = window.WaveSurfer;
var TimelinePlugin = window.WaveSurfer.timeline;
var MinimapPlugin = window.WaveSurfer.minimap;
// OR - importing as es6 module
import WaveSurfer from 'wavesurfer.js';
import TimelinePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js';
import MinimapPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.minimap.min.js';
// OR - importing as require.js/commonjs modules
var WaveSurfer = require('wavesurfer.js');
var TimelinePlugin = require('wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js');
var MinimapPlugin = require('wavesurfer.js/dist/plugin/wavesurfer.minimap.min.js');
// ... initialising waveform with plugins
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
plugins: [
TimelinePlugin.create({
container: '#wave-timeline'
}),
MinimapPlugin.create()
]
});
Note: Read more about the plugin API in the documentation.
Wavesurfer can be used 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
The homepage and documentation files are maintained in the gh-pages
branch. Contributions to the documentation are especially welcome.
Initial idea by Alex Khokhulin. Many thanks to the awesome contributors!
This work is licensed under a BSD 3-Clause License.