今天我们就基于 HTML5 audio 来，开发一个网页音乐播放器。
在HTML5 新特性中，audio 、video 是我们比较关心的 新 元素，我们终于可以脱离 Flash ，来开发音频、视频播放器了，对于 一个HTML 新元素，无非就是 属性、事件 、方法等等，关于audio 的具体的属性、事件 、方法，请谷歌。
看我们的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 开发更 炫酷 的 界面效果，
这里主要关注，代码的实现。
HTML5之audio实战，网页音乐播放器开发,布布扣,bubuko.com
原文：http://blog.csdn.net/zoutongyuan/article/details/38359869
