83 lines
2.0 KiB
JavaScript
83 lines
2.0 KiB
JavaScript
import React, { useRef, useEffect } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import WaveSurfer from 'wavesurfer.js';
|
|
|
|
const propTypes = {
|
|
position: PropTypes.number.isRequired,
|
|
duration: PropTypes.number.isRequired,
|
|
audio: PropTypes.string,
|
|
setPosition: PropTypes.func.isRequired,
|
|
};
|
|
|
|
const WaveformProgressBar = ({ audio, position, duration, setPosition }) => {
|
|
const waveFormDomRef = useRef(null);
|
|
const wavesurfer = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (waveFormDomRef.current && audio) {
|
|
wavesurfer.current = WaveSurfer.create({
|
|
container: waveFormDomRef.current,
|
|
mediaControls: false,
|
|
height: 40,
|
|
barWidth: 2,
|
|
barGap: 2,
|
|
barRadius: 3,
|
|
responsive: true,
|
|
cursorWidth: 0,
|
|
backgroundColor: 'transparent',
|
|
progressColor: '#f70f5d',
|
|
waveColor: '#fff',
|
|
xhr: {
|
|
mode: 'no-cors',
|
|
},
|
|
});
|
|
wavesurfer.current.load(audio);
|
|
wavesurfer.current.on('ready', () => {
|
|
console.log('wavesurfer loaded');
|
|
});
|
|
}
|
|
|
|
return () => {
|
|
if (wavesurfer.current) {
|
|
wavesurfer.current.destroy();
|
|
}
|
|
};
|
|
}, [audio, waveFormDomRef.current]);
|
|
|
|
useEffect(() => {
|
|
// Sync wavesurfer with current playing position
|
|
const progress = position / duration;
|
|
|
|
if (wavesurfer.current && !Number.isNaN(progress)) {
|
|
wavesurfer.current.seekTo(progress || 0);
|
|
}
|
|
}, [position]);
|
|
|
|
const handleClick = event => {
|
|
if (setPosition == null) {
|
|
return;
|
|
}
|
|
|
|
const offsetX =
|
|
event.pageX - event.currentTarget.getBoundingClientRect().left;
|
|
const posX = offsetX / event.currentTarget.offsetWidth;
|
|
|
|
setPosition(posX * duration);
|
|
};
|
|
|
|
if (!audio) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="ai-waveform-bar" onClick={handleClick}>
|
|
<div className="ai-waveform" ref={waveFormDomRef} />
|
|
<div className="ai-waveform-progress" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
WaveformProgressBar.propTypes = propTypes;
|
|
|
|
export default WaveformProgressBar;
|