audio.js

/**
 * Media 资源管理模块
 *
 * <pre><code>
 * HTML
 * ----
 *  <div class='page-audio hide' data-src="./bg.mp4">
 *    <div class="btn_audio">
 *      <strong class='txt_audio z-hide'>关闭</strong><span class='audio_open'></span>
 *    </div>
 *  </div>
 *
 * JS
 * ----
 *  var loadAudio = function() {
 *      // 声音初始化
 *      var media = Media.media_init();
 *      media._audio.play();
 *      media._audioNode.removeClass('hide');
 *  };
 * </code><pre>
 *
 * GistID: cace9dec040acfa557bf
 * GistURL: https://gist.github.com/cace9dec040acfa557bf
 */
var Media = (function() {// {{{
    var $ = window.jQuery || window.Zepto;

    var __media = {
        _audio: null, // 声音对象
        _audio_val: true, // 声音是否开启控制
        _audioNode: $('.page-audio'), // 声音模块

        // 声音初始化
        audio_init: function() {
            if (__media._audioNode.length <= 0) {
                return;
            }
            var options_audio = {
                loop: true,
                preload: "auto",
                src: this._audioNode.attr('data-src')
            }
            this._audio = new Audio();
            for (var key in options_audio) {
                if (options_audio.hasOwnProperty(key) && (key in this._audio)) {
                    this._audio[key] = options_audio[key];
                }
            }
            this._audio.load();
            return this;
        },

        // 声音事件绑定
        audio_addEvent: function() {
            if (this._audioNode.length <= 0) return;

            // 声音按钮点击事件
            var txt = this._audioNode.find('.txt_audio'),
                audioico = this._audioNode.find('.audio_open'),
                time_txt = null;

            // 声音打开事件
            $(this._audio).on('play', function() {
                __media._audio_val = false;
                audio_txt(txt, true, time_txt);
                audioico.addClass('z-play').removeClass('z-pause');

                // 播放事件
                $(window).trigger('audio_play');
            })

            // 声音关闭事件
            $(this._audio).on('pause', function() {
                __media._audio_val = true;

                audio_txt(txt, false, time_txt);
                audioico.removeClass('z-play').addClass('z-pause');

                // 停止事件
                $(window).trigger('audio_pause');
            })

            function audio_txt(txt, val, time_txt) {
                if (val) txt.text('打开');
                else txt.text('关闭');

                if (time_txt) clearTimeout(time_txt);

                txt.removeClass('z-move z-hide');
                time_txt = setTimeout(function() {
                    txt.addClass('z-move').addClass('z-hide');
                }, 1000)
            }
        },

        // 声音控制函数
        audio_contorl: function() {
            if (!__media._audio_val) {
                __media.audio_stop();
            } else {
                __media.audio_play();
            }
        },

        // 声音播放
        audio_play: function() {
            __media._audio_val = false;
            if (__media._audio) __media._audio.play();
        },

        // 声音停止
        audio_stop: function() {
            __media._audio_val = true;
            if (__media._audio) __media._audio.pause();
        },

        // 处理声音和动画的切换
        media_control: function() {
            if (!this._audio) return;
            if ($('video').length <= 0) return;

            $(this._audio).on('play', function() {
                $('video').each(function() {
                    if (!this.paused) {
                        this.pause();
                    }
                });
            });

            $('video').on('play', function() {
                if (!__media._audio_val) {
                    __media.audio_contorl();
                }
            });

            $('video').on('pause', function() {
                if (__media._audio_val) {
                    __media.audio_contorl();
                }
            });
        },

        // media管理初始化
        media_init: function() {
            // 声音初始化
            this.audio_init();
            // 绑定音乐加载事件
            this.audio_addEvent();
            // 音频切换
            this.media_control();
            return this;
        }
    };

    // 将media初始化绑定在window-load事件
    $(window).on('load', function() {
        __media._audioNode.find('.btn_audio').on('click', __media.audio_contorl);
    })

    return __media;
}());// }}}