show wave on anitra's dance
This commit is contained in:
parent
af53a973f4
commit
0b86e12689
15
README.md
15
README.md
|
@ -2,6 +2,14 @@
|
||||||
|
|
||||||
lecteur audio pour l'émission Libre à vous
|
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
|
## liens
|
||||||
|
|
||||||
https://github.com/katspaugh/wavesurfer.js
|
https://github.com/katspaugh/wavesurfer.js
|
||||||
|
@ -17,4 +25,9 @@ rendu des vagues en avance côté serveur
|
||||||
https://wavesurfer-js.org/faq
|
https://wavesurfer-js.org/faq
|
||||||
|
|
||||||
https://521dimensions.com/open-source/amplitudejs/docs/fx/waveforms.html#displaying-waveform-elements
|
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
|
||||||
|
|
||||||
|
|
Binary file not shown.
164
index.html
164
index.html
|
@ -6,125 +6,34 @@
|
||||||
</title>
|
</title>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="stylesheet" href="style.css"/>
|
<link rel="stylesheet" href="style.css"/>
|
||||||
<script src="js/wavesurfer.js"></script>
|
<script type="application/javascript" src="js/wavesurfer.js"></script>
|
||||||
<script src="js/regions.min.js"></script>
|
<!-- <script type="application/javascript" src="https://unpkg.com/WaveSurfer.js/dist/WaveSurfer.js"></script>-->
|
||||||
<script src="js/main.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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1> Example de lecteur audio enrichi</h1>
|
<h1> Example de lecteur audio enrichi pour Libre à vous</h1>
|
||||||
<blockquote>
|
<section>
|
||||||
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> Rendu enrichi </h1>
|
<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"
|
<!-- contient les audio peaks sera remplacé par WaveSurfer -->
|
||||||
value="60" onclick="onVolumeChange"
|
<div id="wave_box">
|
||||||
min="0" max="100">
|
<div id="waveform"></div>
|
||||||
<label for="volume">Volume</label>
|
</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>
|
<h2>Sections</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li class="clickable ">
|
<li class="clickable ">
|
||||||
|
@ -146,6 +55,33 @@
|
||||||
clotûre
|
clotûre
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
74
js/main.js
74
js/main.js
|
@ -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
14
style.css
|
@ -1,12 +1,13 @@
|
||||||
body{
|
body{
|
||||||
margin: 5em;
|
margin: 5em;
|
||||||
|
background: #ccc;
|
||||||
}
|
}
|
||||||
.clickable{
|
.clickable{
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
}
|
}
|
||||||
.clickable:hover{
|
.clickable:hover{
|
||||||
background: #ffc08b
|
background: #222
|
||||||
}
|
}
|
||||||
li.clickable{
|
li.clickable{
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
@ -24,4 +25,15 @@ button{
|
||||||
}
|
}
|
||||||
meter{
|
meter{
|
||||||
background: black;
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#wave_box{
|
||||||
|
border-radius: 0.25em;
|
||||||
|
background: #222;
|
||||||
|
padding: 1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue