hop
This commit is contained in:
tykayn
parent
a3aeb03c64
commit
af53a973f4
|
|
@ -8,6 +8,7 @@ https://github.com/katspaugh/wavesurfer.js
|
|||
|
||||
démo du rendu recherché:
|
||||
https://dev.to/jamland/audio-player-with-wavesurfer-js-react-1g3b
|
||||
https://codesandbox.io/s/audio-player-with-wavesurferjs-react-bd499?from-embed
|
||||
|
||||
marqueurs pour chapitres
|
||||
https://wavesurfer-js.org/plugins/markers.html
|
||||
|
|
|
|||
127
index.html
127
index.html
|
|
@ -6,7 +6,93 @@
|
|||
</title>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="stylesheet" href="style.css"/>
|
||||
<script src="js/wavesurfer.min.js"></script>
|
||||
<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>
|
||||
|
|
@ -25,14 +111,41 @@
|
|||
</figure>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<audio src="audio/anitra.mp4" controls></audio>
|
||||
<!-- a div where the div will be placed -->
|
||||
|
||||
<div id="waveform"></div>
|
||||
<div>
|
||||
<h1> Rendu enrichi </h1>
|
||||
<!-- sera remplacé par wavesurfer -->
|
||||
<div id="waveform"></div>
|
||||
<!-- <audio src="audio/anitra.mp4" controls></audio>-->
|
||||
|
||||
<script>
|
||||
const player = new Plyr('#player');
|
||||
</script>
|
||||
<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>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
24
style.css
24
style.css
|
|
@ -1,3 +1,27 @@
|
|||
body{
|
||||
margin: 5em;
|
||||
}
|
||||
.clickable{
|
||||
cursor:pointer;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.clickable:hover{
|
||||
background: #ffc08b
|
||||
}
|
||||
li.clickable{
|
||||
padding: 1em;
|
||||
}
|
||||
button{
|
||||
padding: 2em;
|
||||
border-radius: 10em;
|
||||
min-width: 2em;
|
||||
min-height: 2em;
|
||||
}
|
||||
#media_player{
|
||||
margin: 2em auto;
|
||||
border: solid 1px grey;
|
||||
padding: 2em;
|
||||
}
|
||||
meter{
|
||||
background: black;
|
||||
}
|
||||
Loading…
Reference in New Issue