File size: 1,252 Bytes
c174364 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<script src="https://unpkg.com/wavesurfer.js"></script>
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.min.js"></script>
<script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js"></script>
<br>
<div id="waveform"></div>
<div id="timeline"></div>
<br>
<div><button onclick="play()" id="ppb">Play</button><div>
<script type="text/javascript">
var labels=[];
var wavesurfer = WaveSurfer.create({
container: '#waveform',
barGap: 2,
barHeight: 3,
barWidth: 3,
barRadius: 2,
plugins: [
WaveSurfer.regions.create({}),
WaveSurfer.timeline.create({
container: "#timeline",
notchPercentHeight: 40,
primaryColor: "#444",
primaryFontColor: "#444"
})
]
});
wavesurfer.load('BASE64');
wavesurfer.on('ready', function () {
wavesurfer.play();
});
wavesurfer.on('play',function() {
document.getElementById('ppb').innerHTML = "Pause";
});
wavesurfer.on('pause',function() {
document.getElementById('ppb').innerHTML = "Play";
});
REGIONS
document.addEventListener('keyup', event => {
if (event.code === 'Space') {
play();
}
})
function play(){
wavesurfer.isPlaying() ? wavesurfer.pause() : wavesurfer.play();
}
</script>
|