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

Question

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

Play 属性只是一个布尔值。

当我 console.log 时，useRef() 当前属性会显示 mp3 文件。

我删除了音量属性，但随后它显示 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（它仍然可以将音频元素存储在另一个引用或状态变量中），如here所示。