152 lines
4.9 KiB
HTML
152 lines
4.9 KiB
HTML
<!-doctype html ->
|
|
<html>
|
|
<head>
|
|
<title>
|
|
example lecteur audio
|
|
</title>
|
|
<meta charset="UTF-8"/>
|
|
<link rel="stylesheet" href="style.css"/>
|
|
<script src="js/wavesurfer.js"></script>
|
|
<script src="js/regions.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
|
|
<script type="application/javascript">
|
|
window.addEventListener('DOMContentLoaded', (event) => {
|
|
console.log('page is fully loaded' , WaveSurfer);
|
|
|
|
|
|
const refElement = document.querySelector('#waveform')
|
|
// const url = '/audio/anitra.mp4'
|
|
const url = 'http://localhost:5000/audio/anitra.mp4'
|
|
console.log('hello from main.js' , refElement)
|
|
const waveoptions = {
|
|
// container: refElement,
|
|
container: document.querySelector('#waveform'),
|
|
waveColor: '#A8DBA8',
|
|
progressColor: '#3B8686',
|
|
backend: 'MediaElement',
|
|
mediaControls: false,
|
|
plugins: [
|
|
WaveSurfer.regions.create({
|
|
regionsMinLength: 2,
|
|
regions: [
|
|
{
|
|
start: 1,
|
|
end: 3,
|
|
loop: false,
|
|
color: 'hsla(400, 100%, 30%, 0.5)'
|
|
},
|
|
{
|
|
start: 5,
|
|
end: 7,
|
|
loop: false,
|
|
color: 'hsla(200, 50%, 70%, 0.4)',
|
|
minLength: 1
|
|
}
|
|
],
|
|
dragSelection: {
|
|
slop: 5
|
|
}
|
|
}),
|
|
// WaveSurfer.markers.create({
|
|
// markers: [
|
|
// {
|
|
// time: 0,
|
|
// label: "BEGIN",
|
|
// color: '#ff990a'
|
|
// },
|
|
// {
|
|
// time: 5.5,
|
|
// label: "V1",
|
|
// color: '#ff990a'
|
|
// },
|
|
//
|
|
// {
|
|
// time: 24,
|
|
// label: "END",
|
|
// color: '#00ffcc',
|
|
// position: 'top'
|
|
// }
|
|
// ]
|
|
// })
|
|
]
|
|
}
|
|
|
|
WaveSurfer.create(waveoptions)
|
|
|
|
WaveSurfer.load(url)
|
|
wavesurfer.play();
|
|
const handlePlayPause = () => {
|
|
wavesurfer.playPause();
|
|
};
|
|
|
|
const onVolumeChange = e => {
|
|
console.log(e)
|
|
const { target } = e;
|
|
const newVolume = +target.value;
|
|
|
|
if (newVolume) {
|
|
setVolume(newVolume);
|
|
wavesurfer.current.setVolume(newVolume || 1);
|
|
}
|
|
};
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1> Example de lecteur audio enrichi</h1>
|
|
<blockquote>
|
|
Code de vincent:
|
|
<figure>
|
|
<figcaption>Écoute de l'émission intégrale</figcaption>
|
|
<audio id="player" controls preload="metadata">
|
|
<source src="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/20210622/libre-a-vous-20210622.ogg"
|
|
type="audio/ogg">
|
|
<source id="audio"
|
|
src="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/20210622/libre-a-vous-20210622.mp3"
|
|
type="audio/mp3">
|
|
Votre navigateur ne supporte pas l'élément <code>audio</code>
|
|
</audio>
|
|
</figure>
|
|
</blockquote>
|
|
<hr>
|
|
|
|
<div>
|
|
<h1> Rendu enrichi </h1>
|
|
<!-- sera remplacé par wavesurfer -->
|
|
<div id="waveform"></div>
|
|
<!-- <audio src="audio/anitra.mp4" controls></audio>-->
|
|
|
|
<button class="clickable play-pause" onclick="handlePlayPause">⏯️</button>
|
|
<button class="clickable forward">⏩</button>
|
|
|
|
<input type="range" id="volume" name="volume"
|
|
value="60" onclick="onVolumeChange"
|
|
min="0" max="100">
|
|
<label for="volume">Volume</label>
|
|
<h2>Sections</h2>
|
|
<ul>
|
|
<li class="clickable ">
|
|
intro
|
|
</li>
|
|
<li class="clickable ">
|
|
chronique A
|
|
</li>
|
|
<li class="clickable ">
|
|
sujet principal
|
|
</li>
|
|
<li class="clickable ">
|
|
pause musicale 1
|
|
</li>
|
|
<li class="clickable ">
|
|
chronique B
|
|
</li>
|
|
<li class="clickable ">
|
|
clotûre
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|