jquery封装audio5js实现语音播放器的例子

首先先简单介绍一下Audio5js吧。

Audio5js是一个能够帮助你解决类似这样的浏览器兼容性问题的js类库，轻量级并且能够很优雅的使用flash向前兼容老版本的浏览器。

其主要特性：

拥有完整API来控制“加载”，“播放”，“暂停”，“音量”和“查找”

并且可以得到播放内容的具体相关信息

不依赖任何类库

兼容版本浏览器，包括：IE8, IE9, Chrome 23 (Mac), Firefox 17 (Mac), Safari 6, Opera 12 (Mac), Safari Mobile (iOS 6.0), Webkit Mobile (Android 4.0.4)

Audio5js 官方地址：http://zohararad.github.io/audio5js/

下面开始介绍封装方式

1、自定义Jquery插件方法：jquery.audio5js.js

/**

    使用方式：

    如：

    $("#voice1").audio5js({

        url : "voice/demo.mp3"

    });

 */

!function ($) {

    var Audio = function (element, options) {

        this.$element = $(element);

        this.options = $.extend({}, $.fn.audio5js.defaults, options);

        this.init();

    };

    Audio.prototype = {

        constructor : Audio,

        // 初始化导航

        init : function(){

            var settins = this.options;

            var ele = this.$element;

            var audio = this;

            // 初始化样式

            ele.addClass(settins['class']);

            ele.attr("title", settins.title);

            // 初始化audio5js

            settins.audio5js = new Audio5js({

                swf_path: 'https://cdnjscn.b0.upaiyun.com/libs/audio5js/0.1.9/audio5js.swf',

                  ready: function(){

                    this.load(settins.url);

                    ele.click(function(){

                        audio.playPause();

                    });

                    this.on('play', function () {

                        ele.removeClass(settins['class']);

                        ele.addClass(settins.playingClass);

                    }, this);

                    this.on('pause', function () {

                        ele.removeClass(settins.playingClass);

                        ele.addClass(settins['class']);

                    }, this);

                      this.on('ended', function () {

                          ele.removeClass(settins.playingClass);

                        ele.addClass(settins['class']);

                      }, this);

                    //error event passes error object to callback

                      this.on('error', function (error) {

                        //alert("播放出错！");

                      }, this);

                  }

            });

        },

        playPause : function () {

            var audio5js = this.options.audio5js;

            if (audio5js.playing) {

                  audio5js.pause();

                  audio5js.volume(0);

            } else {

                audio5js.seek(0); //回到最开始的位置

                  audio5js.play();

                  audio5js.volume(1);

            }

          },

          pause : function(){

              var audio5js = this.options.audio5js;

              if (audio5js.playing) {

                  audio5js.pause();

                  audio5js.volume(0);

              }

          },

          play : function(){

              var audio5js = this.options.audio5js;

              if (!audio5js.playing) {

                  audio5js.play();

                  audio5js.volume(1);

              }

          },

          getAudio5js : function(){

              return this.options.audio5js;

          }

           

    };

    $.fn.audio5js = function (option, value) {

        var methodReturn;

        var $set = this.each(function () {

            var $this = $(this);

            var data = $this.data('audio');

            var options = typeof option === 'object' && option;

            if (!data) {

                $this.data('audio', (data = new Audio(this, options)));

            }

            if (typeof option === 'string') {

                methodReturn = data[option](value);

            }

        });

        return (methodReturn === undefined) ? $set : methodReturn;

    };

    $.fn.audio5js.defaults = {

        url : "", //音频文件地址

        title : "点击播放",

        'class' : "audio", // 正常样式class

        playingClass : "audio-playing", // 播放时样式class

        audio5js : {}

    };

    $.fn.audio5js.Constructor = Audio;

}(window.jQuery);

2、语音插件样式：jquery.audio5js.css

/*播放样式*/

.audio {

    cursor: pointer;

    background: url("../images/voice.png") 0 -512px no-repeat;

    width: 60px;

    height: 60px;

    vertical-align: middle;

    display: inline-block;

}

.audio-playing {

    cursor: pointer;

    background: url("../images/voice.gif") 0 0 no-repeat;

    width: 60px;

    height: 60px;

    vertical-align: middle;

    display: inline-block;

}

 3、案例页面：index.html

    

        

        

                

        javascript" src="
https://cdnjscn.b0.upaiyun.com/libs/jquery/1.8.3/jquery.min.js">        

        

        

    

    

        标准案例：点击图片可以播放/暂停

        

         

        

        

        

        JS控制：

        

        

        

        

        $(function(){

            $("#voice1").audio5js({

                url : "voice/demo.mp3"

            });

        });

        

    

4、样式的图片资源与案例的音频文件在第5点中，请另行下载。

5、完整下载

jquery-audio5js.zip

6、经测试：Chrome 44、QQ浏览器9、Firefox 35、IE 5/7/8/9/10/+可用，其它未测试。

注意：IE5/7/8的中自动切换为flash播放器播放，但由于浏览器与flash播放器的安全性问题，需要将文件放置到中间件(如Tomcat)中才能见效果。