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>
|
||||
|
||||
0
js/main.js
Normal file
0
js/main.js
Normal file
7
js/regions.min.js
vendored
Normal file
7
js/regions.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
6463
js/wavesurfer.js
Normal file
6463
js/wavesurfer.js
Normal file
File diff suppressed because it is too large
Load Diff
1
js/wavesurfer.js.map
Normal file
1
js/wavesurfer.js.map
Normal file
File diff suppressed because one or more lines are too long
2367
js/wavesurfer.min.js
vendored
Executable file → Normal file
2367
js/wavesurfer.min.js
vendored
Executable file → Normal file
File diff suppressed because one or more lines are too long
1
js/wavesurfer.min.js.map
Normal file
1
js/wavesurfer.min.js.map
Normal file
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
Block a user