javascript - 控制时间通过 Javascript 播放和停止

Question

我试图在 html 中制作几个音频元素，当我通过 javascript 告诉它们播放音乐时。

这是我的html：

<div id="pixelbutton" onClick="musicplay1()"> </div>

<audio id="song1" src="audio/ruins.wav" autostart=false hidden=true> </audio>

还有我的 Javascript：

function musicplay1() {
var song1 = document.getElementById("song1");
song1.setAttribute('autostart', 'true');
}

音频是有充分理由的，所以请不要说“天哪，真的！？你在网页上放声音？这真的很烦人。” 评论。

问题是：如何在 javascript 中创建一个函数来控制我的 html 音频标签何时播放？

我对 JavaScript 比较陌生，因此感谢您提供任何帮助。

Answer 1

您还没有提出问题，但我可以看到一些需要改进的地方：

• autostart和hidden是布尔属性，但这并不意味着您应该将它们视为布尔变量。如果该属性存在，则将其视为开启，否则视为关闭。没有属性hidden-只有设置<audio>了属性时才会显示元素controls。此外，您应该告诉浏览器您正在使用什么类型的音频。所以，你的音频标签应该是：

<audio id="song1" src="audio/ruins.wav" type="audio/x-wav" />

• 创建仅适用于一个实例的函数是一种不好的做法。您最好将其1作为参数传递，因此您将拥有：

<div id="pixelbutton" onClick="musicplay(1);"> </div>

• 仅设置autostart属性可能不会使其自动启动。相反，请使用该.play()方法。有了这一点和上述观点，您将获得：

function musicplay(id) {
    document.getElementById('song'+id).play();
}

• 最后，除非自从我上次检查以来情况发生了变化，否则只有 IE 和 Firefox 支持 WAV，Chrome 不支持。

希望这可以帮助。