React中用react-audio-player实现音频重复两次后自动切换

你的推测是对的：当音频URL没有变化时，react-audio-player不会因为state更新重新触发autoPlay——组件认为资源没有变化，不会主动初始化第二次播放。要解决这个问题，我们可以直接操作原生audio元素的播放方法，而不是依赖src变化触发自动播放。

修改后的代码 #

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

const userItems = [
  { "MP3": "https://www2.cs.uic.edu/~i101/SoundFiles/CantinaBand3.wav" },
  { "MP3": "https://www2.cs.uic.edu/~i101/SoundFiles/CantinaBand3.wav" },
  { "MP3": "https://www2.cs.uic.edu/~i101/SoundFiles/Fanfare60.wav" }
];

function AudioPlayer() {
  const [repeatAudio, setRepeatAudio] = useState(true);
  const [currentAudioIndex, setCurrentAudioIndex] = useState(0);
  const audioPlayerRef = useRef(null); // 获取播放器实例的ref

  const audioSrc = userItems[currentAudioIndex].MP3;

  function setNextAudio() {
    if (repeatAudio) {
      // 重复当前音频：直接调用原生audio的play方法
      audioPlayerRef.current.audio.play();
      setRepeatAudio(false);
    } else {
      // 切换下一个音频：更新索引，同时处理越界（可选）
      setCurrentAudioIndex(prev => (prev + 1) % userItems.length);
      setRepeatAudio(true);
    }
  }

  return (
    <div>
      <ReactAudioPlayer
        ref={audioPlayerRef} // 绑定ref
        src={audioSrc}
        autoPlay
        controls
        onEnded={() => setNextAudio()}
      />
    </div>
  );
}

export default AudioPlayer;

关键改动说明 #

• 用useRef获取react-audio-player的实例，通过audioPlayerRef.current.audio可以访问到原生的<audio>DOM元素
• 重复播放时，不需要修改音频索引，直接调用原生play()方法启动第二次播放
• 切换下一个音频时，增加了索引越界处理（用取模运算回到第一个音频），避免播放到最后一个时出错

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