完成歌曲扫描

src/css/app.scss

@@ -245,7 +245,7 @@
       }
 
       .thumb {
-        width: 8%;
+        // width: 0;
         height: 3px;
         background: #58ffdf;
       }

src/index.html

@@ -39,12 +39,12 @@
     <div class="song-box">
       <div class="preview">
         <div class="album">
-          <img src="/images/disk.png">
+          <img :src="preview.cover || '/images/disk.png'">
         </div>
         <div class="info">
-          <strong>情是何物</strong>
+          <strong :text="preview.name"></strong>
-          <cite>周深</cite>
+          <cite :text="preview.artist || '未知歌手'"></cite>
-          <p>经典咏流传第三季 第7期</p>
+          <p :text="preview.album || '未知专辑'"></p>
         </div>
 
         <span class="total" :text="list.size()"></span>
@@ -53,12 +53,14 @@
         <wc-scroll class="list">
           <section 
             class="item" 
+            @click="prviewSong(it, i)"
+            @dblclick="playSong(it, i)"
             :class="{on: curr === i}" 
             :for="i it in list">
             <span class="idx" :text="i + 1"></span>
             <span class="name text-ell" :text="it.name"></span>
-            <span class="artist text-ell" :text="it.artist"></span>
+            <span class="artist text-ell" :text="it.artist || '未知歌手'"></span>
-            <span class="duration" :text="it.duration"></span>
+            <span class="duration" :text="it.duration | time"></span>
           </section>
         </wc-scroll>
       </div>
@@ -67,17 +69,17 @@
 
   <div class="play-bar">
     <section class="stat-bar">
-      <span class="time">00:13</span>
+      <span class="time" :text="song.time | time"></span>
       <div class="progress">
-        <span class="thumb"></span>
+        <span class="thumb" :css="{width: ~~((100 * song.time) / song.duration) + '%'}"></span>
       </div>
-      <span class="time">05:31</span>
+      <span class="time" :text="song.duration | time"></span>
     </section>
 
     <section class="ctrl-box">
       <div class="info">
-        <strong>情是何物</strong>
+        <strong :text="song.name"></strong>
-        <cite>周深</cite>
+        <cite :text="song.artist || '未知歌手'"></cite>
       </div>
 
       <div class="play-btn">

src/js/app.js

@@ -6,17 +6,34 @@
 
 import Anot from '/js/lib/anot.js'
 import '/js/lib/scroll/index.js'
+
+import Keyboard from '/js/lib/keyboard/index.js'
 import app from '/js/lib/socket.js'
 
 // const id3 = require('jsmediatags')
 const id3 = require('music-metadata')
 
+var kb = new Keyboard()
+
 Anot({
   $id: 'app',
   state: {
     isplaying: true,
     playmode: 1,
     mute: false,
+    preview: {
+      name: '',
+      album: '',
+      artist: '',
+      cover: ''
+    },
+    song: {
+      name: '',
+      artist: '',
+      src: '',
+      time: 0,
+      duration: 0
+    },
     curr: 2,
     list: []
   },
@@ -29,10 +46,25 @@ Anot({
       let { album, artist, title, duration } = await this.getID3(it.path)
 
       it.name = title || it.name
-      it.artist = artist || '未知歌手'
+      it.artist = artist
       it.album = album
-      it.duration = Anot.filters.time(duration)
+      it.duration = duration
     }
+
+    kb.on(['left'], ev => {
+      var time = this.song.time - 5
+      if (time < 0) {
+        time = 0
+      }
+      this.song.time = time
+    })
+    kb.on(['right'], ev => {
+      var time = this.song.time + 5
+      if (time > this.song.duration) {
+        time = this.song.duration
+      }
+      this.song.time = time
+    })
   },
   methods: {
     play() {
@@ -56,6 +88,19 @@ Anot({
         } = res
         return { album, artist, title, duration: ~~duration }
       })
+    },
+    prviewSong(it, i) {
+      var { album, artist, name, cover } = it
+      Object.assign(this.preview, { album, artist, name, cover })
+    },
+    playSong(it, i) {
+      //
+      this.curr = i
+      this.song.name = it.name
+      this.song.artist = it.artist
+      this.song.duration = it.duration
+      this.song.src = `file://${it.path}`
+      this.song.time = 0
     }
   }
 })

src/js/lib/keyboard/key.dict.js

@@ -0,0 +1 @@
+export const MULTI_KEYS={ctrl:1,shift:1,alt:1,meta:1};export const MULTI_KEY_CODES=[16,17,18,91];export const KEY_DICT={0:48,1:49,2:50,3:51,4:52,5:53,6:54,7:55,8:56,9:57,"'":222,"*":106,"+":107,",":188,"-":[109,189],".":[110,190],"/":[111,191],";":186,"=":187,"[":219,"\\":220,"]":221,"`":192,a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,y:89,z:90,enter:13,shift:16,ctrl:17,alt:18,space:32,meta:91,tab:9,backspace:8,numlock:12,capslock:20,esc:27,menu:93,insert:45,delete:46,pagedown:34,pageup:33,home:36,end:35,up:38,down:40,left:37,right:39,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123,f13:124,f14:125,f15:126,print:124,screen:125,pause:126};