如何将我的嵌入式音频和JavaScript正确转换为HTML5音频

How to properly convert my embedded audio and javascript to HTML5 audio?

本文关键字：音频 转换 HTML5 JavaScript 我的 嵌入式      更新时间：2023-09-26

目前，我正在使用带有嵌入式标签和javascript的旧技术在我的网站上使用声音。我想将它们转换为HTML5，但我没有成功。

这是我目前拥有的代码：

.HTML：

<div class="au">
    <embed src="audio/tileSelect.wav" autostart="false" width="1" height="1" hidden="true" id="sound1" enablejavascript="true">
    <embed src="audio/tileRemove.wav" autostart="false" width="1" height="1" hidden="true" id="sound2" enablejavascript="true">
</div>

.JS：

//Sounds
function playSound(soundobj) {
    if (document.getElementById('sound').checked) { //if this checkbox is checked, play sounds
        var thissound=document.getElementById(soundobj);
        thissound.Play();
    }
}

JS在其他函数中用于触发声音：

playSound('sound1');
playSound('sound2');

所以以上所有工作。现在将其转换为HTML5。HTML部分很容易，我认为它应该看起来像这样：

HTML5：

<!--HTML5 audio-->
<audio id="sound1" preload="auto">
    <source src="audio/tileSelect.wav" type="audio/wav" />
</audio>
<audio id="sound2" preload="auto">
    <source src="audio/tileRemove.wav" type="audio/wav" />
</audio>

但是对于JS部分，我有点卡住了。有人对此有想法吗？试图将soundobj更改为soundid，但没有运气。

非常感谢，莫里斯

您发布的代码有两个问题。

第一个是标记，可能应该像这样阅读：

<audio id="sound1" src="audio/tileSelect.wav" preload="auto"></audio>
<audio id="sound2" src="audio/tileRemove.wav" preload="auto"></audio>

您使用的类似<video>的源符号在任何地方都没有记录（尽管我不得不承认它没有感觉不对 - 但话又说回来，我从未使用过 HTML5 音频），请参阅 MDN 文档

编辑：显然可以在audio元素中使用source元素：

允许的内容：包含 src 的透明内容 属性或一个或多个元素，后跟任一流 内容或措辞内容，没有或元素。

请参阅：https://developer.mozilla.org/en/HTML/Element/audio

在您的情况下，您仍然不需要它，因为您只有一个源文件。

第二个问题是你正在使用一种不存在的.Play()方法（大写的P），应该称为.play()。所以你的JS应该看起来像：

function playSound(soundobj) {
    if (document.getElementById('sound').checked){
        document.getElementById(soundobj).play();
    }
}
playSound('sound2'); //should play 'audio/tileRemove.wav'
相关文章：