webrtc/public/music.js

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() { }
}