更改音频源属性后，先前设置的流继续播放。

Question

使用Chromium版本的Edge: 93.0.961.38

我正在建立一个音乐播放器应用程序的反应。当用户按下按钮选择要收听的显示时，它将自动播放MP3 URL，方法是使用autoPlay属性集呈现<audio>控件，并使用指定的<source>元素呈现子<source>元素。

当从零开始播放到第一个选定的节目时，这一切都很好。但是我希望它能够工作，如果用户主动地改变他所听的显示，它将自动播放新选择的显示。

我可以从控制台日志中看到，当按下另一个显示按钮时，<MediaPlayer>元素肯定会使用新选择的URL重新呈现。我甚至让它在组件本身中呈现URL。在F12工具(DOM检查器)中，我可以看到<source>元素上的src属性肯定是更新的。但之前的节目一直在播放。

几乎足够好的解决办法是引入一个停止按钮，在没有任何<audio>控件的情况下重新呈现。然后按下另一个节目的按钮肯定会播放。

在下面的示例代码中，单击"Ambient“开始第一个显示。开始播放后，单击“重金属”按钮。“环境”的音乐一直在播放。点击“停止”，然后再按下“重金属”-你会听到另一个节目。

有解决办法吗？或者我应该放弃使用内置的Audio控件，而使用带有状态的new Audio？

import './App.css';
import {useState, createContext, useContext, useEffect, useMemo} from 'react';

const AMBIENT = "https://www.selbie.com/samples/atmospherics.mp3";
const METAL   = "https://www.selbie.com/samples/wrekage.mp3";

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><audio controls autoPlay><source src={props.src} /></audio><br/>{props.src}</div>)
                    : (<div>Nothing yet to play</div>)
         );
};

function App() {

  const [show, setShow] = useState(null);

  return (
    <div>
      <MediaPlayer src={show}/>
      <p></p>
      <button onClick={()=>setShow(AMBIENT)}>{"\u25B6\uFE0F Ambient"}</button><br/>
      <button onClick={()=>setShow(METAL)}>{"\u25B6\uFE0F Heavy Metal"}</button><br/>
      <button onClick={()=>setShow(null)}>{"\u23F9\uFE0F Stop"}</button><br/>
    </div>
  );

}

export default App;

Answer 1

根据DBS的注释，需要在更改源后对音频元素调用.load()。这很容易通过useEffect实现，并在useRef的帮助下获得对<audio>元素的访问。

更新后的MediaPlayer组件如下：

const MediaPlayer = (props) => {

  const audioRef = useRef();  // ADDED THIS

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

  // ADDED useEffect
  useEffect(()=> {
    console.log("useEffect invoked");
    if (props.src) {
      let audio = audioRef.current;
      if (audio) {
        audio.load();
      }
    }
  }, [props.src]);

  // ADDED ref={audioRef} as attribute
  return (props.src ? (<div><audio ref={audioRef} controls autoPlay><source src={props.src} /></audio><br/>{props.src}</div>)
                    : (<div>Nothing yet to play</div>)
         );
};