Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
WFPlayer
WFPlayer.js is an audio waveform generator
Demo
Checkout the demo from Github Pages
Features
- 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
Install with npm
$ npm install wfplayerOr install with yarn
$ yarn add wfplayerimport WFPlayer from 'wfplayer';Or umd builds are also available
<script src="path/to/wfplayer.js"></script>Will expose the global variable to window.WFPlayer.
Usage
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'));API
Options
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,
});Instance methods and properties
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();Instance event
| 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);
});Class methods and properties
Get all instances:
WFPlayer.instances;Get the version:
WFPlayer.version;Get the env:
WFPlayer.env;Donations
We accept donations through these channels:
QQ Group
License
MIT ยฉ Harvey Zack
