从数据加载封面

README.md

@@ -36,6 +36,7 @@ export default class 插件名 {
 - [ ] 对方撤回的并不删除, 但不再分发
 - [ ] 阅后既焚开关, 全频道不保留也不分发记录
 - [ ] mark 标记的记录保留, 其它自动丢弃
+- [ ] 非活跃状态下提示音
 
 音乐频道
 - [x] 每个设备存储自己的列表
@@ -99,6 +100,23 @@ export default class 插件名 {
 - https://www.npmjs.com/package/vite
 
 备用代码片段
+
+```javascript
+//import jsmediatags from 'jsmediatags/dist/jsmediatags.min.js'
+//list.forEach(async item => {
+//  const blob = new Blob([item.arrayBuffer], { type: item.type })
+//  jsmediatags.read(blob, {
+//    onSuccess: function (tag) {
+//      console.log(tag)
+//      console.log(tag.tags.title)
+//    },
+//    onError: function (error) {
+//      console.log(error);
+//    }
+//  })
+//})
+```
+
 ```html
     <script type="module">
 

package.json

@@ -20,9 +20,16 @@
     "windicss": "^3.5.6"
   },
   "dependencies": {
+    "buffer": "^6.0.3",
     "express": "^4.18.2",
     "express-ws": "^5.0.2",
+    "iconv-lite": "^0.6.3",
+    "iconv-lite-umd": "^0.6.10",
     "idb-keyval": "^6.2.1",
-    "node-turn": "^0.0.6"
+    "jsmediatags": "^3.9.7",
+    "music-metadata": "^8.1.4",
+    "music-metadata-browser": "^2.5.10",
+    "node-turn": "^0.0.6",
+    "process": "^0.11.10"
   }
 }

src/main.js

@@ -5,6 +5,12 @@ import MusicList from './music.js'
 import ClientList from './client.js'
 import Chat from './chat.js'
 
+import { Buffer } from "buffer"
+import process from "process"
+window.Buffer = Buffer
+window.process = process
+import { parseBlob } from 'music-metadata-browser'
+
 // 缓冲分片发送
 const CHUNK_SIZE = 1024 * 64  // 默认每个块的大小为128KB
 const THRESHOLD = 1024 * 1024 // 默认缓冲区的阈值为1MB
@@ -23,9 +29,19 @@ const database = new IndexedDB('musicDatabase', 1)
 await database.store('musicObjectStore') // 音乐(为什么会用这么丑的格式呢)
 
 // 读取本地音乐列表并标识为缓存状态(本地缓存)
-const list = (await database.getAll('musicObjectStore')).map(item => {
+const list = await Promise.all((await database.getAll('musicObjectStore')).map(async item => {
+  if (!item.picture) {
+    const blob = new Blob([item.arrayBuffer], { type: item.type })
+    const metadata = await parseBlob(blob)
+    const picture = metadata.common.picture?.[0]
+    if (picture) {
+      const format = picture.format
+      const data = picture.data
+      item.picture = `data:${format};base64,${Buffer.from(data).toString('base64')}`
+    }
+  }
   return { save: true, ...item }
-})
+}))
 
 // 读取本地用户名(本地缓存)
 const name = localStorage.getItem('username') ?? '匿'

src/music.js

@@ -1,4 +1,4 @@
-import { Span, Button, List, ListItem, UploadMusic, createElement } from './weigets.js'
+import { Img, Span, Button, List, ListItem, UploadMusic, createElement } from './weigets.js'
 
 export default class MusicList {
     constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }) {
@@ -21,7 +21,6 @@ export default class MusicList {
         //this.audio.addEventListener('error', event => {
         //    console.error('音乐播放器错误:', event)
         //})
-
         this.ul = List({
             classList: ['music-list'],
             style: {
@@ -152,6 +151,10 @@ export default class MusicList {
             id: item.id,
             classList: item.arrayBuffer ? ['cache'] : [],
             children: [
+                ...(item.picture ? [Img({
+                    src: item.picture,
+                    style: { width: '2em', height: '2em', borderRadius: '.25em' }
+                })] : []),
                 Span({
                     title: `${item.name} - ${bytesToSize(item.size)} - ${item.type}`,
                     textContent: `${item.name} - ${bytesToSize(item.size)}`,

src/weigets.js

@@ -37,6 +37,10 @@ export function Button(options) {
     }, 'button')
 }
 
+export function Img(options) {
+    return createElement(options, 'img')
+}
+
 export function Input(options) {
     return createElement(options, 'input')
 }