当前位置：首页 > VUE

vue实现音频叫号

2026-03-09 11:11:34VUE

Vue实现音频叫号功能

实现音频叫号功能需要结合Vue.js的前端交互和Web Audio API或第三方音频库。以下是具体实现方案：

音频播放基础实现

使用HTML5的<audio>元素配合Vue数据绑定：

<template>
  <audio ref="audioPlayer" :src="currentAudioSrc" autoplay></audio>
  <button @click="playNumber(123)">叫号123</button>
</template>

<script>
export default {
  data() {
    return {
      currentAudioSrc: ''
    }
  },
  methods: {
    playNumber(number) {
      const audioUrls = this.generateAudioUrls(number)
      this.playSequence(audioUrls)
    },
    generateAudioUrls(number) {
      return number.toString().split('').map(digit => 
        `/audio/digits/${digit}.mp3`)
    },
    async playSequence(urls) {
      for (const url of urls) {
        this.currentAudioSrc = url
        await new Promise(resolve => {
          this.$refs.audioPlayer.onended = resolve
        })
      }
    }
  }
}
</script>

使用Web Audio API实现更复杂控制

// 在Vue组件中
methods: {
  initAudioContext() {
    this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
  },
  async playNumberWithWebAudio(number) {
    if (!this.audioContext) this.initAudioContext()

    const digits = number.toString().split('')
    for (const digit of digits) {
      const response = await fetch(`/audio/digits/${digit}.mp3`)
      const arrayBuffer = await response.arrayBuffer()
      const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer)

      const source = this.audioContext.createBufferSource()
      source.buffer = audioBuffer
      source.connect(this.audioContext.destination)
      source.start()

      await new Promise(resolve => {
        source.onended = resolve
      })
    }
  }
}

使用第三方语音合成

接入百度语音合成等第三方API：

methods: {
  async playWithTTS(text) {
    const ttsUrl = `https://tts-api.example.com/synthesize?text=${encodeURIComponent(text)}`
    const audio = new Audio(ttsUrl)
    await audio.play()
  }
}

队列管理系统实现

对于叫号系统需要管理排队顺序：

data() {
  return {
    queue: [],
    isPlaying: false
  }
},
methods: {
  addToQueue(number) {
    this.queue.push(number)
    if (!this.isPlaying) {
      this.processQueue()
    }
  },
  async processQueue() {
    while (this.queue.length > 0) {
      this.isPlaying = true
      const nextNumber = this.queue.shift()
      await this.playNumber(nextNumber)
    }
    this.isPlaying = false
  }
}

可视化叫号显示

结合音频播放实现可视化显示：

<template>
  <div class="display">
    <div class="current-number">{{ currentNumber }}</div>
    <div class="queue-list">
      <div v-for="(num, index) in queue" :key="index">{{ num }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: null,
      queue: []
    }
  },
  methods: {
    async callNumber(number) {
      this.currentNumber = number
      await this.playNumber(number)
      this.currentNumber = null
    }
  }
}
</script>