webrtc/public/music.js

180 lines
6.0 KiB
JavaScript
Raw Normal View History

2023-09-28 15:20:02 +08:00
import { Button, List, ListItem } from './weigets.js'
export default class MusicList {
2023-09-29 21:21:26 +08:00
constructor({ list = [], EventListeners = {} }) {
2023-09-28 15:20:02 +08:00
this.ul = List({})
2023-09-30 20:20:57 +08:00
this.ul.classList.add('music-list')
2023-09-29 21:21:26 +08:00
this.EventListeners = EventListeners
2023-09-29 17:31:37 +08:00
this.list = []
2023-09-29 21:21:26 +08:00
list.forEach(item => this.add(item)) // 列表逐一添加
document.body.appendChild(this.ul) // 元素加入页面
2023-09-28 15:20:02 +08:00
// 添加音乐播放器
this.audio = new Audio()
this.audio.addEventListener('ended', () => {
this.next()
})
2023-09-28 17:59:23 +08:00
//this.audio.addEventListener('timeupdate', () => {
// console.log(this.audio.currentTime)
//})
2023-09-29 21:21:26 +08:00
// 本地添加音乐按钮
2023-09-28 15:20:02 +08:00
const input = document.createElement('input')
input.type = 'file'
input.multiple = true
input.accept = 'audio/*'
input.onchange = event => {
for (const file of event.target.files) {
2023-09-28 18:15:12 +08:00
const id = 'music' + Date.now()
2023-09-28 15:20:02 +08:00
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)
}
}
2023-10-01 20:09:28 +08:00
// 写入 css 样式到 head
2023-10-01 03:57:01 +08:00
const style = document.createElement('style')
style.innerText = `
ul.music-list > li {
cursor: pointer;
}
2023-10-01 19:59:22 +08:00
ul.music-list > li.cache::marker {
color: #02be08;
font-size: 1em;
contentx: '⚡';
}
ul.music-list > li.disable {
color: #999999;
}
2023-10-01 03:57:01 +08:00
ul.music-list > li > button {
margin-left: 10px;
border: none;
cursor: pointer;
}
ul.music-list > li > button:hover {
background-color: #ccc;
}
`
document.head.appendChild(style)
2023-09-28 15:20:02 +08:00
document.body.appendChild(input)
}
2023-09-29 21:21:26 +08:00
// 添加回调函数
on(name, callback) {
this.EventListeners[name] = callback
}
add(item) {
2023-10-01 03:20:16 +08:00
// 将字节转换为可读的单位
const bytesToSize = bytes => {
if (bytes === 0) return '0 B'
const k = 1024
const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
}
2023-09-29 21:21:26 +08:00
this.list.push(item)
2023-10-01 19:59:22 +08:00
console.log('添加音乐:', item)
2023-09-29 21:21:26 +08:00
this.ul.appendChild(ListItem({
2023-09-28 15:20:02 +08:00
id: item.id,
2023-10-01 19:59:22 +08:00
classList: item.arrayBuffer ? ['cache'] : [],
2023-10-01 03:20:16 +08:00
innerText: `${item.name} - ${bytesToSize(item.size)}`,
2023-09-28 15:20:02 +08:00
children: [
Button({
innerText: '播放',
onclick: event => {
event.stopPropagation()
2023-10-01 03:42:12 +08:00
if (event.target.dataset.play === 'play') {
event.target.dataset.play = 'stop'
event.target.innerText = '播放'
this.stop()
} else {
event.target.dataset.play = 'play'
event.target.innerText = '停止'
this.play(item)
}
2023-09-28 15:20:02 +08:00
}
}),
Button({
innerText: '移除',
onclick: event => {
event.stopPropagation()
2023-09-29 21:21:26 +08:00
this.remove(item)
2023-09-28 15:20:02 +08:00
}
2023-09-29 18:14:18 +08:00
}),
Button({
innerText: '喜欢',
onclick: event => {
event.stopPropagation()
2023-09-29 18:36:05 +08:00
this.like(item)
}
}),
Button({
innerText: '禁止',
onclick: event => {
event.stopPropagation()
2023-10-01 03:42:12 +08:00
if (event.target.dataset.ban === 'ban') {
event.target.dataset.ban = 'unban'
event.target.innerText = '禁止'
} else {
event.target.dataset.ban = 'ban'
event.target.innerText = '解禁'
this.stop()
}
2023-09-29 18:14:18 +08:00
}
2023-09-28 15:20:02 +08:00
})
]
2023-09-29 21:21:26 +08:00
}))
2023-09-30 18:45:19 +08:00
// 执行回调函数
if (this.EventListeners['add']) {
this.EventListeners['add'](item)
}
2023-09-29 17:31:37 +08:00
}
2023-09-29 21:21:26 +08:00
remove(item) {
2023-10-01 11:28:35 +08:00
this.ul.querySelector(`#${item.id}`)?.remove()
2023-09-28 17:59:23 +08:00
this.stop() // 停止播放
2023-09-29 21:21:26 +08:00
// 执行回调函数
if (this.EventListeners['remove']) {
this.EventListeners['remove'](item)
}
2023-09-28 17:59:23 +08:00
}
2023-09-30 00:13:30 +08:00
async load(item) {
// 执行回调函数(应当异步)
if (this.EventListeners['load']) {
await this.EventListeners['load'](item)
}
}
2023-09-29 20:20:00 +08:00
async play(item) {
if (!item.arrayBuffer) {
2023-09-30 17:35:38 +08:00
console.log('等待载入缓存:', item)
2023-09-30 00:13:30 +08:00
await this.load(item)
2023-09-30 17:35:38 +08:00
console.log('缓存载入完成:', item)
2023-09-29 20:20:00 +08:00
}
2023-09-28 17:59:23 +08:00
this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type }))
this.audio.play()
2023-09-29 21:21:26 +08:00
// 执行回调函数
if (this.EventListeners['play']) {
this.EventListeners['play'](item)
}
2023-09-28 17:59:23 +08:00
}
stop() {
this.audio.pause()
this.audio.src = ''
2023-09-29 21:21:26 +08:00
// 执行回调函数
if (this.EventListeners['stop']) {
this.EventListeners['stop']()
}
2023-09-28 15:20:02 +08:00
}
2023-09-29 18:36:05 +08:00
like(item) {
if (!item.arrayBuffer) {
console.log('载入缓存:', item)
return
} else {
console.log('移除缓存:', item)
return
}
}
2023-09-28 15:20:02 +08:00
next() { }
prev() { }
}