tykayn/libreavous-audio-reader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

hop

Browse Source
This commit is contained in:
Tykayn 2021-08-13 16:48:38 +02:00 committed by tykayn
parent a3aeb03c64
commit af53a973f4
9 changed files with 8979 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

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

125
index.html
View File

@ -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>
<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
View File

7
js/regions.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

6463
js/wavesurfer.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
js/wavesurfer.js.map Normal file
View File

File diff suppressed because one or more lines are too long

2367
js/wavesurfer.min.js vendored Executable file → Normal file
View File

File diff suppressed because one or more lines are too long

1
js/wavesurfer.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long

24
style.css
View File

@ -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;
}