vue 语音提醒

最新推荐文章于 2024-04-01 16:42:54 发布

Vue酱

最新推荐文章于 2024-04-01 16:42:54 发布

阅读量611

点赞数

分类专栏： Vue 文章标签： vue.js 语音识别

本文链接：https://blog.youkuaiyun.com/VueJiang/article/details/120218180

版权

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种前端实现，通过设置定时轮询从服务器获取最新消息，一旦接收到新数据，就播放预设的MP3文件。使用了Vue.js的生命周期钩子和WebSocket技术来实现实时通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理: 轮询或websocket接收服务器返回的数据,当请求有新的消息数据返回时,我们就播放一段MP3

<script>
import music from '@/assert/music.mp3'  //引入音乐文件
mounted(){
//轮询获取服务器数据
     window.setInterval(() => {
     this.onHaveInform()
   }, 10_000);
},
methods:{
//请求
    async onHaveInform() {
      let res = await postData(`url`);
      if (res.type === 'success') {
        if (res.data.new != 0) {
          this.playMusic()  //有新数据,播放音乐
        }
        this.inform = res.data.new
      }
    },
    playMusic() {
	const audio = new Audio(music);
	audio.addEventListener('canplaythrough', () => {
		audio.play();
	});
   }
},

</script>