如何添加它，以便在单击按钮时播放 html 中的音频文件

Posted 2023-02-25

【中文标题】如何添加它，以便在单击按钮时播放 html 中的音频文件

【英文标题】：How do I add it so when the button is clicked it plays the audio file in html

【发布时间】：2021-05-15 19:32:03

【问题描述】：

这是我用于点击音频的行，但我做错了什么？

<script>
var snd = new Audio('click.mp3');
</script>
<a href='index.html'><snd.play(); snd.currentTime=0; button class="button button1">Home</button><a>

【问题讨论】：

一般提示：语法高亮应该给你一个线索，代码将无法工作。出于这个原因，我尝试始终使用带有语法突出显示的代码编辑器。

【参考方案1】：

如果您只想播放一些音频，只需使用 HTML 5 音频标签：

<audio src="click.mp3" controls></audio>

另见w3schools

当您想要录制时，请参阅Mozilla Developer Network

【讨论】：

是的，这有效，但只有在点击时无效，我一直在使用 W3Schools，它非常有用

使用controls 属性设置，作为用户，您可以控制音频文件是否开始播放。 this 示例不适合您吗？

【参考方案2】：

我使用点击处理程序扩展了 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio 的代码。这应该可以。

<script>
var snd = new Audio('click.mp3');
snd.addEventListener("canplaythrough", event => 
  /* the audio is now playable; play it if permissions allow */
  document.querySelector('.button').addEventListener("click", e => 
    snd.play();
  );
);
</script>
<a href='index.html'></a><button class="button button1">Home</button>

编辑：只有当用户停留在您的网站上时，才能播放点击声音。当您打开链接（<a>）时，这将不合理。

【讨论】：

好的，所以我刚刚测试了它，它工作得很好，虽然它好像声音有刷新时间，但如何修改代码以使其在点击时播放乱七八糟，所以它播放即使被垃圾邮件，如果你理解

它也只适用于主页按钮而不是其他按钮，我今天才开始学习 html btw var snd = new Audio('click.mp3'); snd.addEventListener("canplaythrough", event => document.querySelector('.button').addEventListener("click", e => snd.play(); ); ); </script> <a href='index.html'></a><button class="button button1">Home</button> <a href='social.html'></a><button class="button button1">Socials</button> <a href='game.html'></a><button class="button button1">Game</button> <a href='python.html'></a><button class="button button1">Python</button>

你必须为每个按钮添加一个事件监听器：document.querySelectorAll('.button').forEach(btn => btn.addEventListener("click", e => snd.play();));

好吧，我很挣扎，`var snd = new Audio('click.mp3'); snd.addEventListener("canplaythrough", event => document.querySelectorAll('.button').forEach(btn => btn.addEventListener("click", e => snd.play(); )); );`这里有什么问题，replit.com/join/zyqghiku-16cookj，加入该链接以查看我的代码并进行编辑，因为这些东西对我来说是全新的！