jquery Voice Play Plugin

A recent project needs to use the voice playback function. Discover that AUDIO5JS meets requirements and is easy to use, and because jquery controls are easy to develop, the following encapsulation is available.

First, let's briefly introduce Audio5js.

Audio5js is a JS class library that can help you solve a browser compatibility problem like this, which is lightweight and graceful to use Flash forward compatible with the old version of the browser.

Its main features:

• have full API to control "load", "play", "Pause", "volume" and "find"
• And you can get specific information about what's playing.
• Do not rely on any class library
• Compatible version browser, including: IE8, IE9, Chrome (Mac), Firefox (Mac), Safari 6, Opera (MAC), Safari Mobile (IOS 6.0), Webkit Mobile ( Android 4.0.4)

AUDIO5JS Official Address: http://zohararad.github.io/audio5js/

Here's how to start packing

1. Custom jquery Plugin method: Jquery.audio5js.js

  1/*! 2 * jquery Audio5js: AUDIO5JS-based jquery simple Package 3 * HTTP://WWW.CNBLOGS.COM/YVANWU/4 * YVAN.WU 2015 5 */6/** 7 make Mode of use: 8 such as: 9 $ ("#voice1"). Audio5js ({url: "Voice/demo.mp3" 11});         * *!function ($) {+ var Audio = function (element, options) {this. $element = $ (element); 16 This.options = $.extend ({}, $.fn.audio5js.defaults, options); This.init (); 18};             Audio.prototype = {Constructor:audio, 21//Initialize navigation, init:function () {23 var settins = this.options; var ele = this. $element; var audio = this; 26//Initialization style Ele.addclass (settins[' class '); Ele.attr ("title", Settins.title); 29//Initialize AUDIO5JS Settins.audio5js = new Audio5js ({swf_path: ' Https://cdnjs Cn.b0.upaiyun.com/libs/audio5js/0.1.9/audio5js.swf ', Ready:function () {this.load (Settins.url); Ele.click (function () {35 Audio.playpause (); 36});                         PNs This.on (' Play ', function () {Ele.removeclass (settins[' class ')); 39 Ele.addclass (Settins.playingclass); , this);                          This.on (' Pause ', function () {ele.removeclass (settins.playingclass); 43 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 (E Rror) {//alert ("Playback error! ");              52         }, this); 53} 54}); , Playpause:function () {$ var audio5js = This.options.audio5js;  (audio5js.playing) {audio5js.pause (); audio5js.volume (0); {audio5js.seek (0);//Return to the first position of Audio5js.play (); Audio5js.vol Ume (1); n}, Pause:function () {audio5js = This.options.audio5js; 6                9 if (audio5js.playing) {audio5js.pause (); audio5js.volume (0); 72                }, Play:function () {$ var audio5js = This.options.audio5js; 76               if (!audio5js.playing) {audio5js.play (); Audio5js.volume (1); 79    }, Bayi Getaudio5js:function () {82           return THIS.OPTIONS.AUDIO5JS; 83} 84 85}; $.fn.audio5js = function (option, value) {methodreturn var, n/var $set = This.each (functio N () {$ var $this = $ (this); var data = $this. Data (' audio '); var options = Typ EOF option = = = ' object ' && option;              !data {94 $this. Data (' Audio ', (data = new Audio (this, options)); 95} 96         if (typeof option = = = ' String ') {Methodreturn = Data[option] (value); 98} 99 }); return (Methodreturn = = = undefined)? $set: methodreturn;101};102 103 $.fn.audio5js.defaults = {104 URL: "",//Audio file address: "Click to broadcast Put ", 106 ' class ':" Audio ",//Normal style class107 Playingclass:" audio-playing ",//Play style class108 audio5j S: {}109};110 111 $.fn.audio5js.constructor = audio;112} (window.jquery);

2, voice plug-in style: Jquery.audio5js.css

1/* Play style */2. Audio {3     cursor:pointer; 4     Background:url (".. /images/voice.png ") 0-512px no-repeat; 5     width:60px; 6     height:60px; 7     vertical-align:middle; 8     display:inline-block; 9}10. audio-playing {1 1     cursor:pointer;12     background:url (".. /images/voice.gif ") 0 0 no-repeat;13     width:60px;14     height:60px;15     vertical-align:middle;16     DISPLAY:INLINE-BLOCK;17}

3. Case page: demo.html

 1 <! DOCTYPE html> 2 
4, the style picture resources and the case audio file in the 5th, please download separately.
5. Full download
Jquery-audio5js.zip
6. Tested: Chrome 44, QQ browser 9, Firefox 35, IE 5/7/8/9/10/+ available, others not tested.
Note: The IE5/7/8 automatically switches to flash Player playback, but because of security issues with the browser and Flash Player, it is necessary to place the files in the middleware (such as Tomcat) to see the effect.
Categories: HTML5, JavaScript, jquery Tags: HTML5, jquery, JavaScript, Audio
jquery Voice Play Plugin