event binding

DIYgod · Apr 28, 2016 · 12ef281 · 12ef281
1 parent b17cc73
commit 12ef281
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -43,26 +43,14 @@ $ npm install aplayer --save
 ### JS
 
 ```JS
-var ap = new APlayer({
-    element: document.getElementById('player1'),
-    narrow: false,
-    autoplay: true,
-    showlrc: false,
-    theme: '#e6d0b2',
-    music: {
-        title: 'Preparation',
-        author: 'Hans Zimmer/Richard Harvey',
-        url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
-        pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
-    }
-});
+var ap = new APlayer(option);
 ap.init();
 ```
 
 #### Options
 
 ```JS
-{
+var option = {
     element: document.getElementById('player1'),                       // Optional, player element
     narrow: false,                                                     // Optional, narrow style
     autoplay: true,                                                    // Optional, autoplay song(s), not supported by mobile browsers
@@ -85,6 +73,18 @@ ap.init();
 + `ap.play()`
 + `ap.pause()`
 
+#### Event binding
+
+`ap.on(event, handler)`
+
+`event`:
++ `play`: Triggered when APlayer start play
++ `pause`: Triggered when APlayer paused
++ `canplay`: Triggered when enough data is available that APlayer can be played
++ `playing`: Triggered periodically when APlayer is playing
++ `ended`: Triggered when APlayer ended
++ `error`: Triggered when an error occurs
+
 #### Work with module bundler
 
 ```js

diff --git a/demo/demo.js b/demo/demo.js
@@ -12,6 +12,27 @@ var ap1 = new APlayer({
         pic: 'http://7xq131.com1.z0.glb.clouddn.com/Preparation.jpg'
     }
 });
+ap1.on('play', function () {
+    console.log('play');
+});
+ap1.on('play', function () {
+    console.log('play play');
+});
+ap1.on('pause', function () {
+    console.log('pause');
+});
+ap1.on('canplay', function () {
+    console.log('canplay');
+});
+ap1.on('playing', function () {
+    console.log('playing');
+});
+ap1.on('ended', function () {
+    console.log('ended');
+});
+ap1.on('error', function () {
+    console.log('error');
+});
 ap1.init();
 
 var ap2 = new APlayer({

diff --git a/dist/APlayer.min.js b/dist/APlayer.min.js
diff --git a/dist/APlayer.min.js.map b/dist/APlayer.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aplayer",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Wow, such a beautiful html5 music player",
   "main": "dist/APlayer.min.js",
   "scripts": {

diff --git a/src/APlayer.js b/src/APlayer.js
@@ -123,6 +123,18 @@
                     }
                 }
             };
+
+            // define APlayer events
+            this.eventTypes = ['play', 'pause', 'canplay', 'playing', 'ended', 'error'];
+            this.event = {};
+            for (let type of this.eventTypes) {
+                this.event[type] = [];
+            }
+            this.trigger = (type) => {
+                for (let func of this.event[type]) {
+                    func();
+                }
+            }
         }
 
         /**
@@ -431,25 +443,32 @@
                 this.audio.src = this.music.url;
                 this.audio.preload = this.isMobile ? 'none' : 'metadata';
 
-                // show audio time
+                // show audio time: the metadata has loaded or changed
                 this.audio.addEventListener('durationchange', () => {
                     if (this.audio.duration !== 1) {           // compatibility: Android browsers will output 1 at first
                         this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.secondToTime(this.audio.duration);
                     }
                 });
 
-                // show audio loaded bar
+                // show audio loaded bar: to inform interested parties of progress downloading the media
                 this.audio.addEventListener('progress', () => {
                     const percentage = this.audio.buffered.length ? this.audio.buffered.end(this.audio.buffered.length - 1) / this.audio.duration : 0;
                     this.updateBar('loaded', percentage, 'width');
                 });
 
-                // audio download error
+                // audio download error: an error occurs
                 this.audio.addEventListener('error', () => {
                     this.element.getElementsByClassName('aplayer-author')[0].innerHTML = ` - Error happens ╥﹏╥`;
+                    this.trigger('pause');
+                });
+
+                // audio can play: enough data is available that the media can be played
+                this.audio.addEventListener('canplay', () => {
+                    this.trigger('canplay');
                 });
 
                 // multiple music play
+                this.ended = false;
                 if (this.multiple) {
                     this.audio.addEventListener('ended', () => {
                         if (this.playIndex < this.option.music.length - 1) {
@@ -459,14 +478,18 @@
                             this.setMusic(0);
                         }
                         else if (!this.loop) {
+                            this.ended = true;
                             this.pause();
+                            this.trigger('ended');
                         }
                     });
                 }
                 else {
                     this.audio.addEventListener('ended', () => {
                         if (!this.loop) {
+                            this.ended = true;
                             this.pause();
+                            this.trigger('ended');
                         }
                     });
                 }
@@ -550,15 +573,18 @@
                         this.updateLrc();
                     }
                     this.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = this.secondToTime(this.audio.currentTime);
+                    this.trigger('playing');
                 }, 100);
+                this.trigger('play');
             }
         };
 
         /**
          * Pause music
          */
         pause() {
-            if (!this.audio.paused) {
+            if (!this.audio.paused || this.ended) {
+                this.ended = false;
                 this.button.classList.remove('aplayer-pause');
                 this.button.classList.add('aplayer-play');
                 this.button.innerHTML = '';
@@ -567,8 +593,18 @@
                 }, 100);
                 this.audio.pause();
                 clearInterval(this.playedTime);
+                this.trigger('pause');
             }
         };
+
+        /**
+         * attach event
+         */
+        on(name, func) {
+            if (typeof func === 'function') {
+                this.event[name].push(func);
+            }
+        }
     }
 
     if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {