68 lines
2.7 KiB
HTML
68 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
To change this license header, choose License Headers in Project Properties.
|
|
To change this template file, choose Tools | Templates
|
|
and open the template in the editor.
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>TODO supply a title</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
</head>
|
|
<body>
|
|
<div id="demo">
|
|
<div id="waveform">
|
|
<!-- Here be the waveform -->
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button class="btn btn-primary" data-action="play">
|
|
<i class="glyphicon glyphicon-play"></i>
|
|
Play
|
|
/
|
|
<i class="glyphicon glyphicon-pause"></i>
|
|
Pause
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<script src="assets/js/jquery-3.2.1.min.js"></script>
|
|
<script src="assets/js/wavesurfer.min.js"></script>
|
|
<script src="assets/js/wavesurfer.regions.js"></script>
|
|
<script>
|
|
'use strict';
|
|
|
|
// Create an instance
|
|
var wavesurfer = Object.create(WaveSurfer);
|
|
|
|
// Init & load audio file
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Init
|
|
wavesurfer.init({
|
|
container: document.querySelector('#waveform'),
|
|
waveColor: '#3b75ad',
|
|
progressColor: '#304559',
|
|
backend: 'MediaElement'
|
|
});
|
|
|
|
// Load audio from URL
|
|
wavesurfer.load('assets/audio/interview.mp3');
|
|
|
|
document.querySelector(
|
|
'[data-action="play"]'
|
|
).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
|
|
|
|
document.querySelector(
|
|
'[data-action="peaks"]'
|
|
).addEventListener('click', function () {
|
|
wavesurfer.load('assets/audio/Rip_Tear.mp3', [
|
|
0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108
|
|
]);
|
|
document.body.scrollTop = 0;
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|