HTML5 設(shè)計MP3播放器

■實例說明

本例設(shè)計一個網(wǎng)頁音樂播放器，瀏覽效果如圖3.7所示。設(shè)計原理：獲取要播放的文件路徑，然后把它傳遞給audio元素的src屬性，再調(diào)用HTML5多媒體API中相關(guān)屬性、方法或事件，根據(jù)各種邏輯設(shè)計來控制播放、暫停和停止?fàn)顟B(tài)。

■設(shè)計過程

第1步，新建HTML5文檔，設(shè)計播放器頁面結(jié)構(gòu)。網(wǎng)頁音樂播放器的主體結(jié)構(gòu)為上、中、下結(jié)構(gòu)，頂部分布了多個播放按鈕，中部為音樂列表，底部為播放模式切換按鈕。

<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>標(biāo)簽，在main.css樣式表中隱藏音頻控件。 

     audio {display: none;}

第3步，在腳本文件player,js中，設(shè)計當(dāng)單擊播放按鈕時，讓<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 ();

        }

有關(guān)詳細(xì)樣式代碼和操控腳本，請參考本節(jié)示例源碼，限于篇幅本節(jié)操作步驟僅拋磚引玉。