modified: index.html

modified: readme.md modified: vp.css modified: vp.js
imzlh · Jun 19, 2023 · 898d015 · 898d015
1 parent b1e5ae8
commit 898d015
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -58,10 +58,13 @@
             </svg>
         </div>
         <!-- 全屏 -->
-        <div class="vp_btn" action="full">
-            <svg fill="currentColor" viewBox="0 0 16 16">
+        <div class="vp_btn" action="switch">
+            <!-- <svg fill="currentColor" viewBox="0 0 16 16">
                 <path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5v-9zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-13z"/>
                 <path d="M2 4.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H3v2.5a.5.5 0 0 1-1 0v-3zm12 7a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H13V8.5a.5.5 0 0 1 1 0v3z"/>
+            </svg> -->
+            <svg fill="currentColor" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"/>
             </svg>
         </div>
     </div>
@@ -79,10 +82,20 @@
 <div id="vp_dialog_backdrop"></div>
 <div id="vp_dialog_playlist" class="vp_dialog" title="播放列表"></div>
 <div id="vp_dialog_voice"  class="vp_dialog" title="更多设置">
-    <p>
-        音量
+    <div>
+        音量大小 : 
         <input type="range" id="vp_setting_volume" class="full" step="0.01" min="0" max="1" value="1">
-    </p>
+    </div>
+    <div>
+        倍速播放 : 
+        <div class="vp_range" id="vp_setting_playrate">
+            <r value="0.8">0.8X</r>
+            <r value="1" class="selected">1X</r>
+            <r value="1.25">1.25X</r>
+            <r value="1.5">1.5X</r>
+            <r value="2">2X</r>
+        </div>
+    </div>
 </div>
 <!-- 这个必须在之后 -->
 <script src="vp.js"></script>
@@ -95,6 +108,8 @@
     $vp.list.push({
         file : 'http://imzlh.top:81/@/%E9%AD%94%E6%B3%95%E5%B0%91%E5%A5%B3%E5%B0%8F%E5%9C%86/CDs/%E5%AE%98%E6%96%B9CD%20Ultimate%20Best/SVWC-70281.opus',
         lrc  : 'demo/demo.lrc',
+        performer : '幸田夢波',
+        title : 'WHIMSICAL WAYWARD WISH',
         cover: 'http://imzlh.top:81/@/%E9%AD%94%E6%B3%95%E5%B0%91%E5%A5%B3%E5%B0%8F%E5%9C%86/CDs/%E5%AE%98%E6%96%B9CD%20Ultimate%20Best/Scans/01.webp'
     });
 </script>
diff --git a/readme.md b/readme.md
@@ -1,13 +1,17 @@
 # vPlayer
- - 轻量级播放器，支持3种显示模式
- - 自适应，不占地，支持简单的CUE解析
- - 不支持跨域，请LRC和CUE都PULL至自己的服务器
+ - 轻量级播放器，支持3种显示模式(最小化、卡片式、全屏)
+ - 支持歌词(LRC)，同时**注重性能**，500ms一次刷新
+ - **自适应**，不占地，支持简单的**CUE解析**(允许多个CUE)
+ - 不支持跨域，请LRC和CUE都下载至自己的服务器
 
 ![PC](view/pc.png)
 
 ![Phone](view/phone.png)
 
+## 用途
+对于文件管理器(类似我的项目vList)，**前端解析CUE**还是很不错的
+然后设计之初只是想实现一遍(Github上很少有这类项目)，仅此而已
+
 ## 使用
-推送至vPlayer: `$vp.list.push(数据)`
-播放/暂停: `$vp.play(01:21[时间]或2[音乐ID]或干脆不填)`
-可以参考index.html的示例
+示例(index.html)中已经贴出简单用法了
+可以参考[文档](http://imzlh.top:81/vplayer/document.html)
diff --git a/vp.css b/vp.css
@@ -124,17 +124,39 @@
 #vp_dialog_playlist > div:hover{
     background-color: lightblue;
 }
-#vp_dialog_voice > p:first-child{
+#vp_dialog_voice > div:first-child{
     margin-top: 1rem;
 }
-#vp_dialog_voice > p:last-child{
+#vp_dialog_voice > div:last-child{
     margin-bottom: 1rem;
 }
-#vp_dialog_voice > p{
+#vp_dialog_voice > div{
     margin: 0.5rem 1rem;
+    display: flex;
+    align-items: center;
+}
+#vp_dialog_voice > div > *{
+    flex-grow: 1;
+    margin-left: 2rem;
+}
+/* vpRange按钮组 */
+.vp_range{
+    border-radius: 0.25rem;
+    border: solid 0.1rem rgb(6, 109, 44);
+    display: flex;
 }
