A few days ago a discussion in the Freak Show podcast
pointed to an interesting BBC research project to render audio waveforms in the browser.
We now added a new output file format (Waveform Data File), which is generated by the open source tool audiowaveform and can be used to display interactive audio waveform data using the Peaks.js java script library.
Here is an example screenshot:
(image from BBC R&D blog)
The tool includes features to zoom in waveforms, to mark segments in audio files (could be interesting for chapter marks) and can be easily integrated in HTML 5 audio or video players.
Here you can try a working demo example by BBC:
Peaks.js Example
Also read this detailed article about Peaks.js:
Peaks.js: Audio waveform rendering in the browser
Auphonic Waveform Data Output File
To create a waveform display in browsers using Peak.js, you need a data file with the audio information. Now this can be done with Auphonic by adding the output file format Waveform Data file to your production:
You can also use the open source tool audiowaveform to calculate the waveform data yourself.
Start Java Script Experiments
Let us know if you find this information useful or if you built some nice java script experiments using the waveform data.
It would be a great addition on how to display audio files in HTML 5 web players!
Links
- BBC demo page: Peaks.js Example
- Detailed article: Peaks.js: Audio waveform rendering in the browser
- Peaks.js source code: peak.js
- audiowaveform source code: audiowaveform
- waveform-data.js source code: waveform-data.js