So I have managed to make a wavesurfer 'wave' so to speak. I can get it to play. I even managed to add regions. But for some reason it just isn't doing anything when it enters or exits a region. In the code below I have it set to console logging the region start and end.
Also, as im populating a url off a click somewhere else, and using the context api to bring it in, unless i do playerAsset?.audioUrl || 'www.google.com
, the player throws an error saying the url isnt there. I would prefer not to have to add the || 'fake url' after the actual url variable.
import React, { useEffect, useRef, useState } from 'react';
import WaveSurfer from 'wavesurfer.js';
import RegionsPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.regions';
import VolumeUpIcon from '@mui/icons-material/VolumeUp';
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import PauseIcon from '@mui/icons-material/Pause';
import SkipNextIcon from '@mui/icons-material/SkipNext';
import Grid from '@mui/material/Grid';
import useAssetPlayer from 'hooks/asset-player.hooks';
WaveSurfer.regions = RegionsPlugin;
const formWaveSurferOptions = ref => ({
container: ref,
waveColor: 'white',
progressColor: 'grey',
cursorColor: 'white',
responsive: true,
height: 100,
normalize: true,
partialRender: true,
hideScrollbar:true,
plugins: [
WaveSurfer.regions.create({
regionsMinLength: 2,
regions: [
{
start: 1,
end: 3,
loop: false,
color: 'hsla(0, 100%, 50%, 0.3)'
}, {
start: 5,
end: 7,
loop: false,
color: 'hsla(0, 100%, 50%, 0.3)',
minLength: 1,
maxLength: 5,
}
]
})
]
});
const NewAudioPlayer = ({}) => {
const waveformRef = useRef(null);
const wavesurfer = useRef(null);
const [playing, setPlay] = useState(false);
const [showPlayer, setShowPlayer] = useState(false);
const [volume, setVolume] = useState(0.5);
const { playerAsset, isPlaying } = useAssetPlayer();
useEffect(() => {
setPlay(false);
setShowPlayer(true);
const options = formWaveSurferOptions(waveformRef.current);
wavesurfer.current = WaveSurfer.create(options);
wavesurfer.current.load(playerAsset?.audioUrl || 'www.google.com');
wavesurfer.current.on('ready', function() {
wavesurfer.current.play();
setPlay(true);
wavesurfer.current.on('region-click', function(region, e) {
console.log(region.start);
console.log(region.end);
e.stopPropagation();
region.wavesurfer.play(region.start, region.end);
});
if (wavesurfer.current) {
wavesurfer.current.setVolume(volume);
setVolume(volume);
}
});
return () => wavesurfer.current.destroy();
}, [playerAsset]);
const handlePlayPause = () => {
setPlay(!playing);
wavesurfer.current.playPause();
};
const onVolumeChange = e => {
const { target } = e;
const newVolume = +target.value;
if (newVolume) {
setVolume(newVolume);
wavesurfer.current.setVolume(newVolume || 1);
}
};
return (
<Grid container className={!showPlayer ? 'hideNewPlayer' : 'showNewPlayer'}>
<Grid item xs={1} style={{display: 'flex', justifyContent: 'end', alignItems:
'center'}}>
{!playing ? <PlayArrowIcon style=
{{color:'#ffffff',height:50,width:50,cursor:'pointer'}} onClick={handlePlayPause} />
: <PauseIcon style={{color:'#ffffff',height:50,width:50, cursor:'pointer'}}
onClick={handlePlayPause} />}
</Grid>
<Grid item xs={1} style={{display: 'flex', justifyContent: 'center', alignItems:
'center'}}>
<SkipNextIcon style={{color:'#DFE8F7',height:25,width:25}} />
</Grid>
<Grid item xs={9} id="waveform" ref={waveformRef}></Grid>
<Grid item xs={1} style={{display: 'flex', justifyContent: 'center', alignItems:
'center'}}>
<VolumeUpIcon style={{color:'#DFE8F7',height:30,width:30}} />
</Grid>
</Grid>
);
};
export default NewAudioPlayer;