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

show wave on anitra's dance

This commit is contained in:
Tykayn 2021-08-13 17:53:07 +02:00 committed by tykayn
parent af53a973f4
commit 0b86e12689
5 changed files with 151 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@ -2,6 +2,14 @@
lecteur audio pour l'émission Libre à vous
## Être débuté
servir le dossier local avec le package npm **serve**,
```bash
serve .
```
et ouvrir localhost://5000
ou lancer index.html dans un navigateur.
## liens
https://github.com/katspaugh/wavesurfer.js
@ -17,4 +25,9 @@ rendu des vagues en avance côté serveur
https://wavesurfer-js.org/faq
https://521dimensions.com/open-source/amplitudejs/docs/fx/waveforms.html#displaying-waveform-elements
https://wavesurfer-js.org
https://wavesurfer-js.org
## génération de wave peaks
avec audiowaveforms

BIN
audio/demo.wav Normal file
View File

Binary file not shown.

164
index.html
View File

@ -6,125 +6,34 @@
</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" src="js/wavesurfer.js"></script>
<!-- <script type="application/javascript" src="https://unpkg.com/WaveSurfer.js/dist/WaveSurfer.js"></script>-->
<!-- <script src="js/regions.min.js"></script>-->
<!-- <script src="https://unpkg.com/peaks.js"></script>-->
<script type="application/javascript" 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> Example de lecteur audio enrichi pour Libre à vous</h1>
<section>
<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>
<!-- contient les audio peaks sera remplacé par WaveSurfer -->
<div id="wave_box">
<div id="waveform"></div>
</div>
<div class="controls">
<button class="clickable play-pause" onclick="silverSurfer.playPause()">⏯️</button>
<button class="clickable forward">⏩</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 ">
@ -146,6 +55,33 @@
clotûre
</li>
</ul>
</div>
<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>

74
js/main.js
View File

@ -0,0 +1,74 @@
let silverSurfer = {}
const handlePlayPause = () => {
silverSurfer.playPause();
};
const onVolumeChange = e => {
console.log(e)
const {target} = e;
const newVolume = +target.value;
if (newVolume) {
setVolume(newVolume);
WaveSurfer.current.setVolume(newVolume || 1);
}
};
window.addEventListener('DOMContentLoaded', (event) => {
console.log('page is fully loaded', WaveSurfer);
const refElement = document.querySelector('#waveform')
// const url = '/audio/anitra.mp4'
// const url = document.querySelector('#player source').src
const url = 'http://localhost:5000/audio/anitra.mp4'
console.log('hello from main.js', refElement)
const waveoptions = {
// container: refElement,
container: document.querySelector('#waveform'),
// The color can be either a simple CSS color or a Canvas gradient
waveColor: '#ffa492',
progressColor: 'hsla(12,100%,43%,0.5)',
cursorColor: '#fff',
// This parameter makes the waveform look like SoundCloud's player
barWidth: 1,
barHeight: 10,
backend: 'MediaElement',
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
// }
// }),
]
};
console.log('url', url);
silverSurfer = WaveSurfer.create(waveoptions)
silverSurfer.load(url)
console.log('silverSurfer', silverSurfer);
});

14
style.css
View File

@ -1,12 +1,13 @@
body{
margin: 5em;
background: #ccc;
}
.clickable{
cursor:pointer;
font-size: 1.5em;
}
.clickable:hover{
background: #ffc08b
background: #222
}
li.clickable{
padding: 1em;
@ -24,4 +25,15 @@ button{
}
meter{
background: black;
}
audio{
width: 100%;
}
#wave_box{
border-radius: 0.25em;
background: #222;
padding: 1em;
margin-bottom: 1em;
}