75 lines
2.0 KiB
JavaScript
75 lines
2.0 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'
|
|
|
|
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);
|
|
|
|
});
|
|
|