Javascript 无法播放音频

在我的react代码的return语句中，我有：

 <audio id="myAudio">
        <source src="49.mp3" type="audio/mpeg"></source>
      </audio>

当我按下我的键，我知道这个函数被调用，但没有音频播放。我没有收到任何错误消息，但我没有听到任何消息。我还尝试以其他方式播放音频（所有这些代码都在按键侦听器上）：

---

遗憾的是，这些方法都不起作用。我没有听到任何声音。请告诉我问题是什么，以及我如何解决它。

我认为这是一个很好的例子，说明您可以使用react Dom Ref！这里有一个快速的概念证明，我把它放在一起，只要按下一个键，它就会播放音频。我会把每一部分都讲一遍

从“/logo.svg”导入徽标；
导入“/App.css”；
从“React”导入React，{useffect}
从“/shared/sound.Mp3”导入Mp3
函数App（）{
const audioRef=React.createRef（）；
常量handleKeydown=（事件）=>{
如果（事件重复）{
返回；
}
audioRef.current.play（）；
}
useffect（（）=>{
document.addEventListener（“keydown”，（事件）=>handleKeydown（事件））；
//清理
return（）=>{
文件。删除VentListener（“键控”）；
}
})
返回(
);
}
导出默认应用程序；

让我们看一下解决方案

首先，我们将资产文件（在本例中为mp3）导入到文件顶部，就像它是一个组件一样。这为我们提供了一个变量，我们可以稍后从中访问该文件

import Mp3 from "./shared/sound.mp3"

接下来，我们创建一个Ref，稍后将使用它访问音频Dom节点

  const audioRef = React.createRef();

如果您不熟悉React REF，我建议您从官方文档中多读一些关于React REF的内容

接下来，我们像您一样定义keyDownHandler

consthandlekeydown=（事件）=>{
如果（事件重复）{
返回；
}
audioRef.current.play（）；
}

在effectHook中，我们设置了eventListener，并将其作为清理的一部分删除，这样当组件从页面中删除时，eventListener就不会挂起

useffect（（）=>{
document.addEventListener（“keydown”，（事件）=>handleKeydown（事件））；
//清理
return（）=>{
文件。删除VentListener（“键控”）；
}
})

回调函数的外部部分将表现为

componentDidMount（）

，返回的函数将表现为

componentdidmunount（）

，如果您喜欢类组件，可以随意使用它们

最后，我们添加audio标签，将src指向我们在文件顶部导入的mp3文件，并将其ref设置为我们先前创建的audioRef

您应该能够以您认为合适的任何方式修改此解决方案。如果您还有其他问题，请告诉我，如果这个答案澄清了问题，请务必关闭您的问题

编辑：要在每次按下按钮时重新启动声音，可以将按键关闭处理程序更新为以下内容：

consthandlekeydown=（事件）=>{
audioRef.current.pause（）；
audioRef.current.currentTime=0；
audioRef.current.play（）；
}

谢谢！这真是太棒了！但是，如果我快速按两次键，我希望它能播放相同的音频两次。它不应该在必须再次播放之前等待。你将如何实现这一点@仍然可以简单地将keydown处理程序更改为以下

consthandlekeydown=（event）=>{audioRef.current.pause（）；audioRef.current.currentTime=0；audioRef.current.play（）；}

我将其添加到原始帖子的底部，以使其更清晰，我该如何做才能使前面的帖子不暂停，我可以同时播放两个吗？这很可能需要Howler.js或其他音频库。我不熟悉howler，这个问题有点超出范围。我建议结束这个问题，然后打开一个新问题，详细说明如何同时播放多个音频文件。

import Mp3 from "./shared/sound.mp3"

  const audioRef = React.createRef();