Browse Source

修改音乐源,新增loop参数,可以循环播放

向怡 7 years ago
parent
commit
de7dba7a86
4 changed files with 46 additions and 38 deletions
  1. 4 3
      demo/main.js
  2. 36 34
      dist/meplayer.js
  3. 0 0
      dist/meplayer.min.js
  4. 6 1
      src/js/main.js

+ 4 - 3
demo/main.js

@@ -1,8 +1,9 @@
 mePlayer({
     music : {
-        src   : 'http://my-typecho-blog.b0.upaiyun.com/usr/uploads/2016/02/3528841697.mp3',
-        title : '晚风',
-        author: '好妹妹乐队',
+        src   : 'http://obv41t1pm.bkt.clouddn.com/audio/Depapepe%20%28%E3%83%86%E3%82%99%E3%83%8F%E3%82%9A%E3%83%98%E3%82%9A%E3%83%98%E3%82%9A%29-Iihidattane..mp3',
+        title : 'Iihidattane',
+        author: 'Depapepe',
+        loop: true,
         cover : 'http://my-typecho-blog.b0.upaiyun.com/usr/uploads/2016/02/462344463.jpg',
         lrc   : '[00:24.600]温柔的晚风\n[00:27.830]轻轻吹过 爱人的梦中\n[00:36.690]温柔的晚风\n[00:39.129]轻轻吹过 故乡的天空\n[00:47.690]温柔的晚风\n[00:50.749]轻轻吹过 城市的灯火\n[00:59.119]今夜的晚风\n[01:02.439]你去哪里 请告诉我\n[01:08.249]\n[01:10.879]温柔的晚风\n[01:14.590]轻轻吹过 爱人的梦中\n[01:22.179]温柔的晚风\n[01:25.549]轻轻吹过 故乡的天空\n[01:33.809]温柔的晚风\n[01:37.539]轻轻地吹过 城市的灯火\n[01:46.509]今夜的晚风\n[01:49.919]你要去哪里 请告诉我\n[01:56.419]\n[02:37.140]温柔的晚风\n[02:40.740]轻轻吹过 爱人的梦中\n[02:49.060]温柔的晚风\n[02:52.370]轻轻吹过 故乡的天空\n[03:00.680]温柔的晚风\n[03:03.860]轻轻吹过 城市的灯火\n[03:12.190]今夜的晚风\n[03:15.440]你要去哪里 请告诉我\n[03:21.370]\n[03:23.620]温柔的晚风\n[03:27.090]轻轻吹过 爱人的梦中\n[03:35.280]温柔的晚风\n[03:39.570]轻轻吹过 故乡的天空\n[03:47.620]温柔的晚风\n[03:50.880]轻轻地吹过 城市的灯火\n[03:59.180]今夜的晚风\n[04:02.680]你要去哪里 请告诉我\n[04:08.800]\n[04:33.830]温柔的晚风\n[04:37.350]请你带走 我昨天的梦\n[04:45.350]今夜的晚风\n[04:48.960]我要去哪里 请告诉我\n[04:59.690]\n'
     },

+ 36 - 34
dist/meplayer.js

@@ -42,13 +42,13 @@
 /************************************************************************/
 /******/ ([
 /* 0 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
 	/* WEBPACK VAR INJECTION */(function(global) {'use strict';
 
 	var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
 	var _constants = __webpack_require__(1);
 
@@ -84,30 +84,28 @@
 	        theme = options.theme || _constants.THEME_DEFAULT,
 	        hasLrc = musicConf.lrc ? true : false,
 	        coverSrc = musicConf.cover || 'https://unsplash.it/78/?random',
+	        loop = musicConf.loop || false,
 	        currentThemeClass = theme === _constants.THEME_DEFAULT ? 'meplayer-container' : 'meplayer-container-mini',
 	        containerClass = currentThemeClass + ' ' + (hasLrc ? 'meplayer-haslrc' : '') + ' meplayer-isloading',
 	        playerHTMLContent = '<div class="' + containerClass + '">\n                             <audio src=' + musicConf.src + ' preload="auto"></audio>\n                             <div class="meplayer-info">\n                             <div class="meplayer-info-cover"><img src=' + coverSrc + ' alt="cd-cover"></div>\n                             <div class="meplayer-meta">\n                             <div class="meplayer-meta-title">' + musicConf.title + '</div>\n                             <div class="meplayer-meta-author">' + musicConf.author + '</div>\n                             <div class="meplayer-meta-time-tick"><span class="meplayer-meta-time-tick-text"></span></div>\n                             </div>\n                             </div>\n                             <canvas class="meplayer-spectrum"></canvas>\n                             <div class="meplayer-lyric"><div class="meplayer-lyric-area"></div></div>\n                             <div class="meplayer-control"><div class="meplayer-control-play"><i class="icon-play"></i><i class="icon-pause"></i></div></div>\n                             <div class="meplayer-volume-bg"><div class="meplayer-volume"><i class="icon-volume"></i><div class="meplayer-volume-progress"></div></div></div>\n                             <div class="meplayer-duration"><i class="icon-clock"></i><span class="meplayer-duration-text">loading</span></div>\n                             <div class="meplayer-loadingsign"><i class="icon-spin animate-spin"></i>loading</div>\n                             <div class="meplayer-timeline-bg"><div class="meplayer-timeline"><div class="meplayer-timeline-passed"></div></div></div>\n                             </div>';
 
 	    target.innerHTML = playerHTMLContent;
 
-	    var meplayerContainer = target.querySelector('.' + currentThemeClass);
+	    var meplayerContainer = target.querySelector('.' + currentThemeClass),
+	        _selector$init$select = selector.init(meplayerContainer).select(['audio', '.meplayer-control-play', '.meplayer-meta-time-tick-text', '.meplayer-duration', '.meplayer-timeline', '.meplayer-timeline-passed', '.meplayer-volume', '.meplayer-volume-progress', '.meplayer-lyric-area', '.meplayer-spectrum']),
+	        _selector$init$select2 = _slicedToArray(_selector$init$select, 10),
+	        audio = _selector$init$select2[0],
+	        playBtn = _selector$init$select2[1],
+	        timeTick = _selector$init$select2[2],
+	        timeCount = _selector$init$select2[3],
+	        timeLine = _selector$init$select2[4],
+	        timePassed = _selector$init$select2[5],
+	        volumeArea = _selector$init$select2[6],
+	        volumeProgress = _selector$init$select2[7],
+	        lyricArea = _selector$init$select2[8],
+	        canvas = _selector$init$select2[9],
+	        duration;
 
-	    var _selector$init$select = selector.init(meplayerContainer).select(['audio', '.meplayer-control-play', '.meplayer-meta-time-tick-text', '.meplayer-duration', '.meplayer-timeline', '.meplayer-timeline-passed', '.meplayer-volume', '.meplayer-volume-progress', '.meplayer-lyric-area', '.meplayer-spectrum']);
-
-	    var _selector$init$select2 = _slicedToArray(_selector$init$select, 10);
-
-	    var audio = _selector$init$select2[0];
-	    var playBtn = _selector$init$select2[1];
-	    var timeTick = _selector$init$select2[2];
-	    var timeCount = _selector$init$select2[3];
-	    var timeLine = _selector$init$select2[4];
-	    var timePassed = _selector$init$select2[5];
-	    var volumeArea = _selector$init$select2[6];
-	    var volumeProgress = _selector$init$select2[7];
-	    var lyricArea = _selector$init$select2[8];
-	    var canvas = _selector$init$select2[9];
-
-	    var duration;
 
 	    if (hasLrc) {
 	        lyric.parse(musicConf.lrc).renderTo(lyricArea);
@@ -136,7 +134,11 @@
 	    }
 
 	    function handleAudioEnd() {
-	        utils.removeClass(meplayerContainer, 'meplayer-isplaying');
+	        if (loop) {
+	            audio.play();
+	        } else {
+	            utils.removeClass(meplayerContainer, 'meplayer-isplaying');
+	        }
 	    }
 
 	    function handleCanPlayThrough() {
@@ -288,9 +290,9 @@
 	}
 	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
 
-/***/ },
+/***/ }),
 /* 1 */
-/***/ function(module, exports) {
+/***/ (function(module, exports) {
 
 	'use strict';
 
@@ -311,9 +313,9 @@
 	exports.LYRIC_CURRENT_CLASS = LYRIC_CURRENT_CLASS;
 	exports.LYRIC_NEXT_CLASS = LYRIC_NEXT_CLASS;
 
-/***/ },
+/***/ }),
 /* 2 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
 	'use strict';
 
@@ -391,9 +393,9 @@
 	exports.renderTo = renderTo;
 	exports.currentIndex = currentIndex;
 
-/***/ },
+/***/ }),
 /* 3 */
