Make music title and lrc selectable; click list to play next song in mobile: close DIYgod#69

DIYgod · DIYgod · commit d7365d95464e · 2016-09-30T11:13:35.000+08:00
diff --git a/README.md b/README.md
@@ -54,7 +54,7 @@ var option = {
     mutex: true,                                                       // Optional, pause other players when this player playing
     theme: '#e6d0b2',                                                  // Optional, theme color, default: #b7daff
     mode: 'random',                                                    // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
-    preload: 'metadata',                                               // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'metadata' in Desktop, 'none' in mobile
+    preload: 'metadata',                                               // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
     listmaxheight: '513px',                                             // Optional, max height of play list
     music: {                                                           // Required, music info, see: ###With playlist
         title: 'Preparation',                                          // Required, music title
@@ -74,6 +74,12 @@ var option = {
 + `ap.toggle()`                     // Toggle between play and pause
 + `ap.volume(percentage)`           // Set volume
 + `ap.on(event, handler)`           // Event binding
++ `ap.setMusic(index)`              // Switch music
++ `ap.lrc`                          // Lrc time and text
++ `ap.playIndex`                    // Current playing index
++ `ap.audio`                        // Return native video, most [native api](http://www.w3schools.com/tags/ref_av_dom.asp) are supported
+ + `dp.audio.currentTime`           // Returns the current playback position
+ + Most [native api](http://www.w3schools.com/tags/ref_av_dom.asp)
 
 #### Event binding
 
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,11 +1,11 @@
 {
   "name": "aplayer",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "Wow, such a beautiful html5 music player",
   "main": "dist/APlayer.min.js",
   "scripts": {
     "test": "webpack",
-    "start": "webpack-dev-server --hot --progress --inline"
+    "start": "webpack-dev-server --hot --progress --inline --host 0.0.0.0"
   },
   "repository": {
     "type": "git",
diff --git a/src/APlayer.js b/src/APlayer.js
@@ -1,4 +1,4 @@
-console.log("\n %c APlayer 1.5.3 %c http://aplayer.js.org \n\n","color: #fadfa3; background: #030307; padding:5px 0;","background: #fadfa3; padding:5px 0;");
+console.log("\n %c APlayer 1.5.4 %c http://aplayer.js.org \n\n","color: #fadfa3; background: #030307; padding:5px 0;","background: #fadfa3; padding:5px 0;");
 
 require('./APlayer.scss');
 
@@ -246,12 +246,7 @@ class APlayer {
                     const musicIndex = parseInt(listItem[i].getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1;
                     if (musicIndex !== this.playIndex) {
                         this.setMusic(musicIndex);
-                        if (this.isMobile) {
-                            this.pause();
-                        }
-                        else {
-                            this.play();
-                        }
+                        this.play();
                     }
                     else {
                         this.toggle();
@@ -455,12 +450,7 @@ class APlayer {
         if ((this.multiple && !this.audios[indexMusic]) || this.playIndex === -1) {
             this.audio = document.createElement("audio");
             this.audio.src = this.music.url;
-            if (this.option.preload) {
-                this.audio.preload = this.option.preload;
-            }
-            else {
-                this.audio.preload = this.isMobile ? 'none' : 'metadata';
-            }
+            this.audio.preload = this.option.preload ? this.option.preload : 'auto';
 
             // show audio time: the metadata has loaded or changed
             this.audio.addEventListener('durationchange', () => {
diff --git a/src/APlayer.scss b/src/APlayer.scss
@@ -133,6 +133,8 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
             white-space: nowrap;
             text-overflow: ellipsis;
             margin-bottom: 13px;
+            user-select: text;
+            cursor: default;
 
             .aplayer-title {
                 font-size: 14px;
@@ -331,6 +333,8 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
         .aplayer-lrc-contents {
             width: 100%;
             transition: all 0.5s ease-out;
+            user-select: text;
+            cursor: default;
         }
     }
 
