反应音频无法设置未定义的属性“音量”

Question

我正在尝试使用 Audio 元素播放 mp3，但每当播放器呈现错误时：- 无法设置未定义的属性“音量”。

Play prop 只是一个布尔值。

useRef() current 属性在我 console.log 时向我显示 mp3 文件。

我删除了 volume 属性，但随后它显示了与 audio.play() 相同的错误。

为什么音频未定义？

import React, { useState, useRef } from "react";
import "../../Static/player.css";
import Nowplaying from "./Nowplaying";
import SongInfo from "./SongInfo";
import Slider from "./Slider";
import Duration from "./Duration";
import song from "../../Static/assets/song.mp3";

const Player = (props) => {

  const { Play } = props;

  const [percentage, setPercentage] = useState(0)
  const [duration, setDuration] = useState(0)
  const [currentTime, setCurrentTime] = useState(0)

  const audioRef = useRef()


  const onChange = (e) => {
    const audio = audioRef.current
    audio.currentTime = (audio.duration / 100) * e.target.value
    setPercentage(e.target.value)
  }


  const play = () => {
    const audio = audioRef.current
    audio.volume = 0.1

    if (!Play) {
      audio.play()
    }

    if (Play) {
      audio.pause()
    }
  }

  const getCurrDuration = (e) => {
    const percent = ((e.currentTarget.currentTime / e.currentTarget.duration) * 100).toFixed(2)
    const time = e.currentTarget.currentTime

    setPercentage(+percent)
    setCurrentTime(time.toFixed(2))
  }

  if (Play) {
    play();
  } else {
    play();
  }

  return (
    <div className="player-screen">
      <div className="play-screen">
        <div className="navbar">
          <Nowplaying />
        </div>
        <div className="song-info">
          <SongInfo />
        </div>
        <div className="player-controls">
          <Slider percentage={percentage} onChange={onChange} />
          <Duration
            duration={duration}
            currentTime={currentTime}
          />
          <audio
            ref={audioRef}
            onTimeUpdate={getCurrDuration}
            onLoadedData={(e) => {
              setDuration(e.currentTarget.duration.toFixed(2));
            }}
            src={song}
          ></audio>
        </div>
      </div>
    </div>
  );
};

export default Player;

我做错了什么？

Answer 1

这部分代码：

  if (Play) {
    play();
  } else {
    play();
  }

在 React 甚至有机audioRef.current设置为 Audio 元素之前，它会立即被调用。 你的函数还没有完成渲染，React 甚至不知道在哪里使用了audioRef 。

动议一段代码成useEffect ，或更好的是，取代您audioRef用的回调函数（其仍可以存储在另一个ref或状态变量的音频组件），如图所示在这里。