-/***/ function(module, exports) {
+/***/ (function(module, exports) {
 
 	'use strict';
 
@@ -444,9 +446,9 @@
 	exports.getAbsLeft = getAbsLeft;
 	exports.parseSec = parseSec;
 
-/***/ },
+/***/ }),
 /* 4 */
-/***/ function(module, exports) {
+/***/ (function(module, exports) {
 
 	'use strict';
 
@@ -508,9 +510,9 @@
 	}
 
 	function init(canvasElem) {
-	    var width = arguments.length <= 1 || arguments[1] === undefined ? 220 : arguments[1];
-	    var height = arguments.length <= 2 || arguments[2] === undefined ? 30 : arguments[2];
-	    var color = arguments.length <= 3 || arguments[3] === undefined ? '#D94240' : arguments[3];
+	    var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 220;
+	    var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 30;
+	    var color = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '#D94240';
 
 	    canvas = canvasElem;
 	    canvas.width = width;
@@ -543,9 +545,9 @@
 	exports.draw = draw;
 	exports.stop = stop;
 
-/***/ },
+/***/ }),
 /* 5 */
-/***/ function(module, exports) {
+/***/ (function(module, exports) {
 
 	'use strict';
 
@@ -618,5 +620,5 @@
 	exports.select = select;
 	exports.$ = $;
 
-/***/ }
+/***/ })
 /******/ ]);

File diff suppressed because it is too large
+ 0 - 0
dist/meplayer.min.js


+ 6 - 1
src/js/main.js

@@ -19,6 +19,7 @@ root.mePlayer = function (options) {
         theme             = options.theme || THEME_DEFAULT,
         hasLrc            = musicConf.lrc ? true : false,
         coverSrc          = musicConf.cover || 'https://unsplash.it/78/?random',
+        loop              = musicConf.loop || false,
 
         currentThemeClass = theme === THEME_DEFAULT ? 'meplayer-container' : 'meplayer-container-mini',
         containerClass    = `${currentThemeClass} ${hasLrc ? 'meplayer-haslrc' : ''} meplayer-isloading`,
@@ -81,7 +82,11 @@ root.mePlayer = function (options) {
 
 
     function handleAudioEnd() {
-        utils.removeClass(meplayerContainer, 'meplayer-isplaying');
+        if(loop){
+            audio.play();
+        }else{
+            utils.removeClass(meplayerContainer, 'meplayer-isplaying');
+        }
     }
 
     function handleCanPlayThrough() {

Some files were not shown because too many files changed in this diff