Self-built jQuery plug-in: encapsulates audio5js into a jQuery audio playback plug-in, audio5jsjquery

Self-built jQuery plug-in: encapsulates audio5js into a jQuery audio playback plug-in, audio5jsjquery

The speech playback function is required for a previous project. It is found that Audio5js meets the requirements and is easy to use. In view of the ease of development and operation of jQuery controls, the following encapsulation is available.

First, let's briefly introduce Audio5js.

Audio5js is a js class library that helps you solve such browser compatibility issues. It is lightweight and elegantly compatible with older versions of flash.

Its main features:

• Has a complete API to control "loading", "playing", "pause", "volume", and "Search"
• You can also obtain the relevant information about the playback content.
• Does not rely on any class library
• Compatible browsers, including 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 official address: http://zohararad.github.io/audio5js/

The encapsulation method is introduced below.

1. Custom jQuery plug-in method: jquery. audio5js. js

1 /*! 2 * Jquery Audio5js: simple Jquery encapsulation Based on Audio5js 3 * http://www.cnblogs.com/yvanwu/ 4 * yvan. wu 2015 5 */6/** 7 usage: 8 e. g.: 9 $ ("# voice1 "). audio5js ({10 url: "voice/demo.mp3" 11}); 12 */13! Function ($) {14 var Audio = function (element, options) {15 this. $ element = $ (element); 16 this. options = $. extend ({}, $. fn. audio5js. defaults, options); 17 this. init (); 18}; 19 Audio. prototype = {20 constructor: Audio, 21 // initialization navigation 22 init: function () {23 var settins = this. options; 24 var ele = this. $ element; 25 var audio = this; 26 // initialize the style 27 ele. addClass (settins ['class']); 28 ele. attr ("title", settins. title); 29 // initialize audio5js 30 settins. audio5js = new Audio5js ({31 swf_path :' https://cdnjscn.b0.upaiyun.com/libs/audio5js/0.1.9/audio5js.swf ', 32 ready: function () {33 this. load (settins. url); 34 ele. click (function () {35 audio. playPause (); 36}); 37 this. on ('play', function () {38 ele. removeClass (settins ['class']); 39 ele. addClass (settins. playingClass); 40}, this); 41 this. on ('pause', function () {42 ele. removeClass (settins. playingClass); 43 ele. addClass (settins ['class']); 44}, this); 45 this. on ('enabled', function () {46 ele. removeC Lass (settins. playingClass); 47 ele. addClass (settins ['class']); 48}, this); 49 // error event passes error object to callback 50 this. on ('error', function (error) {51 // alert ("playback error! "); 52}, this); 53} 54}); 55}, 56 playPause: function () {57 var audio5js = this. options. audio5js; 58 if (audio5js. playing) {59 audio5js. pause (); 60 audio5js. volume (0); 61} else {62 audio5js. seek (0); // return to the starting position 63 audio5js. play (); 64 audio5js. volume (1); 65} 66}, 67 pause: function () {68 var audio5js = this. options. audio5js; 69 if (audio5js. playing) {70 audio5js. pause (); 71 audio5js. vol Ume (0); 72} 73}, 74 play: function () {75 var audio5js = this. options. audio5js; 76 if (! Audio5js. playing) {77 audio5js. play (); 78 audio5js. volume (1); 79} 80}, 81 getAudio5js: function () {82 return this. options. audio5js; 83} 84 85}; 86 $. fn. audio5js = function (option, value) {87 var methodReturn; 88 89 var $ set = this. each (function () {90 var $ this = $ (this); 91 var data = $ this. data ('audio'); 92 var options = typeof option = 'object' & option; 93 if (! Data) {94 $ this. data ('audio', (data = new audio (this, options); 95} 96 if (typeof option = 'string ') {97 methodReturn = data [option] (value); 98} 99}); 100 return (methodReturn = undefined )? $ Set: methodReturn; 101}; 102 103 $. fn. audio5js. defaults = {104 url: "", // audio file address 105 title: "click to play", 106 'class': "audio", // normal style class107 playingClass: "audio-playing", // The pattern class108 audio5js: {} 109}; 110 $. fn. audio5js. constructor = Audio; 112} (window. jQuery );

2. Speech plug-in style: jquery.audio5js.css

1/* playback 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 {11 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 image resources and case audio files are available at. Please download them separately.
5. Complete download
Jquery-audio5js.zip
6. tested: Chrome 44, QQ browser 9, Firefox 35, IE 5/7/8/9/10/+ are available. Others are not tested.
Note: In IE5/7/8, Flash Player playback is automatically switched. However, due to security issues between the browser and Flash Player, You need to place the files in the middleware (such as Tomcat) to see the effect.