From 3c02e2dc82644f36badcfe2daf20fb1574d53f03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A7=89?= Date: Tue, 24 Oct 2023 04:55:22 +0800 Subject: [PATCH] =?UTF-8?q?=E6=92=AD=E6=94=BE=E6=97=B6=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=B0=81=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/music.js | 112 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) diff --git a/src/music.js b/src/music.js index 630b8e2..9055620 100644 --- a/src/music.js +++ b/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()