AudioPlayer在改变音轨后不播放

Question

我想在React Nextjs上创建一个audioplayer，有一些点，每个点对应一个音轨。当我点击一个点时，它会暂停当前正在播放的曲目，如果有的话，然后播放新的曲目。

我有一些演奏问题。当我到达页面并点击一个点时，我需要点击它3次才能播放曲目。如果我点击一个新的，我需要点击2次来播放新的。

代码如下:

AudioPlayer.js

import React, { useState, useRef, useEffect } from 'react';
const AudioPlayer = () => {
// state
const [isPlaying, setIsPLaying] = useState(false);
const [duration, setDuration] = useState(0);
const [currentTime, setCurrentTime] = useState(0);
const [currentTrack, setCurrentTrack] = useState(null)
// references
const audioPlayer = useRef(); //reference to our audioplayer
const progressBar = useRef(); //reference to our progressBar
const animationRef = useRef() //reference the animation
useEffect(() => {
const seconds = Math.floor(audioPlayer.current.duration)
setDuration(seconds);
progressBar.current.max = seconds;
}, [audioPlayer?.current?.loadmetadata, audioPlayer?.current?.readyState])
const togglePlayPause = () => {
const prevValue = isPlaying;
setIsPLaying(!prevValue);
if (!prevValue) {
audioPlayer.current.play();
animationRef.current = requestAnimationFrame(whilePlaying);
} else {
audioPlayer.current.pause();
cancelAnimationFrame(animationRef.current);
}
}
const whilePlaying = () => {
progressBar.current.value = audioPlayer.current.currentTime;
setCurrentTime(progressBar.current.value);
animationRef.current = requestAnimationFrame(whilePlaying);
}
const calculateTime = (secs) => {
const minutes = Math.floor(secs / 60);
const returnedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
const seconds = Math.floor(secs % 60);
const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
return `${returnedMinutes} : ${returnedSeconds}`
}
const changeRange = () => {
audioPlayer.current.currentTime = progressBar.current.value;
setCurrentTime(progressBar.current.value);
}
const changeTrack = (e) => {
if (isPlaying) {}
setCurrentTrack(e.target.value)
console.log(e.target.value)
togglePlayPause();
}
return (
<>
<input ref={audioPlayer} className='dots' value='/piste1.mp3' onClick={e => changeTrack(e)}></input>
<input ref={audioPlayer} className='dots left-8' value='/piste2.mp3' onClick={e => changeTrack(e)}></input>
<div>
<audio ref={audioPlayer} src={currentTrack} preload='metadata'></audio>
<button className="mx-5" onClick={togglePlayPause}>
{isPlaying ? "Pause" : "Play"}
</button>
{/* Current time */}
<div>{calculateTime(currentTime)}</div>
{/* progress bar */}
<div>
<input type='range' defaultValue="0" ref={progressBar} onChange={changeRange} />
</div>
{/* duration */}
<div>{(duration && !isNaN(duration)) && calculateTime(duration)}</div>
</div>
</>
)
}
export default AudioPlayer

Answer 1

为什么audioPlayer作为ref传递给3个不同的元素。这看起来会产生问题。只有你的audio元素应该有audioPlayer作为ref。

changeTrack中不需要togglePlayPause功能。这段代码看起来也引起了一些问题。无论如何，你的chanfeTrack代码应该是这样的:

const changeTrack = (evt) => {
setCurrentTrack(evt.target.value)
};

如果音频没有立即开始播放，请确保onCanPlay事件设置为使用evt.target.play()

播放音频