HTML5 設(shè)計(jì)MP3播放器

■實(shí)例說(shuō)明

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

■設(shè)計(jì)過(guò)程

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

<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>隨機(jī)打亂</加七七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è)計(jì)當(dāng)單擊播放按鈕時(shí)，讓<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ì)樣式代碼和操控腳本，請(qǐng)參考本節(jié)示例源碼，限于篇幅本節(jié)操作步驟僅拋磚引玉。