From 1cdfc924d2079616887fecfa389c574c08f4c03d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Thu, 19 Oct 2023 00:14:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E8=B5=B7=E9=9F=B3=E4=B9=90=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/music.js | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/music.js b/src/music.js
index fa48643..35ace6a 100644
--- a/src/music.js
+++ b/src/music.js
@@ -1,4 +1,4 @@
-import { Span, Button, List, ListItem, UploadMusic } from './weigets.js'
+import { Span, Button, List, ListItem, UploadMusic, createElement } from './weigets.js'
 
 export default class MusicList {
     constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }) {
@@ -7,10 +7,17 @@ export default class MusicList {
         this.EventListeners = EventListeners
         this.list = []
         list.forEach(item => this.add(item)) // 列表逐一添加
-        document.body.appendChild(this.ul)   // 元素加入页面
 
         // 添加音乐播放器
         this.audio = new Audio()
+        this.audio.autoplay = true
+        this.audio.controls = true
+        this.audio.style.width = '100%'
+        this.audio.style.height = '5rem'
+        this.audio.style.margin = '1rem 2rem'
+        this.audio.addEventListener('play', () => {
+            this.event.onplay(this.playing)
+        })
         this.audio.addEventListener('ended', () => {
             this.next()
         })
@@ -20,6 +27,21 @@ export default class MusicList {
         //this.audio.addEventListener('error', event => {
         //    console.error('音乐播放器错误:', event)
         //})
+
+        // 收起到右上角, 音乐播放器基于浮窗定位, 不再占用页面空间
+        const element = createElement({
+            textContent: '音乐',
+            style: { position: 'fixed', top: '5rem', right: '1rem', backgroundColor: '#eee', padding: '.5rem', borderRadius: '1rem', cursor: 'pointer' },
+            onclick: event => {
+                this.ul.classList.toggle('disable')
+            },
+            children: [
+                this.audio,
+                this.ul
+            ]
+        })
+        document.body.appendChild(element)
+
         // 本地添加音乐按钮
         document.body.appendChild(UploadMusic({
             style: { width: '20rem', height: '5rem', margin: '1rem 2rem' },