合并组件

src/music.js

@@ -12,8 +12,6 @@ export default class MusicList {
         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)
@@ -30,37 +28,34 @@ export default class MusicList {
 
         // 收起到右上角, 音乐播放器基于浮窗定位, 不再占用页面空间
         const element = createElement({
-            textContent: '音乐',
+            //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
+                this.ul,
+                UploadMusic({
+                    style: { width: '20rem', height: '5rem', margin: '1rem 2rem' },
+                    onchange: files => {
+                        for (const file of files) {
+                            const id = 'music' + Date.now()
+                            const { name, size, type } = file
+                            const reader = new FileReader()
+                            reader.onload = async event => {
+                                const arrayBuffer = event.target.result
+                                this.add({ id, name, size, type, arrayBuffer })  // 添加到列表(默认并不存储)
+                                this.like({ id, name, size, type, arrayBuffer }) // 本地缓存的必要条件是喜欢
+                            }
+                            reader.readAsArrayBuffer(file)
+                        }
+                    }
+                })
             ]
         })
         document.body.appendChild(element)
 
-        // 本地添加音乐按钮
-        document.body.appendChild(UploadMusic({
-            style: { width: '20rem', height: '5rem', margin: '1rem 2rem' },
-            onchange: files => {
-                for (const file of files) {
-                    const id = 'music' + Date.now()
-                    const { name, size, type } = file
-                    const reader = new FileReader()
-                    reader.onload = async event => {
-                        const arrayBuffer = event.target.result
-                        this.add({ id, name, size, type, arrayBuffer })  // 添加到列表(默认并不存储)
-                        this.like({ id, name, size, type, arrayBuffer }) // 本地缓存的必要条件是喜欢
-                    }
-                    reader.readAsArrayBuffer(file)
-                }
-            }
-        }))
-
-
         // 写入 css 样式到 head
         const style = document.createElement('style')
         style.innerText = `