React+Vite实时电台播放器问题：暂停后无法回到直播流

问题原因 #

直接调用audio.pause()只会暂停当前已缓存的流内容，浏览器不会自动断开与直播源的连接，再次调用play()时会继续播放缓存内容，而非拉取最新的实时流。

解决方案 #

通过重置音频源并重新加载的方式，确保每次启动播放时都请求最新的直播流，同时用React的useRef替代DOM查询，符合组件化开发规范。

修改后的代码 #

import { useState, useRef } from "react";

import {
  FaPlay,
  FaStop,
  FaVolumeUp,
  FaVolumeDown,
  FaVolumeOff,
  FaVolumeMute,
} from "react-icons/fa";

export function Player() {
  const [radioRunning, setRadioRunning] = useState(false);
  const radioRef = useRef<HTMLAudioElement>(null);
  const streamSrc = "<my-radio-stream-link>";

  const playRadio = async () => {
    const radio = radioRef.current;
    if (!radio) return;

    if (radioRunning) {
      radio.pause();
      // 重置音频源并重新加载，强制断开旧连接
      radio.src = streamSrc;
      await radio.load();
    } else {
      await radio.play();
    }
    setRadioRunning(!radioRunning);
  };

  return (
    <>
      <audio loop={false} ref={radioRef}>
        <source
          src={streamSrc}
          type='audio/mp4; codecs="mp4a.40.5"'
        />
        <source
          src={streamSrc}
          type="audio/aacp"
        />
        <span>你的浏览器不支持音频播放。</span>
      </audio>
      <div className="w-full flex justify-center gap-8 fixed bottom-0 py-2 bg-zinc-800">
        <button className="p-2">
          <FaVolumeUp className="w-5 h-5 mx-auto" />
        </button>
        <button className="p-4 -translate-y-11 rounded-full" onClick={playRadio}>
          {radioRunning ? (
            <FaStop className="w-10 h-10" />
          ) : (
            <FaPlay className="w-10 h-10" />
          )}
        </button>
        <button className="p-2">
          <FaVolumeUp className="w-5 h-5 mx-auto" />
        </button>
      </div>
    </>
  );
}

关键修改说明 #

• 使用useRef获取音频元素：避免直接通过getElementById操作DOM，符合React的状态管理逻辑
• 停止时重置并加载音频源：调用radio.load()会强制浏览器重新请求直播流资源，确保下次播放时获取最新的实时内容
• 异步处理播放操作：用async/await处理play()和load()的异步行为，避免状态切换的竞态问题
• 提取流地址为变量：统一维护直播流链接，便于后续修改

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