随机音频onmouseover jquery不工作

我想使用jquery为我的所有导航按钮创建一个随机音频效果基本上这个想法是你悬停在独特的导航div和播放数组随机音频mp3文件随机音频onmouseover jquery不工作

<!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>

它不工作..not肯定我要去哪里错了

来源

2013-09-27 Heath Ward

当你调试'console.log（音频）;'。你得到一个空数组还是'HTMLAudioElement'对象数组？ – insertusernamehere

我对这一切都很陌生，所以我用console.log搞砸了，我的音频信息出现在控制台中，但没有别的......反正我已经将缺少的括号添加到了我的文档准备好声明中，现在声音随机播放，但只是当页面加载或刷新，而不是当我鼠标悬停选定的div ...任何线索 –

没有与给定的代码多个问题。

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>

的JavaScript

下面是最终和工作的JavaScript部分：

var current = null; 
var audio = [ 
    new Audio("assetts/audio/bird.mp3"), 
    new Audio("assetts/audio/cannon.mp3"), 
    new Audio("assetts/audio/fire.mp3"), 
    new Audio("assetts/audio/monkey.mp3"), 
    new Audio("assetts/audio/crows.mp3"), 
    new Audio("assetts/audio/cannon2.mp3") 
]; 

function playSound() { 
    if (null !== current) { 
     audio[current].pause(); 
    } 

    current = Math.floor((Math.random() * 1000) % 6); 
    audio[current].play(); 
} 

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

演示

Try before buy

所

一些进一步的解释

var audio[];将无法正常工作，像它会例如在C++中，其中string audio[6];是有效的。但是，您可以将所有的元素，像我一样在初始化或者可以创建一个空数组是这样的：

var audio = [];

jQuery函数不叫.onmouseover但.mouseover()。你可以在一个函数名传递没有括号，如：

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

，或者你可以创建一个功能，如：

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

最后我做了audio -array全球性的，你不要”每次用户将其中一个项目悬停时，我都会重新创建它和所有六个音频元素，并将当前正在播放的项目存储在一个变量中，以便您可以在开始新声音之前将其停止。

希望这会有所帮助。

来源

2013-09-30 15:02:12 insertusernamehere

随机音频onmouseover jquery不工作

回答

相关问题