110 lines
3.2 KiB
JavaScript
110 lines
3.2 KiB
JavaScript
|
|
|
|
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'
|
|
// const url = 'https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/20210622/libre-a-vous-20210622.ogg'
|
|
|
|
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: [
|
|
// rectangles de zones
|
|
WaveSurfer.regions.create({
|
|
regionsMinLength: 2,
|
|
regions: [
|
|
{
|
|
start: 50,
|
|
end: 70,
|
|
loop: false,
|
|
color: 'hsla(400, 100%, 30%, 0.25)'
|
|
},
|
|
{
|
|
start: 150,
|
|
end: 200,
|
|
loop: false,
|
|
color: 'hsla(200, 50%, 70%, 0.25)',
|
|
minLength: 1
|
|
}
|
|
],
|
|
dragSelection: {
|
|
slop: 5
|
|
}
|
|
}),
|
|
// marque pages avec texte
|
|
WaveSurfer.markers.create({
|
|
markers: [
|
|
{
|
|
time: 0,
|
|
label: "intro",
|
|
color: '#ff990a'
|
|
},
|
|
{
|
|
time: 10,
|
|
label: "chronique 1",
|
|
color: '#ff990a'
|
|
},
|
|
{
|
|
time: 50,
|
|
label: "une pause musicale",
|
|
color: '#00ffcc',
|
|
position: 'top'
|
|
},
|
|
{
|
|
time: 70,
|
|
label: "le sujet principal",
|
|
color: '#00ffcc',
|
|
position: 'top'
|
|
},
|
|
{
|
|
time: 200,
|
|
label: "la fin",
|
|
color: '#00ffcc',
|
|
position: 'top'
|
|
},
|
|
]
|
|
})
|
|
]
|
|
};
|
|
|
|
console.log('url', url);
|
|
silverSurfer = WaveSurfer.create(waveoptions)
|
|
silverSurfer.load(url)
|
|
console.log('silverSurfer', silverSurfer);
|
|
|
|
});
|
|
|