自定义音频播放小插件

(function(window, undefined) {

/* 
------------------------------------

    依赖 jquer 
    使用位置：打卡首页、打卡内页（Pc、Wap）

------------------------------------ 
*/

    // ----------------------------------------------------------------------------------------------
    
    var audioPlayFragment = {
        audio: null,        // 音频实例对象
        source: null,       // 1 听书、2音频
        list: null,         // 音频列表
        // node: null,         // 音频盒子
        // event: null,        // 事件绑定位置
        // icon: null,         // 播放样式
        current: 0,         // 当前播放
        welcome: null,      // 欢迎音频
        opts: null,         // 传参缓存
        // 初始调用
        init: function(options) {
            // <audio> 标签
            var defaults = { 
                htmlNode: '<div class="audioPlayFragment" style="width: 1px; height: 1px;display: none;">\
                    <audio src="" preload="metadata" controls  canplay="forceSafariPlayAudio" id="dkAudioPlayFragment">\
                        亲,您的浏览器不支持播放\
                    </audio>\
                </div>'
            };
            var self = this, 
                opts = $.extend(defaults, options);
            if(!opts.source || !opts.list){
                console.info('音频播放初始化参数出错');
                return;
            }
            // 缓存音频列表数据
            self.source = opts.source;
            self.list = opts.list.split(',');
            self.opts = opts;

            // 添加 html audio 标签
            $('body').append(opts.htmlNode);

            // 音频初始化
            self.audio = $('#dkAudioPlayFragment')[0];
            self.audio.volume = 0.5;

            // 绑定播放事件
            $(document).on('click',opts.event,function(){
                var me = $(this);
                if($(opts.node).find(opts.icon).hasClass('playing')){
                    $(opts.node).find(opts.icon).removeClass('playing');
                    self.audio.pause();
                }else{
                    if(me.hasClass('played')){
                        // 暂停后，接着播
                        self.audio.play();
                    }else{
                        // 从头播
                        self.getAudio(function(res){
                            self.play(res);
                        });      
                    }
                }
            });

            // 监听play事件
            self.audio.addEventListener('play', function () {
                $(opts.node).find(opts.icon).addClass('playing');
            }, false);

            // 监听暂停事件
            self.audio.addEventListener('pause', function () {
                $(opts.node).find(opts.icon).removeClass('playing');
            }, false);

            // 监听播放完成事件 播放下一曲
            self.audio.addEventListener('ended', function () {
                self.next();
            }, false);

        },
        // 根据id获取播放数据 只请求数据
        // audio_id
        // source=1 听书 2音频
        getAudio: function(callback){
            var self = this;
            $.ajax({
                cache:false,
                type:"post",
                url:"https://www.hrloo.com/hr/special/vip_audio/ajax_dk_play_audio",
                data: {
                    source: self.source,
                    audio_id: self.list[self.current]
                },
                dataType:"json",
                timeout:1000*5,
                success:function(res){
                    console.info(res)
                    if(res.result == 0){
                        callback(res.data);
                    }
                },
                error:function(XMLHttpRequest, status, errorThrown){},
                complete:function(){}
            });
        },
        // 音频播放
        play: function(res){
            var self = this;
            if(self.welcome){
                self.audio.src = res.audio_url;
                self.current++;
            }else{
                self.welcome = true;
                self.audio.src = res.tips_audio_url;
                $(self.opts.node).find(self.opts.event).addClass('played');
                //  广告统计
                $.ajax({
                    cache:false,
                    type:"post",
                    url:"/hr/special/vip_audio/dk_vip_click",
                    data:{
                        id: self.opts.dk_vip_id
                    },
                    dataType:"json",
                    timeout:1000*5,
                    success:function(res){},
                    error:function(XMLHttpRequest, status, errorThrown){},
                    complete:function(){}
                });
            }
            self.audio.play();
        },
        // 下一曲
        next: function(){
        	var self = this;
            //  拉取音频
        	if(self.current < self.list.length){
                self.getAudio(function(res){
                    self.play(res);
                });
            // 全部播完了，可以重新播放
            }else{
                self.current = 0;         // 当前播放
                self.welcome = null;      // 欢迎音频
                $(self.opts.node).find(self.opts.icon).removeClass('playing');
            }
        },
    }

    // ----------------------------------------------------------------------------------------------

    if (typeof module === "object" && module && typeof module.exports === "object") {
        module.exports = audioPlayFragment;
    } else {
        window.audioPlayFragment = audioPlayFragment;
        if (typeof define === "function" && define.amd) {
            define("audioPlayFragment", [], function() {
                return audioPlayFragment;
            });
        }
    }

    // ----------------------------------------------------------------------------------------------

})(window);