UI 解耦

public/index.html

@@ -13,13 +13,26 @@
     </div>
     <script type="module">
         import IndexedDB from './database.js'
+        import MusicList from './music.js'
         const musicObjectStore = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
         await musicObjectStore.open()
 
+        // 音乐列表
+        const musicList = new MusicList()
+        console.log('musicList:', musicList)
+        //musicList.on('add', async item => {
+        //    console.log('musicList add:', item)
+        //    const { name, size, type, lastModified, lastModifiedDate, arrayBuffer } = item
+        //    const id = Date.now()
+        //    // 存储到 IndexDB
+        //    await musicObjectStore.add({ id, name, size, type, lastModified, lastModifiedDate, arrayBuffer })
+        //})
+
         // webRTC 传递音乐(分别传输文件和操作事件能更流畅)
         const music = async function () {
             const clients = [] // 客户端列表
 
+            // 对端设备
             const ul = document.createElement('ul')
             document.body.appendChild(ul)
             const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
@@ -119,18 +132,16 @@
                             mediaStreamDestination.stream.getAudioTracks().forEach(function (track) {
                                 pc.addTrack(track, mediaStreamDestination.stream)
                             })
-                            // 播放音乐
+                            // 播放音乐(远程)
                             const audioSource = audioContext.createBufferSource()
                             audioSource.buffer = audioBuffer
                             audioSource.connect(mediaStreamDestination)
                             audioSource.start()
-                            // 创建本地音频播放器
+                            // 播放音乐(本地)
                             const audioPlayer = new Audio()
                             audioPlayer.srcObject = mediaStreamDestination.stream
                             audioPlayer.play()
                             // 创建SDP offer并将其设置为本地描述, 发送给远程端
-                            console.log('创建SDP offer并将其设置为本地描述, 发送给远程端')
-                            console.log('clients:', clients)
                             const id = clients[0].id
                             await pc.setLocalDescription(await pc.createOffer())     // 设置本地描述为 offer
                             ws.send(JSON.stringify({ id, offer: pc.localDescription }))  // 发送给远程终端 offer
@@ -161,30 +172,32 @@
                     const arrayBuffer = reader.result
                     // 存储到 IndexDB
                     musicObjectStore.add({ id, name, size, type, lastModified, lastModifiedDate, arrayBuffer })
-                    // 传输音乐文件
+                    // 更新列表
-                    const audioContext = new AudioContext()
+
-                    audioContext.decodeAudioData(arrayBuffer, async audioBuffer => {
+                    //// 传输音乐文件
-                        // 将音乐流添加到 RTCPeerConnection
+                    //const audioContext = new AudioContext()
-                        const mediaStreamDestination = audioContext.createMediaStreamDestination()
+                    //audioContext.decodeAudioData(arrayBuffer, async audioBuffer => {
-                        mediaStreamDestination.stream.getAudioTracks().forEach(function (track) {
+                    //    // 将音乐流添加到 RTCPeerConnection
-                            pc.addTrack(track, mediaStreamDestination.stream)
+                    //    const mediaStreamDestination = audioContext.createMediaStreamDestination()
-                        })
+                    //    mediaStreamDestination.stream.getAudioTracks().forEach(function (track) {
-                        // 播放音乐
+                    //        pc.addTrack(track, mediaStreamDestination.stream)
-                        const audioSource = audioContext.createBufferSource()
+                    //    })
-                        audioSource.buffer = audioBuffer
+                    //    // 播放音乐
-                        audioSource.connect(mediaStreamDestination)
+                    //    const audioSource = audioContext.createBufferSource()
-                        audioSource.start()
+                    //    audioSource.buffer = audioBuffer
-                        // 创建本地音频播放器
+                    //    audioSource.connect(mediaStreamDestination)
-                        const audioPlayer = new Audio()
+                    //    audioSource.start()
-                        audioPlayer.srcObject = mediaStreamDestination.stream
+                    //    // 创建本地音频播放器
-                        audioPlayer.play()
+                    //    const audioPlayer = new Audio()
-                        // 创建SDP offer并将其设置为本地描述, 发送给远程端
+                    //    audioPlayer.srcObject = mediaStreamDestination.stream
-                        console.log('创建SDP offer并将其设置为本地描述, 发送给远程端')
+                    //    audioPlayer.play()
-                        console.log('clients:', clients)
+                    //    // 创建SDP offer并将其设置为本地描述, 发送给远程端
-                        const id = clients[0].id
+                    //    console.log('创建SDP offer并将其设置为本地描述, 发送给远程端')
-                        await pc.setLocalDescription(await pc.createOffer())     // 设置本地描述为 offer
+                    //    console.log('clients:', clients)
-                        ws.send(JSON.stringify({ id, offer: pc.localDescription }))  // 发送给远程终端 offer
+                    //    const id = clients[0].id
-                    })
+                    //    await pc.setLocalDescription(await pc.createOffer())     // 设置本地描述为 offer
+                    //    ws.send(JSON.stringify({ id, offer: pc.localDescription }))  // 发送给远程终端 offer
+                    //})
                 }
                 reader.readAsArrayBuffer(file)
             })

public/music.js

@@ -0,0 +1,91 @@
+import IndexedDB from './database.js'
+import { Button, List, ListItem } from './weigets.js'
+
+export default class MusicList {
+    constructor() {
+        this.ul = List({})
+        this.store = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
+        this.store.open().then(() => {
+            this.store.getAll().then((data) => {
+                console.log(data)
+                data.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 => {
+            console.log('event.target.files', event.target.files)
+            for (const file of event.target.files) {
+                const id = 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)
+            }
+        }
+        document.body.appendChild(input)
+    }
+    add(item) {
+        this.store.add(item)
+        const li = ListItem({
+            id: item.id,
+            innerText: `${item.name} - ${item.size} - ${item.type} - ${item.id}`,
+            onclick: event => {
+                event.stopPropagation()
+                this.play(item.id)
+            },
+            children: [
+                Button({
+                    innerText: '播放',
+                    onclick: event => {
+                        event.stopPropagation()
+                        this.play(item.id)
+                    }
+                }),
+                Button({
+                    innerText: '停止',
+                    onclick: event => {
+                        event.stopPropagation()
+                        this.stop(item.id)
+                    }
+                }),
+                Button({
+                    innerText: '移除',
+                    onclick: event => {
+                        event.stopPropagation()
+                        this.delete(item.id)
+                    }
+                })
+            ]
+        })
+        this.ul.appendChild(li)
+    }
+    delete(id) {
+        // 如果是正在播放的歌曲，停止播放
+        this.stop(id)
+        const li = this.ul.querySelector(`li[data-id="${id}"]`)
+        this.ul.removeChild(li)
+        this.store.delete(id)
+    }
+    play(id) { }
+    stop(id) { }
+    next() { }
+    prev() { }
+}

public/weigets.js

@@ -0,0 +1,21 @@
+export function Button({ innerText, onclick }) {
+    const button = document.createElement('button')
+    button.innerText = innerText
+    button.onclick = onclick
+    return button
+}
+
+export function List({ children = [] }) {
+    const ul = document.createElement('ul')
+    children.forEach(child => ul.appendChild(child))
+    return ul
+}
+
+export function ListItem({ innerText, onclick, id, children = [] }) {
+    const li = document.createElement('li')
+    li.innerText = innerText
+    li.onclick = onclick
+    li.id = id
+    children.forEach(child => li.appendChild(child))
+    return li
+}