Javascript 下一步一次播放一个音频
我正在为我的项目使用Javascript 下一步一次播放一个音频,javascript,reactjs,audio,next.js,Javascript,Reactjs,Audio,Next.js,我正在为我的项目使用react use audio player,一次只需要播放一个音频。我有多个音频在同一页。目前,所有的音频是暂停加载时,这是我需要的。但是,当播放一个音频时,我不停地单击下一个音频,第一个音频彼此重叠。我在下面添加了代码供您参考。如果有人能帮助我,我将不胜感激 这里是我的页面/index.js import React from 'react' import { AudioPlayerProvider } from 'react-use-audio-player' impo
react use audio player
,一次只需要播放一个音频。我有多个音频在同一页。目前,所有的音频是暂停加载时,这是我需要的。但是,当播放一个音频时,我不停地单击下一个音频,第一个音频彼此重叠。我在下面添加了代码供您参考。如果有人能帮助我,我将不胜感激
这里是我的页面/index.js
import React from 'react'
import { AudioPlayerProvider } from 'react-use-audio-player'
import AudioPlayer from '../../../components/AudioPlayer'
const Home = () => {
return (
<>
<ul>
<li>
<div className='color_c uk-flex uk-flex-middle uk-flex-center uk-text-center'>
<div>
<AudioPlayerProvider>
<AudioPlayer file='../../../projectFolder/audio/c_chai-yi-ning_90s.mp3' playButton='/projectFolder/img/icon_play_c.svg' pauseButton='/projectFolder/img/icon_pause_c.svg' />
</AudioPlayerProvider>
<div className='uk-text-small'>Chai Yi Ning, 19</div>
</div>
</div>
</li>
<li>
<div className='color_c uk-flex uk-flex-middle uk-flex-center uk-text-center'>
<div>
<AudioPlayerProvider>
<AudioPlayer file='../../../projectFolder/audio/c_chai-yi-ning_90s.mp3' playButton='/projectFolder/img/icon_play_c.svg' pauseButton='/projectFolder/img/icon_pause_c.svg' />
</AudioPlayerProvider>
<div className='uk-text-small'>Ying Ming, 54</div>
</div>
</div>
</li>
<li>
<div className='color_c uk-flex uk-flex-middle uk-flex-center uk-text-center'>
<div>
<AudioPlayerProvider>
<AudioPlayer file='../../../projectFolder/audio/c_chai-yi-ning_90s.mp3' playButton='/projectFolder/img/icon_play_c.svg' pauseButton='/projectFolder/img/icon_pause_c.svg' />
</AudioPlayerProvider>
<div className='uk-text-small'>Lee Chong Wie, 29</div>
</div>
</div>
</li>
</ul>
</>
)
}
export default Home
import React from 'react'
import { useAudioPlayer } from 'react-use-audio-player'
const AudioPlayer = ({ file, playButton, pauseButton }) => {
const { play, pause, ready, loading, playing } = useAudioPlayer({
src: file,
format: 'mp3',
autoplay: false
})
const togglePlay = () => {
if (playing) {
pause()
} else {
play()
}
}
if (!ready && !loading) return <div>No audio to play</div>
if (loading) return <div>Loading audio</div>
return (
<>
<img src={!playing ? playButton : pauseButton} onClick={togglePlay} className='uk-width-2-3' style={{ cursor: 'pointer' }} />
</>
)
}
export default AudioPlayer
添加生命周期方法将解决此问题,每次组件卸载时都会调用返回,因此如果您正在更改歌曲,则返回块将检查音频是否正在播放并暂停歌曲,然后播放下一首歌曲
import React,{useEffect} from 'react'
useEffect(()=>{
return (()=>{
if (playing) {
pause()} })
},[file])
这没用,你的解释太短了。您应该写下
播放
和暂停
功能。不是那样的。