89 lines
2.8 KiB
HTML
89 lines
2.8 KiB
HTML
<!-doctype html ->
|
|
<html>
|
|
<head>
|
|
<title>
|
|
example lecteur audio
|
|
</title>
|
|
<meta charset="UTF-8"/>
|
|
<link rel="stylesheet" href="style.css"/>
|
|
<script type="application/javascript" src="js/wavesurfer.js"></script>
|
|
<script src="js/regions.min.js"></script>
|
|
<script src="js/markers.min.js"></script>
|
|
<script type="application/javascript" src="js/main.js"></script>
|
|
|
|
</head>
|
|
<body onkeyup="silverSurfer.playPause()">
|
|
<h1> Example de lecteur audio enrichi pour Libre à vous</h1>
|
|
<section>
|
|
<h1> Rendu enrichi </h1>
|
|
|
|
|
|
<!-- contient les audio peaks sera remplacé par WaveSurfer -->
|
|
<div id="wave_box">
|
|
<div id="waveform"></div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
|
|
<button class="clickable forward" onclick="silverSurfer.skip(-30)">⏩ -30s</button>
|
|
<button class="clickable play-pause" onclick="silverSurfer.playPause()">⏯️</button>
|
|
<button class="clickable forward" onclick="silverSurfer.skip(30)">⏩ +30s</button>
|
|
<button class="clickable forward" onclick="silverSurfer.stop()">stop</button>
|
|
|
|
<input type="range" id="volume" name="volume"
|
|
value="60" onchange="onVolumeChange"
|
|
min="0" max="100">
|
|
<label for="volume">Volume</label>
|
|
</div>
|
|
<h2>Sections</h2>
|
|
<ul>
|
|
<li class="clickable ">
|
|
intro
|
|
</li>
|
|
<li class="clickable " onclick="silverSurfer.play(60)">
|
|
01:00 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>
|
|
|
|
|
|
<audio id="anitra" src="audio/anitra.mp4" controls></audio>
|
|
</section>
|
|
<section>
|
|
|
|
<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>
|
|
Anitra:
|
|
<audio id="to_pick" controls preload="metadata">
|
|
<source src="http://localhost:5000/audio/demo.wav"
|
|
type="audio/mp4">
|
|
Votre navigateur ne supporte pas l'élément <code>audio</code>
|
|
</audio>
|
|
</section>
|
|
</body>
|
|
</html>
|