React使用原生audio标签更新source属性后仍播放旧音频流问题咨询

问题根因 #

HTML原生<audio>元素仅会在首次渲染时读取子<source>标签的src属性加载资源，不会主动监听source的属性变更。因此当你切换src时，原有<audio>实例不会停止播放，也不会加载新的音频资源，就出现了旧音频持续播放的问题。

方案1：最小改动修复现有逻辑 #

你不需要重构现有代码，只需要给<audio>元素绑定和src关联的key属性即可：

const MediaPlayer = (props) => {
  if (props.src) {
    console.log("Url selected for playback: ", props.src);
  } else {
    console.log("Nothing ready to play");
  }

  return (props.src ? (
    <div>
      {/* 新增key属性，值为当前播放地址 */}
      <audio controls autoPlay key={props.src}>
        <source src={props.src} />
      </audio>
      <br/>{props.src}
    </div>
  ) : (
    <div>Nothing yet to play</div>
  ));
};

原理是React渲染时如果元素的key发生变化，会直接销毁旧元素、渲染全新的元素。切换播放地址时key随之变更，旧的<audio>实例会被销毁自动停止播放，新的<audio>带autoPlay属性会自动加载新地址播放，完全满足切换节目的需求。

方案2：使用new Audio实例实现（更推荐复杂场景） #

如果你的播放器后续需要做自定义控制UI、全局播放状态管理、进度/倍速控制等功能，可以改用JS音频实例的方案，不需要依赖渲染原生<audio>DOM节点：

import { useState, useEffect } from 'react';

const MediaPlayer = (props) => {
  const [audio, setAudio] = useState(null);

  useEffect(() => {
    // 切换地址或者清空时，销毁旧的音频实例
    if (audio) {
      audio.pause();
      audio.src = '';
    }
    if (!props.src) {
      setAudio(null);
      return;
    }
    // 初始化新的音频实例并播放
    const newAudio = new Audio(props.src);
    // 自动播放需要捕获异常，避免浏览器自动播放策略拦截报错
    newAudio.play().catch(err => console.warn('播放被拦截', err));
    setAudio(newAudio);

    // 组件卸载时清理音频实例，避免内存泄漏
    return () => {
      newAudio.pause();
      newAudio.src = '';
    }
  }, [props.src]);

  return props.src ? (
    <div>当前播放：{props.src}</div>
  ) : <div>暂无播放内容</div>
};

该方案的灵活性更高，你可以直接通过audio实例调用pause()、play()、设置volume、currentTime等属性实现自定义播放控制逻辑，不需要操作DOM。

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