如何无需手动交互实现音频播放器自动播放下一曲

要解决切换歌曲后自动播放、以及歌曲播放完毕自动续播的问题，核心是直接控制<audio>元素的播放行为，同时监听播放结束事件。以下是具体实现方案：

关键修改点 #

• 给<audio>元素添加引用(ref)，用于调用原生播放/加载API
• 监听歌曲状态变化，切换完成后自动触发播放
• 绑定音频播放结束事件，自动切换下一曲

修改后的完整代码 #

import { useState, useRef, useEffect } from 'react';

exports.songsdata = [
    {
        "title": "song1",
        "url": "https://song1.mp3"
    },
    {
        "title": "song2",
        "url": "https://song2.mp3"
    },
    {
        "title": "song3",
        "url": "https://song3.mp3"
    }
]

const AudioPlayer = () => {
    const [currentSong, setCurrentSong] = useState(songsdata[0]);
    // 创建audio元素的引用
    const audioRef = useRef(null);

    const playNext = () => {
        const index = songsdata.findIndex(x => x.title === currentSong.title);
        const nextIndex = index === songsdata.length - 1 ? 0 : index + 1;
        setCurrentSong(songsdata[nextIndex]);
    }

    // 监听歌曲切换，自动加载并播放新歌曲
    useEffect(() => {
        if (audioRef.current) {
            audioRef.current.load();
            audioRef.current.play().catch(err => {
                console.log("自动播放失败：", err);
                // 首次播放需用户手动触发，后续自动播放不受限，可在此提示用户
            });
        }
    }, [currentSong]);

    return (
        <>
            <div className="AudioPlayer">
                {/* 绑定ref和播放结束事件 */}
                <audio 
                    ref={audioRef} 
                    src={currentSong.url} 
                    onEnded={playNext}
                />
            </div>
            <div className="controls">
                <Button className='btn_action' onClick={playNext}>下一曲</Button>
            </div>
        </>
    );
}

export default AudioPlayer;

细节说明 #

1. 音频引用(ref)：通过useRef获取<audio>实例，直接调用load()加载新音频、play()触发播放，这是控制原生音频行为的核心。
2. 切换歌曲自动播放：用useEffect监听currentSong的变化，每次歌曲更新后自动执行加载和播放操作。
3. 播放结束自动切歌：给<audio>绑定onEnded事件，当前歌曲播放完毕时自动触发playNext切换歌曲，再通过useEffect自动播放下一曲。
4. 浏览器兼容性：浏览器要求首次播放必须由用户手动触发（比如点击播放按钮），但用户第一次手动操作后，后续的切换、续播等自动播放行为都会被允许。如果自动播放失败，可在catch块中添加用户提示。

内容的提问来源于stack exchange，提问作者mukul