65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
'use strict';
|
|
|
|
// Create an instance
|
|
var wavesurfer;
|
|
|
|
// Init & load audio file
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Init
|
|
wavesurfer = WaveSurfer.create({
|
|
container: document.querySelector('#waveform'),
|
|
waveColor: 'black',
|
|
backend: 'MediaElement',
|
|
plugins: [
|
|
WaveSurfer.mediasession.create({
|
|
metadata: {
|
|
title: 'Wavesurfer.js Example',
|
|
artist: 'The Wavesurfer.js Project',
|
|
album: 'Media Session Plugin',
|
|
artwork: [
|
|
{
|
|
src: 'https://dummyimage.com/96x96',
|
|
sizes: '96x96',
|
|
type: 'image/png'
|
|
},
|
|
{
|
|
src: 'https://dummyimage.com/128x128',
|
|
sizes: '128x128',
|
|
type: 'image/png'
|
|
},
|
|
{
|
|
src: 'https://dummyimage.com/192x192',
|
|
sizes: '192x192',
|
|
type: 'image/png'
|
|
},
|
|
{
|
|
src: 'https://dummyimage.com/256x256',
|
|
sizes: '256x256',
|
|
type: 'image/png'
|
|
},
|
|
{
|
|
src: 'https://dummyimage.com/384x384',
|
|
sizes: '384x384',
|
|
type: 'image/png'
|
|
},
|
|
{
|
|
src: 'https://dummyimage.com/512x512',
|
|
sizes: '512x512',
|
|
type: 'image/png'
|
|
}
|
|
]
|
|
}
|
|
})
|
|
]
|
|
});
|
|
|
|
// controls
|
|
document
|
|
.querySelector('[data-action="play"]')
|
|
.addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
|
|
|
|
// load audio from existing media element
|
|
let mediaElt = document.querySelector('audio');
|
|
wavesurfer.load(mediaElt);
|
|
});
|