Могу ли я использовать аудиоэлемент HTML5 для воспроизведения звукового файла в функциональном компоненте с помощью React Hooks? - PullRequest
Новая
       12

Могу ли я использовать аудиоэлемент HTML5 для воспроизведения звукового файла в функциональном компоненте с помощью React Hooks?

3 голосов
/ 01 октября 2019

Я построил таймер, используя функциональные компоненты и React Hooks. Когда таймер достигает 00:00, воспроизводится аудиоклип. Мой текущий код работает с использованием нового Audio (). Вот пример: 

const Timer = () => {
   const [myAudio] = useState(new Audio(soundfile));

   const handleBeep = () => {
      myAudio.play();
   }

Это работает, но не проходит тест FCC, потому что я должен использовать тег HTML5. Я попытался использовать ловушку useRef (), чтобы выбрать аудиофайл. Однако myAudio не был распознан как объект Audio: 

   const myAudio = useRef();

   const handleBeep = () => {
      myAudio.play();
   }

return (
   <div>
   <audio id='beep' ref={myAudio} src={soundfile} type='audio'/>
   </div>

Ранее я использовал ref для тегов в компонентах класса, и мне интересно, есть ли способ сделать это с помощью React Hooks в функциональных компонентах,Я бы не хотел полностью реструктурировать свой код, чтобы пройти тест, поэтому любой ввод будет полезен.

1 Ответ

2 голосов
/ 02 октября 2019

Как упоминалось в комментариях, React.useRef возвращает объект со следующим интерфейсом: 

interface ReactRef<T> {
  current: null | T
}

, где T - это тип значения, для которого вы ожидаете получить ссылку. Это упоминается в документах здесь .

Так что причина myAudio.play() не работает в том, что вам нужно получить доступ к ссылке с помощью myAudio.current.play().

Этотакже желательно убедиться, что вы обрабатываете дело null, делая что-то вроде 

if (myAudio.current !== null) {
  myAudio.current.play()
}
...