Question

我希望点击网页上的按钮即可播放随机声音。我已经研究了很多，这次讨论对我最有帮助：http://www.elated.com/forums/topic/5196/

一张海报建议在点击按钮时运行Javascript函数，如下所示：

<script>
function playSound() {
  var sounds = [
    "http://www.mysite.com/1.wav",
    "http://www.mysite.com/2.wav",
    "http://www.mysite.com/3.wav"
  ];

  **// Choose a random sound here and play it**
}
</script>

我理解有关制作声音数组的部分。我想我有关于选择一个随机数组元素的部分。我只是坚持如何在海报推荐的JS功能中播放声音。我可以在JS函数中使用HTML5音频标签吗？

我不关心实际播放文件的代码是在函数内部还是外部。实际上，我首先要使用JS来随机选择一个元素，然后让一行HTML播放JS函数返回的数组元素。我放弃了，因为我无法弄清楚如何指定我想在HTML中播放JS函数的返回值。

谢谢。

Answer 1

使用JavaScript添加声音

将以下脚本放在HTML文档的<head>中：

<script language="javascript" type="text/javascript">
 function playSound(soundfile) {
 document.getElementById("dummy").innerHTML=
 "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
 }
 </script>

声音放置在空跨度

启动脚本时，JavaScript会将embed标记放在空的span标记内。因此，您需要在HTML页面的正文中的某处添加以下span文件，优先于文档顶部附近：

<span id="dummy"></span>

使用onmouseover或onclick属性

调用脚本

您需要添加的最后一件事是您想要在点击或鼠标悬停时生成声音的元素。使用以下属性之一调用脚本：

<a href="#" onclick="playSound('URL to soundfile');">Click here to hear a sound</a>

 <p onmouseover="playSound('URL to soundfile');">Mouse over this text to hear a sound</p>

Answer 2

如果您拥有音频元素的ID，则可以执行以下操作：

document.getElementById(theId).play();

音频元素可能如下所示：

<audio id="someId">
    <source src=sound/zbluejay.wav>
</audio>

如果你需要它，你可以像这样动态添加音频元素：

document.write("<audio id=someId><source src=yourURL</audio>");
document.getElementById('someId').play();

小提琴here。

Answer 3

没有测试过这个，但我想它应该可行。我基本上从数组中选择一个随机字符串，并将一个embed-element放入div中，其id为“element”，然后启动声音。

<script>
function playSound() {
  var sounds = new Array(
    "http://www.mysite.com/1.wav",
    "http://www.mysite.com/2.wav",
    "http://www.mysite.com/3.wav"
  );

$.("#element").html("<embed src=\""+Math.floor(Math.random()*(sounds.length+1))+"\" autostart=\"true\" />");

}
</script>

已编辑：我对此进行了测试：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function playSound() {
  var sounds = new Array(
    "file:///X:/test.mp3"
  );

$("#element").html("<embed src=\""+sounds[Math.floor(Math.random()*(sounds.length+1))]+"\" hidden=\"true\" autostart=\"true\" />");
}
</script>
</head>
<body onload="javascript:playSound()">

<div id="element">
</div>
</body>

</html>

如何在网页上点击播放随机声音？

3 个答案: