// 音頻實(shí)時(shí)播放
class AudioPlayer {
  mediaSource: MediaSource // 媒體資源
  audio: HTMLAudioElement // 音頻元素
  audioContext: AudioContext // 音頻上下文
  sourceBuffer?: SourceBuffer // 音頻數(shù)據(jù)緩沖區(qū)
  cacheBuffers: ArrayBuffer[] = [] // 音頻數(shù)據(jù)列表
  pauseTimer: number | null = null // 暫停定時(shí)器

  constructor() {
    const AudioContext = window.AudioContext
    this.audioContext = new AudioContext()

    this.mediaSource = new MediaSource()

    this.audio = new Audio()
    this.audio.src = URL.createObjectURL(this.mediaSource)

    this.audioContextConnect()
    this.listenMedisSource()
  }

  // 連接音頻上下文
  private audioContextConnect() {
    const source = this.audioContext.createMediaElementSource(this.audio)
    source.connect(this.audioContext.destination)
  }

  // 監(jiān)聽媒體資源
  private listenMedisSource() {
    this.mediaSource.addEventListener('sourceopen', () => {
      if (this.sourceBuffer) return

      this.sourceBuffer = this.mediaSource.addSourceBuffer('audio/mpeg')

      this.sourceBuffer.addEventListener('update', () => {
        if (this.cacheBuffers.length && !this.sourceBuffer?.updating) {
          const cacheBuffer = this.cacheBuffers.shift()!
          this.sourceBuffer?.appendBuffer(cacheBuffer)
        }

        this.pauseAudio()
      })
    })
  }

  // 暫停音頻
  private pauseAudio() {
    const neePlayTime = this.sourceBuffer!.timestampOffset - this.audio.currentTime || 0

    this.pauseTimer && clearTimeout(this.pauseTimer)
    // 播放完成5秒后還沒有新的音頻流過來，則暫停音頻播放
    this.pauseTimer = setTimeout(() => this.audio.pause(), neePlayTime * 1000 + 5000)
  }

  private playAudio() {
    // 為防止下一段音頻流傳輸過來時(shí)，上一段音頻已經(jīng)播放完畢，造成音頻卡頓現(xiàn)象，
    // 這里做了1秒的延時(shí)，可根據(jù)實(shí)際情況修正
    setTimeout(() => {
      if (this.audio.paused) {
        try {
          this.audio.play()
        } catch (e) {
          this.playAudio()
        }
      }
    }, 1000)
  }

  // 接收音頻數(shù)據(jù)
  public receiveAudioData(audioData: ArrayBuffer) {
    if (!audioData.byteLength) return

    if (this.sourceBuffer?.updating) {
      this.cacheBuffers.push(audioData)
    } else {
      this.sourceBuffer?.appendBuffer(audioData)
    }

    this.playAudio()
  }
}

export default AudioPlayer

const BASE_URL = import.meta.env.VITE_WS_BASE_URL

type ObserverType<T> = {
  type: string
  callback: (data: T) => void
}

class SocketConnect<T> {
  private url: string
  public ws: WebSocket | undefined //websocket實(shí)例
  private observers: ObserverType<T>[] = [] //消息訂閱者列表
  private waitingMessages: string[] = [] //待執(zhí)行命令列表
  private openCb?: () => void

  constructor(url = '', openCb?: () => void) {
    this.url = BASE_URL + url
    if (openCb) this.openCb = openCb
    this.connect()
  }

  //websocket連接
  connect() {
    this.ws = new WebSocket(this.url)

    this.ws.onopen = () => {
      this.openCb && this.openCb()
      // 發(fā)送所有等待發(fā)送的信息
      const length = this.waitingMessages.length
      for (let i = 0; i < length; ++i) {
        const message = this.waitingMessages.shift()
        this.send(message)
      }
    }

    this.ws.onclose = (event) => {
      console.log('webSocket closed:', event)
    }

    this.ws.onerror = (error) => {
      console.log('webSocket error:', error)
    }

    this.ws.onmessage = (event: MessageEvent) => {
      this.observers.forEach((observer) => {
        observer.callback(event.data)
      })
    }
  }

  //發(fā)送信息
  send(message?: string) {
    if (message) {
      //發(fā)送信息時(shí)若websocket還未連接，則將信息放入待發(fā)送信息中等待連接成功后發(fā)送
      if (this.onReady() !== WebSocket.OPEN) {
        this.waitingMessages.push(message)
        return this
      }

      this.ws && this.ws.send(message)
    }

    return this
  }

  //訂閱webSocket信息
  observe(callback: (data: T) => void, type = 'all') {
    const observer = { type, callback }
    this.observers.push(observer)

    return observer
  }

  //取消訂閱信息
  cancelObserve(cancelObserver: ObserverType<T>) {
    this.observers.forEach((observer, index) => {
      if (cancelObserver === observer) {
        this.observers.splice(index, 1)
      }
    })
  }

  // 關(guān)閉websocket
  close() {
    this.ws && this.ws.close()
  }

  // websocket連接狀態(tài)
  onReady() {
    return this.ws && this.ws.readyState
  }
}

export default SocketConnect

// 從十六進(jìn)制字符串轉(zhuǎn)換為字節(jié)數(shù)組
export function hexStringToByteArray(hexString: string): Uint8Array {
  const byteArray: number[] = []
  for (let i = 0; i < hexString.length; i += 2) {
    byteArray.push(parseInt(hexString.substring(i, i + 2), 16))
  }
  return new Uint8Array(byteArray)
}

// 從字節(jié)數(shù)組轉(zhuǎn)換為 ArrayBuffer
export function byteArrayToArrayBuffer(byteArray: Uint8Array): ArrayBuffer {
  const arrayBuffer = new ArrayBuffer(byteArray.length)
  const uint8Array = new Uint8Array(arrayBuffer)
  uint8Array.set(byteArray)
  return arrayBuffer
}

// 從十六進(jìn)制字符串轉(zhuǎn)換為 ArrayBuffer
export function hexStringToArrayBuffer(hexString: string): ArrayBuffer {
  return byteArrayToArrayBuffer(hexStringToByteArray(hexString))
}

const ws = new SocketConnect<string>('/audio')

const audioPlayer = new AudioPlayer()

ws.observe((data) => {
    console.log('receivebytes:'+new Date().getTime())
    // 接收到的16進(jìn)制字符串?dāng)?shù)據(jù)轉(zhuǎn)換為ArrayBuffer傳遞給audioPlay
    const arrayBuffer = hexStringToArrayBuffer(data)
    audioPlayer.receiveAudioData(arrayBuffer)
})