如何解决WordPress 页面上多个按钮的音效
我一直在网上搜索，试图找到一种通过单击按钮播放短 wav 文件的方法。我想在我的主页上总共放置 10 个按钮，每个按钮都会播放不同的短音。
我正在 WordPress 中构建我的网站。看起来这应该很容易，但我不知道 HTML 或 JavaScript。我怀疑如果我具备这些技能，并且知道如何将代码插入到我的 WordPress 主题中，我就可以做到这一点。我尝试在页面上插入 10 个音频播放器，每个播放器都播放自己的声音，但这是一种笨重且笨拙的处理方式。
我在本网站的另一篇文章中找到了这段代码，但我不知道把它放在哪里，也不知道如何将其扩展为多个按钮，每个按钮播放不同的 wav 文件。
var button = document.querySelector('button'),audio = null;
button.addEventListener('click',handler,false);
function handler() {
audio = new Audio('https://www.gnu.org/music/FreeSWSong.ogg');
audio.play();
}
<button>Play</button>
非常感谢您的帮助。
解决方法
代码说明
我将简要说明您发布的代码的作用，并指出一些值得注意的地方。
var button = document.querySelector('button')
document.querySelector('button') 选择整个文档中的 first 按钮并将其分配给 button 变量。
button.addEventListener('click',handler,false); 向 button 添加侦听器以执行 handler。在这里，我们遇到了一个不明显的 JavaScript 特性。我们引用了 handler，即使我们还没有声明它。但不要害怕。
function handler() {
audio = new Audio('https://www.gnu.org/music/FreeSWSong.ogg');
audio.play();
}
请注意，handler() 是使用 function 声明的。这意味着它将被称为提升到作用域的顶部。这可以粗略地描述为脚本的行为就像以下内容写在脚本的顶部而不是现在的位置一样。
<button>Play</button>
您发布的是JavaScript。这是HTML。如果你像这样把它们放在一起是行不通的。 JavaScript 引擎会遇到此问题并说“我不知道这是什么”，然后抛出错误并拒绝执行任何其他操作。
要将 JavaScript 和 HTML 放在同一位置，您可以将 JavaScript 放在 HTML 的 <script> 标记中。
为不同按钮播放不同声音的网页
重新设计的示例如下所示：
<html>
<audio id="beep" src="http://www.soundjay.com/button/beep-07.wav" autoplay="false" ></audio>
<audio id="song" src="https://www.gnu.org/music/FreeSWSong.ogg" autoplay="false" ></audio>
<button class="sound" id="beep">beep</button>
<button class="sound" id="song">song</button>
<script>
// reference the audio elements
var buttonSong = document.querySelector("audio#song")
var buttonBeep = document.querySelector("audio#beep")
// tell the buttons what to do when clicked
document.querySelector("button.sound#beep")
.addEventListener("click",() => buttonSong.play());
document.querySelector("button.sound#song")
.addEventListener("click",() => buttonBeep.play());
</script>
</html>
这是一个工作网页，您可以将其复制到文本编辑器中，使用 .html 扩展名保存并在浏览器中打开。
首先要注意的是，我已将音频放在 <audio> 标签中。这些是 HTML 标签，因此浏览器将在加载网页时开始加载它们，而不是在您的问题中单击按钮时。这会对性能产生巨大影响。不是在用户每次点击按钮时下载歌曲，而是在他们加载页面时下载一次。
在 JavaScript 中，我们为每个按钮编写代码，当点击时播放声音。
这是在网站上单击按钮时如何播放声音的要点。如何在 WordPress 中实现它是一个不同的问题。您可能会将其放入主题的 footer.php 模板中。
一些建议
您提出的要求并不是最容易实现的。尤其不是在 WordPress 网站上，它有自己的错综复杂。如果您不熟悉 Web 开发，不妨先尝试更简单的问题。
我知道您没有征求意见，而是在按下按钮时对播放声音的用户体验三思而后行。不确定他们会喜欢它。我建议不要播放整首歌曲，尤其是免费软件歌曲。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
