桌面模式下快捷键，以及PlayerBar音量指示器

src/components/AudioPlayer.vue

@@ -244,6 +244,7 @@
         <!-- Place holder for iOS -->
         <div style="height: 5px" v-if="$q.platform.is.ios" />
 
+        <!-- 标题 -->
         <div class="column text-center non-selectable ">
           <Scrollable class="full-width" :stop="hide" name="audioTitle">
             <span class="audio-name relative-position q-px-md">{{ currentPlayingFile.title }}</span>
@@ -407,9 +408,16 @@ export default {
     this.histroyCheckIntervalId = setInterval(() => {
       this.onUpdatePlayingStatus()
     }, 60 * 1000) // 每隔一段时间更新一次播放记录
+
+    if (this.$q.platform.is.desktop) {
+      window.addEventListener('keydown', this.onKeyDown);
+    }
   },
 
   beforeDestroy() {
+    if (this.$q.platform.is.desktop) {
+      window.removeEventListener('keydown', this.onKeyDown);
+    }
     clearInterval(this.histroyCheckIntervalId)
 
     // 原本是想要在关闭窗口时，更新最后一次播放历史
@@ -855,7 +863,32 @@ export default {
       if (!this.enableVisualizer) return; // 尚未开启音频可视化选项，无法使用音效均衡器
       console.warn("flip cover");
       this.isFlipCover = !this.isFlipCover;
-    }
+    },
+
+    onKeyDown(event) {
+      // console.warn("key down code = ", event.code, ", activeElement is ", document.activeElement); 
+      if (document.activeElement.tagName === "INPUT") return; // 禁止文本编辑的按键响应
+      if (this.playWorkId === 0) return; // 尚未播放任何作品时，禁止快捷键操作
+      const volumeStep = 0.04; // volume is between [0.0, 1.0]
+
+      switch(event.code) {
+        case "Space": this.togglePlaying(); break;
+        case "ArrowLeft": this.rewind(true); break;
+        case "ArrowRight": this.forward(true); break;
+
+        case "PageDown": this.nextTrack(); break;
+        case "PageUp": this.previousTrack(); break;
+
+        case "ArrowUp": 
+          this.volume = Math.min(1.0, this.volume + volumeStep); break;
+        case "ArrowDown": 
+          this.volume = Math.max(0.0, this.volume - volumeStep); break;
+        default: return; // return now
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+    },
   },
 
   created() {

src/components/PlayerBar.vue

@@ -14,7 +14,10 @@
       color="primary"
       :class="{}"
     >
+      <!--默认进度条-->
       <div class="simple-progress" :class="$q.dark.isActive ? 'simple-progress-dark' : 'simple-progress-light'" :style="progressBarStyle"></div>
+
+      <!--拖拽时的进度条-->
       <div
         class="new-progress row justify-end"
         :class="{hideNewProgress: !isPanning}"
@@ -29,6 +32,12 @@
           </div>
         </span>
       </div>
+
+      <!--音量指示器-->
+      <div class="volumeIndicator" :style="{
+        height: `${volume*100}%`,
+        width: showVolumeIndicator ? `${volumeIndicatorWidth}px` : 0,
+      }"></div>
       <q-item 
         style="padding: 0px 5px;"
         class="col non-selectable"
@@ -149,6 +158,7 @@ export default {
       'playing',
       'currentTime',
       'duration',
+      'volume',
       'swapSeekButton',
       'rewindSeekTime',
       'forwardSeekTime'
@@ -186,13 +196,28 @@ export default {
     }
   },
 
+  watch: {
+    volume() {
+      if (this.volumeDelayHideTimeoutId > 0) clearTimeout(this.volumeDelayHideTimeoutId);
+      this.showVolumeIndicator = true;
+      this.volumeDelayHideTimeoutId = setTimeout(() => {
+        this.showVolumeIndicator = false;
+      }, this.volumeDelayMills);
+    }
+  },
+
   data() {
     return {
       OpState,
       state: OpState.idle, // state == OpState.horize 表示进入进度调整模式
       vertTriggerPixels: 15, // 向上触发像素距离
       horizeTriggerPixels: 10, // 左右触发像素距离
 
+      showVolumeIndicator: false,
+      volumeIndicatorWidth: 8, // 音量指示器宽度 pixel
+      volumeDelayMills: 1000, // 音量指示器显示时间
+      volumeDelayHideTimeoutId: 0, // timeout id
+
       startClientX: 0,
       startClientY: 0,
       startCurrentTime: 0,
@@ -355,6 +380,17 @@ export default {
   height: 100%;
   /* width: 100%; */
   opacity: 1;
+  transition: 0.5s;
+}
+
+.volumeIndicator {
+  position: absolute;
+  background: rgba($warning, $alpha: 0.8);
+  height: 100%;
+  right: 0;
+  bottom: 0;
+  border-radius: 3px 3px 0 0;
+  transition: 0.5s;
 }
 
 .simple-progress-dark {
@@ -439,4 +475,5 @@ export default {
   white-space: nowrap;
 }
 
+
 </style>