HTML5 设计MP3播放器

■实例说明

本例设计一个网页音乐播放器，浏览效果如图3.7所示。设计原理：获取要播放的文件路径，然后把它传递给audio元素的src属性，再调用HTML5多媒体API中相关属性、方法或事件，根据各种逻辑设计来控制播放、暂停和停止状态。

■设计过程

第1步，新建HTML5文档，设计播放器页面结构。网页音乐播放器的主体结构为上、中、下结构，顶部分布了多个播放按钮，中部为音乐列表，底部为播放模式切换按钮。

<div id="player">

    <audio id="musicbox"x/audio>

    <div id="controls" class="clearfix controls')

        <div id="play" class="playing"x/div>

        <div id="next"x/div>

        <div id="progress">

            <div></div>

            <p id="time">00:00/00:00</p>

        </div>

        <div id=,,volumeMxdiv></div></div>

     </div>

     <div class="bar">

          <button>重置列表</button>

          <button>随机打乱</加七七011>

          <but ton〉清空列表〈/button〉

     </div>

     <ul id=nmusiclist"></ul>

     <div class="bar bottom"><span>播放模式：</span><span id="moden">全部</span> </div> </div>

第2步，在界面中插入一t<audio id=nmusicboxn>标签，在main.css样式表中隐藏音频控件。 

     audio {display: none;}

第3步，在脚本文件player,js中，设计当单击播放按钮时，让<audio id="musicbox">播放指定的音频文件。

     function playMusic(index) {

        playingFile = musicFiles[index];

        $media.attr(nsrcn, playingFile.url);

        $media[0].play();

        $("#musiclist>li").removeClass("isplay").eq(index).addClass("isplay"); 

        auto ();

        }

有关详细样式代码和操控脚本，请参考本节示例源码，限于篇幅本节操作步骤仅抛砖引玉。