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

当前位置 : 首页 > 网页制作 > html5 > HTML5之audio实战,网页音乐播放器开发

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

来源: 作者: 时间:2016-01-30 08:53
今天我们就基于 HTML5 audio 来,开发一个网页音乐播放器。在HTML5 新特性中,audio 、video 是我们比较关心的 新 元素,我们终于可以脱离 Flash ,来开发音频、视频播放器了,对于 一个HT

今天我们就基于 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 < len; i++) {
                    mhtml += '
  • '; } Player.$mList.(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(); });


    效果:


    \

    n块エkyCSS3 开发更 炫酷 的 界面效果,

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




    Tag:
    网友评论
    相关栏目
    最近更新
    热点关注
    
    <