Audio Waveform SVG Path
Building path for SVG element to perform waveform view of audio file
Inspired by:
https://robots.thoughtbot.com/javascript-audio-api
Demo:
https://antonkalinin.github.io/audio-waveform-svg-path/
Installation
npm install --save audio-waveform-svg-pathUsage
import AudioSVGWaveform from 'audio-waveform-svg-path';
const trackWaveform = new AudioSVGWaveform({url: 'url of audio file'});
trackWaveform.loadFromUrl().then(() => {
const path = trackWaveform.getPath();
document.getElementById('my-path-element').setAttribute('d', path);
});
Constructor accepts object with one of keys:
{
url: 'url address of audio file',
buffer: 'audio as AudioBuffer'
}Methods
-
loadFromUrl - loads audio from url, returns Promise
-
getPath(preprocessChannels) - returns a path of waveform, accepts callback function as only arument
Example of getPath with callback
const diffPath = trackWaveform.getPath(
/*
Use preprocessChannels callback to modify final list of channels.
This callback will be invocked as a argument of reduce method of channels array.
*/
(channels, channel) => {
const prevChannel = channels[0];
const length = channel.length;
const outputChannel = [];
if (prevChannel) {
for (let i = 0; i < length; i++) {
// flip phase of right channel
outputChannel[i] = (channel[i] - prevChannel[i]);
}
channels[0] = outputChannel;
} else {
channels.push(channel);
}
return channels;
},
[]
);