在Wordpress网站上点击图像播放随机声音?

时间:2012-08-25 10:07:53

标签: javascript html wordpress audio random

好的,所以我已经研究了几个小时了,此时我可能只是让自己更加困惑。 ;)

我在这里阅读了这个问题的答案:How can I play a random sound on click in a web page?

我之前还阅读了该作者最初引用的源代码。

我在Wordpress网站上的header.php文件中的标签之间添加了此代码:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function playSounds() {
  var sounds = new Array(
    "http://www.faenathara.com/laughs/Natharalaugh1.wav",
    "http://www.faenathara.com/laughs/Natharalaugh2.wav",
    "http://www.faenathara.com/laughs/Natharalaugh3.wav",
    "http://www.faenathara.com/laughs/Natharalaugh4.wav"
   );

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

然后我将其添加到我的身体标签:

onload="javascript:playSound()"

这在我的身体标签之间:

<div id="element">
<button onclick="playSound()">LAUGH</button>
</div>

我知道我错过了一些非常明显的东西,但我想我已经看了很长时间才能看到它是什么。帮助

2 个答案:

答案 0 :(得分:0)

如果您要在网页上使用声音 - 那么我真的建议您使用Soundmanager库。它肯定会消除您在页面上使用声音的所有痛苦。

然后点击按钮添加声音非常容易!

答案 1 :(得分:0)

编辑:我已经修复了函数调用,并且还从中删除了+ 1,因为它导致有时你得到索引4,这在你的数组中不存在并导致了div具有undefined src属性。我也把按钮放在div之外,因为它被替换为embed标签。请在您的代码中复制此示例并包含相同的DOCTYPE并查看其是否有效:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script>
        function playSounds() {
            var sounds = new Array(
    "http://www.faenathara.com/laughs/Natharalaugh1.wav",
    "http://www.faenathara.com/laughs/Natharalaugh2.wav",
    "http://www.faenathara.com/laughs/Natharalaugh3.wav",
    "http://www.faenathara.com/laughs/Natharalaugh4.wav"
   );
            var index = Math.floor(Math.random() * (sounds.length));
            $("#element").html("<embed src=\"" + sounds[index] + "\" hidden=\"true\" autostart=\"true\" />");
        }
    </script>
    <title></title>
</head>
<body onload="javascript:playSounds()">
<button onclick="playSounds()">
            LAUGH</button>
    <div id="element">

    </div>
</body>
</html>

在Chrome,Firefox和IE9中,这对我来说完全没问题。

Hanlet。