Il s'agit d'un webreportage nécessitant le developpement d'une application intéractive
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

67 lines
2.7 KiB

<!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>