VueJS 实现管理后台新订单的语音提醒

更新日期: 2019-07-11 阅读次数: 15436 字数: 267 分类: VueJS

逻辑

当新订单数量接口返回的数字大于之前缓存的值时,就播放提示音;并弹窗提醒。

实现代码

第一次用 js 调用音频播放,没想到这么简单。。。

new Vue({
  el: "#sidebar",

  data: {
    "new_order_count": 0,
  },

  mounted: function() {
    var audio = new Audio('/new_order.mp3');
    var that = this;

    this.fetch_data('new_order_count', '/new_order_count');

    setInterval(function() {
      $.ajax({
        method: "GET",
        url: "/new_order_count",
        data: {
        }
      }).done(function(msg) {
        if (msg.data > that.new_order_count) {
          // 播放提示音
          audio.play();
          // element ui 右上角提示窗
          that.$notify({
            title: '新订单',
            message: '您有新的订单待处理',
          });
        }
        that.new_order_count = msg.data;
      });
    }, 30000);
  }
}

新订单提示音的生成

在网上搜索 “新订单提示音下载” 基本都是收费的网站。而且,声音都不符合要求。

于是,找了一个“文本转音频”的小程序,将文字变成了语音,效果非常好,还可以选择声优。。。

新订单提示音

晚上,发现百度 AI 开发平台的合成效果更棒

http://ai.baidu.com/tech/speech/tts

选择的声优更加丰富。

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式