-#vp_dialog_voice input{
-    width: calc(100% - 4rem);
+.vp_range > *{
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    transition: all 0.1s;
+    flex-grow: 1;
+}
+.vp_range > *:hover{
+    background-color: rgb(88, 193, 193);
+}
+.vp_range > .selected{
+    background-color: rgb(7, 89, 144);
+    color: white;
 }
 /* 最小按钮 */
 #vp[mode=min]{

diff --git a/vp.js b/vp.js
@@ -133,7 +133,7 @@ $vp = {
                         $data = {
                             file : prefix+inblock,
                             type : 'cue',
-                            performer : meta.performer || '未知歌手',
+                            performer : meta.performer,
                             cover : cover
                         };     // 刷新data
                     }else if(indent == 4){
@@ -176,16 +176,16 @@ $vp = {
         push : function(opt){
             var e = document.createElement('div'),
                 id = this.list.length;
-            e.innerHTML = opt.title || decodeURIComponent(opt.file.split('/').end());
+            if(typeof opt.title != 'string') opt.title = decodeURIComponent(opt.file.split('/').end());
+            if(typeof opt.performer != 'string') opt.performer = '未知歌手';
+            if(typeof opt.cover != 'string') opt.cover = this.setting.cover;
+            e.innerHTML = opt.title+' / <span style="color:gray">'+opt.performer+'</span>';
             e.onclick = function(){$vp.set(id);};
             $vp.e.playlist.append(e);
             this.list.push(opt);
         },
         get : function(i){
             return this.list[i || 0];
-        },
-        cue_autoload : function(){
-
         }
     },
     // 歌词解析管理模块,后期可能会考虑缓存
@@ -233,6 +233,7 @@ $vp = {
         min :       ()=>$vp.e.box.setAttribute('mode','min'),// 最小化
         card :      ()=>$vp.e.box.setAttribute('mode','card'),// 卡片模式
         full :      ()=>$vp.e.box.setAttribute('mode','full'),// 最大化
+        switch:     ()=>$vp.e.box.setAttribute('mode',({min:'card',card:'full',full:'min'})[$vp.e.box.getAttribute('mode')]),
         playlist :  ()=>$vp.e.backdrop.with($vp.e.playlist),// 播放列表
         voice :     ()=>$vp.e.backdrop.with($vp.e.voice),// 声音控制
         next :      ()=>$vp.set(),// 下一曲
@@ -260,7 +261,8 @@ $vp = {
         voice: document.getElementById('vp_dialog_voice'),
         backdrop : document.getElementById('vp_dialog_backdrop'),
         setting:{
-            volume: document.getElementById('vp_setting_volume')
+            volume: document.getElementById('vp_setting_volume'),
+            rate  : document.getElementById('vp_setting_playrate')
         }
     },
     flush:function(){
@@ -292,9 +294,9 @@ $vp = {
         var src = this.list.get(i);
         if(src == undefined || typeof src.file != 'string')
             throw new TypeError('vp.js:设置的音频出错!');
-        var pfm = src.performer || '未知歌手',
-            title = src.title || decodeURIComponent(src.file.split('/').end()),
-            cover = src.cover || this.setting.cover;
+        var pfm = src.performer
+            title = src.title,
+            cover = src.cover;
         src.lrc == undefined ? this.lrc.parse(this.setting.lrc) : this.lrc.load(src.lrc);
         this.e.cover.style.background = 'url("'+cover+'")',  // 设置封面
         this.e.title.innerHTML = title+' / <span style="color:gray">'+pfm+'</span>',
@@ -354,15 +356,24 @@ $vp.e.player.onplay = function(){       // 开始播放时
     $vp.e.play.paused.style.display = 'none';
     $vp.timer = setInterval($vp.flush,500);
 }
-// SEEK
+// 切换时长
 $vp.e.timer.barBox.onclick = function(e){
     $vp.e.player.currentTime = (e.pageX / this.clientWidth) * $vp.e.player.duration;
 }
-// 调节
+// 调节音量、倍速
 $vp.e.setting.volume.onchange = function(){
     $vp.e.player.volume = this.value;
 }
-// BackDrop
+$vp.e.setting.rate.onclick = function(e){
+    var target = e.target , value;
+    if(target.tagName != 'R') return true;
+    this.children.rmClass('selected');
+    target.classList.add('selected');
+    value = target.getAttribute('value');
+    if(isNaN(value)) return true;
+    $vp.e.player.playbackRate = parseFloat(value);
+}
+// BackDrop全自动背景
 $vp.e.backdrop.onclick = function(){
     this.target.style.display = this.style.display = 'none';
 }