diff --git a/src/music.js b/src/music.js index 35ace6a..85d276a 100644 --- a/src/music.js +++ b/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 = `