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" 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>
    

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-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 开发更 炫酷 的 界面效果，

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