HTML5之audio實戰，網頁音樂播放器開發，html5audio
今天我們就基於 HTML5 audio 來，開發一個網頁音樂播放器。
在HTML5 新特性中，audio 、video 是我們比較關心的 新 元素，我們終於可以脫離 Flash ，來開發音頻、視頻播放器了，對於 一個HTML 新元素，無非就是 屬性、事件 、方法等等，關於audio 的具體的屬性、事件 、方法，請Google。
看我們的HTML代碼： audio.html
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Audio</title> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css"/> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <ol id="m-list"> </ol> </div> <div class="col-md-4"> <div> 現正播放: <strong id="rmusic"></strong> </div> <audio id="audio" controls></audio> <div class="btn-group" id="ctrl-area"> <button id="btn-play" class="btn btn-success"> 播放 </button> <button id="btn-pre" class="btn btn-success"> 上一首 </button> <button id="btn-next" class="btn btn-success"> 下一首 </button> <button id="btn-pause" class="btn btn-success"> 暫停 </button> <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 播放模式 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#" id="btn-loop"> 單曲迴圈 </a> </li> <li> <a href="#" id="btn-order"> 順序播放 </a> </li> <li> <a href="#" id="btn-random"> 全部隨機播放 </a> </li> </ul> </div> </div> </div> </div> </div> <script src="bower_components/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script> <script src="js/audio.js" type="text/javascript" charset="utf-8"></script> </body></html>
$(function() { // 播放器 var Player = { // 歌曲路徑 path : 'res/music/', // 歌曲資料 data : null, // 當前播放歌曲的 索引 currentIndex : -1, // 播放器元素jquery對象 $audio : $('audio'), // 歌曲列表 $mList : $('#m-list'), //現正播放的歌曲 $rmusic : $('#rmusic'), // 初始化 資料 init : function() { // 資料一般來自伺服器端,通過ajax 載入資料,這裡是類比 Player.data = ['五月天 - Ing - 勁舞團 戀愛.mp3', '李宇春 - 下個路口見.mp3', '小可 - 嗨曲.mp3']; // 一般用模板引擎,把資料 與 模板 轉換為 視圖,來顯示,這裡是類比 var mhtml = ''; var len = Player.data.length; for (var i = 0; i < len; i++) { mhtml += '<li><a index="' + i + '">' + Player.data[i] + '</a></li>'; } Player.$mList.html(mhtml); }, // 就緒 ready : function() { // 控制 Player.audio = Player.$audio.get(0); $('#ctrl-area').on('click', 'button', function() { Player.$rmusic.html(Player.data[Player.currentIndex]); }); // 播放 $('#btn-play').click(function() { Player.audio.play(); if (Player.currentIndex == -1) { $('#btn-next').click(); } }); // 暫停 $('#btn-pause').click(function() { Player.audio.pause(); }); // 下一曲 $('#btn-next').click(function() { if (Player.currentIndex == -1) { Player.currentIndex = 0; } else if (Player.currentIndex == (Player.data.length - 1)) { Player.currentIndex = 0; } else { Player.currentIndex++; } console.log("Player.currentIndex : " + Player.currentIndex); Player.audio.src = Player.path + Player.data[Player.currentIndex]; Player.audio.play(); }); // 上一曲 $('#btn-pre').click(function() { if (Player.currentIndex == -1) { Player.currentIndex = 0; } else if (Player.currentIndex == 0) { Player.currentIndex = (Player.data.length - 1); } else { Player.currentIndex--; } Player.audio.src = Player.path + Player.data[Player.currentIndex]; Player.audio.play(); }); // 單曲迴圈 $('#btn-loop').click(function() { console.log("Player.currentIndex :", Player.currentIndex); Player.audio.onended = function() { Player.audio.load(); Player.audio.play(); }; }); // 順序播放 $('#btn-order').click(function() { console.log("Player.currentIndex :", Player.currentIndex); Player.audio.onended = function() { $('#btn-next').click(); }; }); // 全部隨機播放 $('#btn-random').click(function() { Player.audio.onended = function() { var i = parseInt((Player.data.length - 1) * Math.random()); playByMe(i); }; }); // 播放指定歌曲 function playByMe(i) { console.log("index:", i); Player.audio.src = Player.path + Player.data[i]; Player.audio.play(); Player.currentIndex = i; Player.$rmusic.html(Player.data[Player.currentIndex]); } // 歌曲被點擊 $('#m-list a').click(function() { playByMe($(this).attr('index')); }); } }; Player.init(); Player.ready();});
效果：
實現了 播放器常用的功能，當然可以基於CSS3 開發更 炫酷 的 介面效果，
這裡主要關注，代碼的實現。
你可以吧HTML頁面發給我一份，或者線上地址給我也行，我給你改 ztm3075@163.com
手機網頁上MP3播放器怎實現？html5好像播放不了
版本太古董的手機也許有些麻煩，可能需要用些Flash控制項；手機瀏覽器較新的，直接用HTML5的代碼應該可以。
手機環境的最新的Safari，Chrome都支援HTML5的audio標籤
至於製作手機網站，比較方便的作法是用Dreamweaver的移動流媒體布局方式建立網站。你還可以試試百度開發人員中心的一些工具
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
