基于HTML5 audio元素播放声音jQuery小插件实例页面

展示

代码

HTML代码：

<p>播放同一个声音源：</p>
<nav>
    <ul id="nav" class="nav">
        <li>首页</li>
        <li>次页</li>
        <li>附页</li>
        <li>旁页</li>
        <li>边页</li>
    </ul>
</nav>
<p>播放独立的声音源：</p>
<nav>
    <ul id="nav2" class="nav">
        <li>首页</li>
        <li>次页</li>
        <li>附页</li>
        <li>旁页</li>
        <li>边页</li>
    </ul>
</nav>
            

JS代码：

$(function() {
    $("#nav li").audioPlay({
        name: "playOnce",
        urlMp3: "/study/media/beep.mp3",
        urlOgg: "/study/media/beep.ogg"
    });
    $("#nav2 li").audioPlay({
        urlMp3: "/study/media/beep.mp3",
        urlOgg: "/study/media/beep.ogg",
        clone: true
    });
});