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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.