webrtc/public/music.js

170 lines
5.4 KiB
JavaScript

import { Button, List, ListItem } from './weigets.js'
export default class MusicList {
constructor({ list = [], EventListeners = {} }) {
this.ul = List({})
this.ul.classList.add('music-list')
this.EventListeners = EventListeners
this.list = []
list.forEach(item => this.add(item)) // 列表逐一添加
document.body.appendChild(this.ul) // 元素加入页面
// 添加音乐播放器
this.audio = new Audio()
this.audio.addEventListener('ended', () => {
this.next()
})
//this.audio.addEventListener('timeupdate', () => {
// console.log(this.audio.currentTime)
//})
// 本地添加音乐按钮
const input = document.createElement('input')
input.type = 'file'
input.multiple = true
input.accept = 'audio/*'
input.onchange = event => {
for (const file of event.target.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 })
}
reader.readAsArrayBuffer(file)
}
}
//// 写入 css 样式到 head
//const style = document.createElement('style')
//style.innerText = `
// ul.music-list {
// width: 600px;
// height: 100%;
// overflow: auto;
// background-color: #ffffff;
// box-shadow: 0 0 15px #ccc;
// border-radius: 5px;
// padding: 1rem 2rem;
// margin: 1rem;
// }
// ul.music-list > li {
// list-style: none;
// padding: 10px;
// border-bottom: 1px solid #ccc;
// cursor: pointer;
// }
// ul.music-list > li:hover {
// background-color: #ddd;
// }
// ul.music-list > li > button {
// margin-right: 10px;
// }
// ul.music-list > li > button:hover {
// background-color: #ccc;
// }
// ul.music-list > li
// `
//document.head.appendChild(style)
document.body.appendChild(input)
}
// 添加回调函数
on(name, callback) {
this.EventListeners[name] = callback
}
add(item) {
this.list.push(item)
this.ul.appendChild(ListItem({
id: item.id,
innerText: `${item.name} - ${item.size} - ${item.type} - ${item.id}`,
children: [
Button({
innerText: '播放',
onclick: event => {
event.stopPropagation()
this.play(item)
}
}),
Button({
innerText: '停止',
onclick: event => {
event.stopPropagation()
this.stop(item.id)
}
}),
Button({
innerText: '移除',
onclick: event => {
event.stopPropagation()
this.remove(item)
}
}),
Button({
innerText: '喜欢',
onclick: event => {
event.stopPropagation()
this.like(item)
}
}),
Button({
innerText: '禁止',
onclick: event => {
event.stopPropagation()
// BAN
}
})
]
}))
// 执行回调函数
if (this.EventListeners['add']) {
this.EventListeners['add'](item)
}
}
remove(item) {
this.ul.removeChild(this.ul.querySelector(`#${item.id}`))
this.stop() // 停止播放
// 执行回调函数
if (this.EventListeners['remove']) {
this.EventListeners['remove'](item)
}
}
async load(item) {
// 执行回调函数(应当异步)
if (this.EventListeners['load']) {
await this.EventListeners['load'](item)
}
}
async play(item) {
if (!item.arrayBuffer) {
console.log('等待载入缓存:', item)
await this.load(item)
console.log('缓存载入完成:', item)
}
this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type }))
this.audio.play()
// 执行回调函数
if (this.EventListeners['play']) {
this.EventListeners['play'](item)
}
}
stop() {
this.audio.pause()
this.audio.src = ''
// 执行回调函数
if (this.EventListeners['stop']) {
this.EventListeners['stop']()
}
}
like(item) {
if (!item.arrayBuffer) {
console.log('载入缓存:', item)
return
} else {
console.log('移除缓存:', item)
return
}
}
next() { }
prev() { }
}