时间戳

首页 > 解决方案 > 反应音频无法设置未定义的属性“音量”

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

问题描述

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

播放道具只是一个布尔值。

当我 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;

我在做什么错？

标签： javascriptreactjshtml5-audio

解决方案

这部分代码：

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

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

将那段代码移到一个useEffect，或者更好的是，用一个回调函数替换你的（它仍然可以将音频元素存储在另一个 ref 或状态变量中），如此处audioRef所示。

推荐阅读