UI 解耦
This commit is contained in:
parent
eb744f66fa
commit
1acd926d8f
|
|
@ -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 mediaStreamDestination = audioContext.createMediaStreamDestination()
|
||||
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
|
||||
})
|
||||
// 更新列表
|
||||
|
||||
//// 传输音乐文件
|
||||
//const audioContext = new AudioContext()
|
||||
//audioContext.decodeAudioData(arrayBuffer, async audioBuffer => {
|
||||
// // 将音乐流添加到 RTCPeerConnection
|
||||
// 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)
|
||||
// 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
|
||||
//})
|
||||
}
|
||||
reader.readAsArrayBuffer(file)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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() { }
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
Loading…
Reference in New Issue