0

我正在尝试使用 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>

它不起作用..不确定我哪里出错了

4

1 回答 1

0

给定的代码存在多个问题。

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);
});

演示

先试后买

一些进一步的解释

var audio[];将不起作用，例如在 C++ 中，其中string audio[6];有效。但是，您可以像我在初始化时那样插入所有元素，也可以像这样创建一个空数组：

var audio = [];

jQuery 函数没有被调用.onmouseover，但是.mouseover(). 您可以传入不带大括号的函数名，例如：

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

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

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

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

希望这可以帮助。

于 2013-09-30T15:02:12.337 回答