收起音乐播放器

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