使用ReactAudioPlayer实现多音频手动触发顺序播放咨询

算力阿峰

2026-10-4

实现方案

这个需求完全可以实现，不过原生react-audio-player组件本身不支持直接给src传数组的用法，你可以基于它的事件回调做一层简单的封装即可达到预期效果。

实现逻辑

维护两个本地状态：当前播放的音频轨道索引、是否触发过首次用户播放交互
利用组件的onEnded回调监听音频播放完成事件，播放完成后自动切换到下一条音频地址
首次播放依赖用户手动点击触发，后续轨道切换因为已经有过用户交互授权，自动播放不会被浏览器限制

完整示例代码

import { useState } from 'react';
import ReactAudioPlayer from 'react-audio-player';

// 封装后的多轨道音频播放器组件
const MultiTrackAudioPlayer = ({ srcList, controls = true }) => {
  const [currentTrackIdx, setCurrentTrackIdx] = useState(0);

  // 音频播放完成回调
  const handleTrackEnd = () => {
    // 还有下一条轨道时自动切换
    if (currentTrackIdx < srcList.length - 1) {
      setCurrentTrackIdx(prev => prev + 1);
    }
  };

  return (
    <ReactAudioPlayer
      src={srcList[currentTrackIdx]}
      controls={controls}
      onEnded={handleTrackEnd}
    />
  );
};

// 业务侧使用方式
const App = () => {
  const audioList = [
    "https://www.examplelink1.com/example1.mp3",
    "https://www.examplelink2.com/example2.mp3"
  ];

  return <MultiTrackAudioPlayer srcList={audioList} />;
};