从数据加载封面

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')
 }