WFPlayer.js is an audio waveform generator
Checkout the demo from Github Pages
- Create waveforms without loading the entire media file
- Customize cursor, progress, grid, ruler display and color
- Support for loading media urls and loading media dom elements (video tags and audio tags)
- Support for real-time change options like color or width etc
- Listen to the playback state of media elements for playback animation
- Adaptive parent element size and audio data
- And more...
Install with npm
$ npm install wfplayer
Or install with yarn
$ yarn add wfplayer
import WFPlayer from 'wfplayer';
Or umd builds are also available
<script src="path/to/wfplayer.js"></script>
Will expose the global variable to window.WFPlayer
.
HTML
<div id="waveform" style="width: 1000px; height: 300px"></div>
<video id="video" src="path/to/video.mp4"></video>
<!-- or -->
<audio id="audio" src="path/to/audio.mp3"></audio>
JS
var wf = new WFPlayer({
container: document.querySelector('#waveform'),
});
wf.load(document.querySelector('#video'));
// or
wf.load(document.querySelector('#audio'));
var wf = new WFPlayer({
// Mount the audio waveform of the dom
container: '#waveform',
// Media element like: video tag or audio tag
mediaElement: null,
// Whether to display wave
wave: true,
// Waveform color
waveColor: 'rgba(255, 255, 255, 0.1)',
// Background color
backgroundColor: 'rgb(28, 32, 34)',
// Whether to display cursor
cursor: true,
// Cursor color
cursorColor: '#ff0000',
// Whether to display progress
progress: true,
// progress color
progressColor: 'rgba(255, 255, 255, 0.5)',
// Whether to display grid
grid: true,
// Grid color
gridColor: 'rgba(255, 255, 255, 0.05)',
// Whether to display ruler
ruler: true,
// Ruler color
rulerColor: 'rgba(255, 255, 255, 0.5)',
// Whether to display ruler at the top
rulerAtTop: true,
// Indicates whether to do http fetching with cookies
withCredentials: false,
// Indicates whether to enable CORS for http fetching
cors: false,
// Initialize http headers
headers: {},
// Pixel ratio
pixelRatio: window.devicePixelRatio,
// Which audio channel to render
channel: 0,
// Duration of rendering
duration: 10,
// The ratio of spaces on both sides
padding: 5,
// Waveform height scale ratio
waveScale: 0.8,
});
Load target:
// The target can be the url address of media or a mediaElement
wf.load(target);
Change Channel:
wf.changeChannel(1);
Jump to a certain time:
wf.seek(second);
Export image:
wf.exportImage();
Modify option:
wf.setOptions({
// Like change wave color
waveColor: 'red',
});
Destroy instance:
wf.destroy();
Name | Description |
---|---|
load |
Start loading |
options |
Received new options |
click |
Click on the canvas to return to the click time |
contextmenu |
Right click on the canvas to return to the click time |
resize |
Canvas adaptive size |
playing |
Playing animation |
decodeing |
Decoding and returning the proportion that has been decoded |
loadStart |
Start loading resources |
loadEnd |
The resource is loaded |
downloading |
The proportion of loading and returning loading |
audiobuffer |
Decoded audio data |
channelData |
Decoded audio channelData data |
Example:
wf.on('decodeing', function(percentage) {
console.log(percentage);
});
Get all instances:
WFPlayer.instances;
Get the version:
WFPlayer.version;
Get the env:
WFPlayer.env;
We accept donations through these channels:
MIT © Harvey Zack