Javascript 反应JS音频不播放

我有一个名为“app.js”的react文件，其代码如下：

import React from 'react';


const App = () => {
   
   const play = (url) => {
       new Audio(url).play();
   }

   return <>
       <input type="button" value="play" onClick={()=> play("./au.mp3")} />
       <audio src="./au.mp3" id="audio"></audio>
   </>;
}

export default App;

---

你有没有想过为什么这可能不起作用？

那么，你的例子对我来说确实有效，所以你的音频文件可能有问题？看，除了音频url之外，我没有对您的代码做任何更改（我使用的是Mozilla的MDN条目中的一个公开文件）

如果希望在React组件中控制音频，则需要使用名为“”的内容（供参考）

REF提供了一种访问DOM节点或对在render方法中创建的元素进行反应的方法

您当前正在做的是在

play

方法中创建一个新的、不同的音频对象

因此，您可以通过使用React中的

ref

属性和

useRef

实用程序获取DOM元素的句柄，并按如下方式控制音频：

const App = () => {
  const audioRef = useRef(null);
  const play = (url) => {
    audioRef.current.play();
  };

  return (
    <>
      <input type="button" value="play" onClick={() => play()} />
      <audio
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
        ref={audioRef}
      ></audio>
    </>
  );
};

const-App=（）=>{
const audioRef=useRef（空）；
常量播放=（url）=>{
audioRef.current.play（）；
};
返回(
播放（）}/>

const App = () => {
  const audioRef = useRef(null);
  const play = (url) => {
    audioRef.current.play();
  };

  return (
    <>
      <input type="button" value="play" onClick={() => play()} />
      <audio
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
        ref={audioRef}
      ></audio>
    </>
  );
};