Skip to content

Instantly share code, notes, and snippets.

@erubescent
Created March 15, 2018 06:13
Show Gist options
  • Save erubescent/4fff0d7d209680b5dcc676e17582eed5 to your computer and use it in GitHub Desktop.
Save erubescent/4fff0d7d209680b5dcc676e17582eed5 to your computer and use it in GitHub Desktop.
wavesurfer
'use strict';
// console log
console.log('hi');
// init wavesurfer
var wavesurfer;
var formatTime = function (time) {
return [
Math.floor((time % 3600) / 60), // minutes
('00' + Math.floor(time % 60)).slice(-2) // seconds
].join(':');
};
// add event listener
document.addEventListener('DOMContentLoaded', function() {
var playPause = document.querySelector('#playPause');
playPause.addEventListener('click', function() {
wavesurfer.playPause();
});
// create wavesurfer instance
wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: '#333',
progressColor: '#492581',
backend: 'MediaElement',
interact: true,
barWidth: 3,
minPxPerSec: 10,
pixelRatio: 1,
cursorWidth: 0
}); // create
// controls
document
.querySelector('[data-action="play"]');
wavesurfer.on('ready', function () {
wavesurfer.stop();
}); // on ready
wavesurfer.on('audioprocess', function () {
$('.wf__counter').text( formatTime(wavesurfer.getCurrentTime()) );
$('.wf__duration').text( formatTime(wavesurfer.getDuration()) );
}); // current time
wavesurfer.load('https://cdn.glitch.com/ff3eb88f-1430-422a-a35e-bd2cde5b85d4%2FHippie%20Sabotage%20-%20Running%20Miles.mp3?1521078209219');
}); // end javascript
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment