46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
import React, { useRef, useEffect } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
const AudioTrack = React.memo(
|
|
({ track }) => {
|
|
const audioRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (!audioRef.current) return false;
|
|
let playTimeout;
|
|
|
|
const handleCanPlay = () => {
|
|
playTimeout = setTimeout(() => {
|
|
console.log('Unable to autoplay audio element');
|
|
}, 1500);
|
|
};
|
|
const handlePlay = () => {
|
|
clearTimeout(playTimeout);
|
|
};
|
|
audioRef.current.addEventListener('canplay', handleCanPlay);
|
|
audioRef.current.addEventListener('play', handlePlay);
|
|
audioRef.current.srcObject = new MediaStream([track]);
|
|
|
|
const audioEl = audioRef.current;
|
|
|
|
return () => {
|
|
audioEl?.removeEventListener('canplay', handleCanPlay);
|
|
audioEl?.removeEventListener('play', handlePlay);
|
|
};
|
|
}, [track]);
|
|
|
|
return track ? (
|
|
<audio autoPlay playsInline ref={audioRef}>
|
|
<track kind="captions" />
|
|
</audio>
|
|
) : null;
|
|
},
|
|
() => true
|
|
);
|
|
|
|
AudioTrack.propTypes = {
|
|
track: PropTypes.object,
|
|
};
|
|
|
|
export default AudioTrack;
|