当前位置：首页 > VUE

vue实现音频叫号

2026-02-17 22:32:08VUE

实现音频叫号的Vue组件

在Vue中实现音频叫号功能需要结合音频播放和动态数据更新。以下是实现方案：

安装依赖 需要安装howler.js库处理音频播放：

npm install howler

基础组件实现

vue实现音频叫号

<template>
  <div class="audio-announcement">
    <button @click="playAnnouncement">播放叫号</button>
    <div>当前号码：{{ currentNumber }}</div>
  </div>
</template>

<script>
import { Howl } from 'howler'

export default {
  data() {
    return {
      currentNumber: 'A001',
      numberQueue: ['A001', 'A002', 'A003'],
      sound: null
    }
  },
  methods: {
    initSound() {
      this.sound = new Howl({
        src: ['/path/to/audio-file.mp3'],
        onend: () => {
          this.nextNumber()
        }
      })
    },
    playAnnouncement() {
      if (!this.sound) this.initSound()

      const announcement = `请${this.currentNumber}号到窗口办理`
      // 这里可以添加TTS语音合成或播放预录语音
      this.sound.play()
    },
    nextNumber() {
      if (this.numberQueue.length > 0) {
        this.currentNumber = this.numberQueue.shift()
      }
    }
  },
  beforeDestroy() {
    if (this.sound) {
      this.sound.unload()
    }
  }
}
</script>

实现文字转语音(TTS)

浏览器自带Web Speech API可以实现TTS功能：

speak(text) {
  if ('speechSynthesis' in window) {
    const utterance = new SpeechSynthesisUtterance(text)
    utterance.lang = 'zh-CN' // 设置中文语音
    speechSynthesis.speak(utterance)
  } else {
    console.error('浏览器不支持语音合成')
  }
}

排队系统集成

实际叫号系统通常需要与后台服务集成：

vue实现音频叫号

async fetchQueueData() {
  try {
    const response = await axios.get('/api/queue')
    this.numberQueue = response.data.queue
    this.currentNumber = response.data.current
  } catch (error) {
    console.error('获取队列数据失败', error)
  }
}

自动叫号功能

添加定时器实现自动叫号：

startAutoAnnouncement() {
  this.autoInterval = setInterval(() => {
    if (this.numberQueue.length > 0) {
      this.playAnnouncement()
    }
  }, 5000) // 每5秒叫一次号
},
stopAutoAnnouncement() {
  clearInterval(this.autoInterval)
}

音频文件处理

为提高兼容性，建议准备多种格式的音频文件：

this.sound = new Howl({
  src: [
    '/audio/announcement.mp3',
    '/audio/announcement.ogg',
    '/audio/announcement.wav'
  ],
  html5: true // 强制HTML5 Audio
})