HTML5之audio实战，网页音乐播放器开发

今天我们就基于 html5 audio 来，开发一个网页音乐播放器。

在html5 新特性中，audio 、video 是我们比较关心的 新 元素，我们终于可以脱离 flash ，来开发音频、视频播放器了，对于 一个html 新元素，无非就是 属性、事件 、方法等等，关于audio 的具体的属性、事件 、方法，请谷歌。

看我们的html代码： audio.html

                    audio                        
            
                
                                                        
                
                    
                        正在播放:                     
                                        
                                                    播放                                                                            上一首                                                                            下一首                                                                            暂停                                                                        
                                                            播放模式                                                                                                                                                                     单曲循环                                                                                   美国私立高中                                                                             压力压强                顺序播放                                                                                                                                                                                随机播放                                                                                                                        
                    
                
            
        
        <script src="bower_components/jquery/dist/jquery.js" type="text/javascript" chart="utf-8"></script>        <script src="bower_components/bootstrap/dist/js/bootstrap.js" type="text/javascript" chart="utf-8"></script>        <script src="js/audio.js" type="text/javascript" chart="utf-8"></script>    

javascript 代码：audio.js

$(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 ' + player.data[i] + '';            }            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-pau').click(function() {                player.audio.pau();            });            // 下一曲            $('#btn-next').click(function() {                if (player.currentindex == -1) {                    player.currentindex = 0;                } el if (player.currentindex == (player.data.length - 1)) {                    player.currentindex = 0;                } el {                    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;                } el if (player.currentindex == 0) {                    player.currentindex = (player.data.length - 1);                } el {                    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 = functi2017夏日套on() {                    $('#btn-next').click();                };            });            // 随机播放            $('#btn-random').click(function() {                player.audio.onended = function() {                    var i = parint((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 开发更 炫酷 的 界面效果，

这里主要关注，代码的实现。