Question

当在JavaScript中单击ID为“ click_sound”的<a>元素或<button>元素时，如何隐藏背景声音（“ MySound.mp3”）？

记住，如果单击<a>或<button>，我想在后台发出声音！

代码：

<html>
  <head></head>
  <body>
    <a id="click_sound">Click me</a>
  <button id="click_sound">Click me</button>
  </body>
</html>

声音文件名：
MySound.mp3

Answer 1

要做的最简单的方法是单击button或a（或实际上任何标签）时，使用javascript播放音频。有几种方法可以做到这一点：

您可以在onmouseup元素中运行javascript：

<html>
  <head></head>
  <body>
    <a id="click_sound" onmouseup="new Audio('path_to_audio_file.mp3').play()">Click me</a>
    <button id="click_sound" onmouseup="new Audio('path_to_audio_file.mp3').play()">Click me</button>
  </body>
</html>

或更妙的是，不要每次都运行音频构造函数：

<html>
  <head></head>
  <body>
    <a id="click_sound" onmouseup="audio.play()">Click me</a>
    <button id="click_sound" onmouseup="audio.play()">Click me</button>

      <script>const audio = new Audio('path_to_audio_file.mp3')</script>
  </body>
</html>

如果您想使用外部脚本（要么是因为您拥有其他JavaScript，要么就是因为我个人更喜欢这种方式），只需将其放在window对象上即可：

<html>
  <head></head>
  <body>
    <a id="click_sound" onmouseup="window.audio.play()">Click me</a>
    <button id="click_sound" onmouseup="window.audio.play()">Click me</button>

      <script src='./path_to_file/somefile.js'></script>
  </body>
</html>

somefile.js：

  window.audio = new Audio('./path_to_audio/sound.mp3')

如果您需要有关上述任何内容的更多信息，请告诉我。

注意： 您还可以使用：

document.getElementById('click_sound').addEventListener('mouseup', () =>  new Audio('path_to_audio_file.mp3').play())

要实现同一目标。

有关更多信息，请参见this和this或查找“ javascript'Audio'构造函数”和“ onmouseup事件”。

在JS中单击<a>或<button>时如何发出声音

1 个答案: