如何在按下按钮时播放音频？

Question

我正在尝试制作一个网站，当使用 HTML/CSS 按下按钮时播放音频，但我不确定如何让按钮在按下时播放音乐文件。有人知道怎么做这个吗？我也可以使用一些 Javascript，但如果需要的话，我不是最擅长的。

我也知道存在，但它不是重复的，因为那是在询问如何在 python 和 tkinter 中执行此操作，但我在询问如何使用 HTML/CSS/JS.

Answer 1

是的，JavaScript 是非常必要的。您可以为此使用 audio 元素，例如 like so (codepen.io):

<button class="start-audio-btn">Click me!</button>
<!--  just some random mp3 I found -->
<audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" class="sound"></audio>

然后在JavaScript中添加功能：

// Get the button element
const button = document.querySelector('.start-audio-btn');
// Get the audio element
const sound = document.querySelector('.sound');
// Start the audio element's playback using the `play` method when the button's clicked
button.addEventListener('click', (_) => { sound.play(); });

Answer 2

这将最有效。到您的用例。

const btn = document.getElementById("btn");

btn.onclick = () => {
  // Here you will add path to local file you have
  const audio = new Audio(
    "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
  );

  audio.play();
};

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <button id="btn">Play Sound</button>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

Answer 3

这将解决您需要处理音频的任何问题 => 播放、暂停、停止、静音和取消静音:)

playBtn.onclick = () => audio.play()
stopBtn.onclick = () => {audio.pause(); audio.currentTime = 0;}
pauseBtn.onclick = () => audio.pause()
muteBtn.onclick = () => audio.muted = !audio.muted

<audio controls id='audio'>
  <source src="yourAudioSource" type="audio/yourAudioExtension">
  <!-- This text will be shown if a browser doesn't support the extension of your audio -->
  Your browser does not support the audio element.
</audio>

<button id="playBtn">Play</button>
<button id="stopBtn">Stop</button>
<button id="pauseBtn">Pause</button>
<button id="muteBtn">Toggle Mute</button>

如何在按下按钮时播放音频？

How to play audio when a button is pressed?

html

javascript

css

interactive