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