播放时添加封面

src/music.js

@@ -38,6 +38,29 @@ export default class MusicList {
         this.list = []
         list.forEach(item => this.add(item)) // 列表逐一添加
 
+        this.封面 = Img({
+            src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
+            style: {
+                width: '6rem',
+                height: '6rem',
+                borderRadius: '1rem',
+                backgroundColor: '#eee',
+                border: 'none',
+            },
+            onerror: event => {
+                // img 标签错误时, 替换为1x1透明gif图片
+                event.target.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+            }
+        })
+        this.标题 = Span({
+            style: {
+                fontSize: '1.2rem',
+                fontWeight: 'bold',
+                margin: '0 0 .5rem 0',
+            },
+            textContent: '音乐名',
+        })
+
         // 收起到右上角, 音乐播放器基于浮窗定位, 不再占用页面空间
         const element = createElement({
             style: {
@@ -83,6 +106,61 @@ export default class MusicList {
                 }
             },
             children: [
+                createElement({
+                    style: {
+                        display: 'flex', alignItems: 'center',
+                        justifyContent: 'space-between', flexShrink: 0,
+                        marginBottom: '.5rem',
+                    },
+                    children: [
+                        this.封面,
+                        createElement({
+                            style: {
+                                display: 'flex', flexDirection: 'column',
+                                alignItems: 'center', justifyContent: 'center',
+                                flex: 1, padding: '0 .5rem',
+                            },
+                            children: [
+                                this.标题,
+                                createElement({
+                                    style: {
+                                        display: 'flex', alignItems: 'center',
+                                        justifyContent: 'center', flex: 1,
+                                    },
+                                    children: [
+                                        Button({
+                                            textContent: '上一首',
+                                            onclick: event => {
+                                                event.stopPropagation()
+                                                this.prev()
+                                            }
+                                        }),
+                                        Button({
+                                            textContent: '暂停',
+                                            onclick: event => {
+                                                event.stopPropagation()
+                                                if (this.audio.paused) {
+                                                    this.audio.play()
+                                                    event.target.textContent = '暂停'
+                                                } else {
+                                                    this.audio.pause()
+                                                    event.target.textContent = '开始'
+                                                }
+                                            }
+                                        }),
+                                        Button({
+                                            textContent: '下一首',
+                                            onclick: event => {
+                                                event.stopPropagation()
+                                                this.next()
+                                            }
+                                        }),
+                                    ]
+                                }),
+                            ]
+                        }),
+                    ]
+                }),
                 this.audio,
                 this.ul,
                 UploadMusic({
@@ -269,6 +347,40 @@ export default class MusicList {
                 })
             }
         } else {
+            this.标题.textContent = item.name // 替换标题
+            this.封面.src = item.picture      // 替换封面图像
+
+            //// item.picture 是一个base64编码的图片, 获取图片的宽高和格式
+            //const [width, height, format] = (() => {
+            //    const [, base64] = item.picture.split(',')
+            //    const binary = atob(base64)
+            //    const bytes = new Uint8Array(binary.length)
+            //    for (let i = 0; i < binary.length; i++) {
+            //        bytes[i] = binary.charCodeAt(i)
+            //    }
+            //    const blob = new Blob([bytes.buffer], { type: item.type })
+            //    const url = URL.createObjectURL(blob)
+            //    const img = new Image()
+            //    img.src = url
+            //    return new Promise(resolve => {
+            //        img.onload = () => {
+            //            resolve([img.width, img.height, img.src.split('.').pop()])
+            //        }
+            //    })
+            //})
+            //console.log('封面信息:', width, height, format)
+
+            // 替换浏览器媒体信息(使系统通知栏显示歌曲信息)
+            if ('mediaSession' in navigator) {
+                navigator.mediaSession.metadata = new MediaMetadata({
+                    title: item.name,
+                    artist: '艺术家名',
+                    album: '专辑名',
+                    artwork: [
+                        { src: item.picture, sizes: '96x96', type: 'image/png' },
+                    ]
+                });
+            }
             // 本地缓存直接播放
             this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type }))
             this.audio.play()