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

浏览数：35 / 时间：2015年06月09日

今天我们就基于 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>

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 < 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();

});

效果：