useEffect создает исключение DOMException при использовании HTMLAudioElement - PullRequest
Новая
       8

useEffect создает исключение DOMException при использовании HTMLAudioElement

1 голос
/ 09 апреля 2019

Я написал пользовательский обработчик React useAudio для воспроизведения звуков на заднем плане моего приложения.

Почему useEffect бросает Uncaught (in promise) DOMException?

Я сузил проблему до второй useEffect внутри моего пользовательского хука. Этот эффект запускается, когда изменяется логическое значение, указывающее, является ли звук playing.

Все, что говорит Реакт, это Uncaught Error: The error you provided does not contain a stack trace.

Я также пытался изменить audio на обычную константу вместо объявления через хук useState, но это не помогло. 

import React, { useState, useEffect } from 'react'
import styled from 'styled-components'

const useAudio = (url: string) => {
  if (typeof Audio !== 'undefined') {
    const [audio] = useState(new Audio(url))
    const [playing, setPlaying] = useState(false)

    const toggle = () => setPlaying(!playing)

    useEffect(() => {
      audio.loop = true
      audio.autoplay = true
    })

    useEffect(() => {
      playing ? audio.play() : audio.pause()
      return () => {
        audio.pause()
      }
    }, [playing])

    return [playing, toggle]
  }
}

const AudioPlayer: React.FC<{ url: string }> = ({ url }) => {
  if (typeof Audio !== 'undefined') {
    const [playing, toggle] = useAudio(url)

    return (
      <AudioContainer>
        {typeof playing !== 'undefined' && (
          <Button onClick={() => toggle()}>
            {playing ? 'Stop music' : 'Play music'}
          </Button>
        )}
      </AudioContainer>
    )
  }
  return null
}

export default AudioPlayer

Работает в приложении live .

это не , работающее в этой изолированной Codesandbox .

Я ожидаю, что звук запустится, когда компонент смонтирован, и не будет выдано никаких исключений DOME.

1 Ответ

1 голос
/ 09 апреля 2019

У вас есть несколько смутных замечаний по поводу вашего приложения, включая использование хуков в условном выражении и сохранение audio объекта в состоянии (вместо этого попробуйте useRef, это его единственная цель).Но суть проблемы в том, что url, который вы кормите на Audio, это undefined.Я предполагаю, что в среде CodeSandbox нет подходящего загрузчика для mp3 файлов.Вместо этого попробуйте какой-нибудь прямой URL.

Песочница: https://codesandbox.io/s/l7775jm2rm

...