Fatal编程技术网
  • jquery/
  • jquery上的随机音频onmouseover不工作

jquery上的随机音频onmouseover不工作

jquery arrays audio random

jquery上的随机音频onmouseover不工作,jquery,arrays,audio,random,onmouseover,Jquery,Arrays,Audio,Random,Onmouseover,我试图使用jquery为我所有的导航按钮创建一个随机音频效果，基本上是将鼠标悬停在唯一的导航div上，然后播放阵列中的随机音频mp3文件 <!DOCTYPE html> <html> <head> <title>AAARGH CARIBBEAN PIRATES</title> <meta charset = "utf8"> <link

我试图使用jquery为我所有的导航按钮创建一个随机音频效果，基本上是将鼠标悬停在唯一的导航div上，然后播放阵列中的随机音频mp3文件

 <!DOCTYPE html>
    <html>
       <head>
          <title>AAARGH CARIBBEAN PIRATES</title>
          <meta charset = "utf8">
          <link rel = "stylesheet" href = "main.css">
          <script src = "jq/jquery-1.10.2.js"></script>
       </head>
<body>
    <div class = "wrapper">
        <div class = "navmain">
            <div class = "navbox">
                <p class = "navi"><a href = "arms.html">arms</a></p>
            </div>
            <div class = "navbox">
                <p class = "navi"><a href = "map.html">map</a></p>
            </div>
            <div class = "navbox">
                <p class = "navi"><a href = "ship.html">ship</a></p>
            </div>
            <div class = "navbox">
                <p class = "navi"><a href = "facts.html">facts</a></p>
            </div>
            <div class = "navbox">
                <p class = "navi"><a href = "speech.html">speech</a></p>
            </div>
        </div>
        <div id = "home">
            <div id = "innerhome">
                <p class = "basic">
                AAARGH mateys, the caribbean was a ..
                </p>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
                $('.navbox').onmouseover(playSound());
        });

        function playSound(){
            var audio[];
            audio[0] = new Audio("assetts/audio/bird.mp3");
            audio[1] = new Audio("assetts/audio/cannon.mp3");
            audio[2] = new Audio("assetts/audio/fire.mp3");
            audio[3] = new Audio("assetts/audio/monkey.mp3");
            audio[4] = new Audio("assetts/audio/crows.mp3");
            audio[5] = new Audio("assetts/audio/cannon2.mp3");

            var x = Math.floor((Math.random()*1000) % 6);

            audio[x].play();
        }
    </script>
</body>


啊，加勒比海盗












啊，马特斯，加勒比海是。。


$（文档）.ready（函数（）{
$（'.navbox'）.onmouseover（playSound（））；
});
函数playSound（）{
var音频[]；
音频[0]=新音频（“assetts/audio/bird.mp3”）；
音频[1]=新音频（“assetts/audio/cannon.mp3”）；
音频[2]=新音频（“assetts/audio/fire.mp3”）；
音频[3]=新音频（“assetts/audio/monkey.mp3”）；
音频[4]=新音频（“assetts/audio/crows.mp3”）；
音频[5]=新音频（“assetts/audio/cannon2.mp3”）；
var x=数学地板（（数学随机（）*1000）%6）；
音频[x]。播放（）；
}

它不工作..不确定哪里出了问题

给定代码存在多个问题

HTML

首先是一个建议。您应该将导航标记重新构建为更常见、更现代、更易访问的标记，例如：

<nav>
    <ul class="navmain">
        <li class="navbox"><a href="arms.html">arms</a></li>
        <li class="navbox"><a href="map.html">map</a></li>
        <li class="navbox"><a href="map.html">map</a></li>
        <li class="navbox"><a href="ship.html">ship</a></li>
        <li class="navbox"><a href="facts.html">facts</a></li>
        <li class="navbox"><a href="speech.html">speech</a></li>
    </ul>
</nav>
演示

一些进一步的解释

var音频[]将不起作用，例如它将在C++中，其中<代码>字符串音频[6 ]；<代码>是有效的。但是，您可以像初始化时那样插入所有元素，也可以像下面这样创建空数组：


var audio = [];


jQuery函数不是调用
.onmouseover
，而是调用。您可以传入不带大括号的函数名，如：


$('.navbox').mouseover(playSound);


或者您可以创建一个函数，如：


$('.navbox').mouseover(function() { playSound(); } );


最后，我将
音频
-数组设置为全局，用户每次悬停其中一个项目时，您不会重新创建它和所有六个音频元素，我将当前播放的项目存储在一个变量中，以便您可以在开始新的声音之前停止它


希望这有帮助。
当您调试
console.log（音频）时。你会得到一个空数组还是一个
HTMLAudioElement
对象数组？我对这一切都不熟悉，所以我在console.log上乱搞，我的音频消息出现在console中，但没有其他内容……总之，我已经将缺少的括号添加到我的文档就绪声明中，现在声音可以随机工作，但只有在页面加载或刷新时才能工作当我把鼠标移到所选的div上时…没有任何线索吗

$('.navbox').mouseover(function() { playSound(); } );