反应音频无法设置未定义的 属性 'volume'
React audio Cannot set property 'volume' of undefined
我正在尝试使用 Audio 元素播放 mp3,但每当播放器出现错误时:- 无法设置未定义的 属性 'volume'。
播放道具只是一个布尔值。
当我 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;
我做错了什么?
这部分代码:
if (Play) {
play();
} else {
play();
}
被立即调用,在 React 甚至有机会设置 audioRef.current
到 Audio 元素之前。 你的函数还没有完成渲染,React甚至不知道audioRef
用在哪里
将那段代码移到 useEffect
中,或者更好的是,将 audioRef
替换为回调函数(它仍然可以将音频元素存储在另一个 ref 或状态变量中),如显示 here.
我正在尝试使用 Audio 元素播放 mp3,但每当播放器出现错误时:- 无法设置未定义的 属性 'volume'。
播放道具只是一个布尔值。
当我 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;
我做错了什么?
这部分代码:
if (Play) {
play();
} else {
play();
}
被立即调用,在 React 甚至有机会设置 audioRef.current
到 Audio 元素之前。 你的函数还没有完成渲染,React甚至不知道audioRef
用在哪里
将那段代码移到 useEffect
中,或者更好的是,将 audioRef
替换为回调函数(它仍然可以将音频元素存储在另一个 ref 或状态变量中),如显示 here.