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

更新日期: 2019-07-11 阅读次数: 907 字数: 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

选择的声优更加丰富。

爱评论不评论

近期节日

2019年09月18日 "九一八"事变纪念日
2019年09月20日 国际爱牙日
2019年09月21日 国际和平日
2019年09月22日 世界无车日
2019年09月23日 秋分
2019年09月23日 国际聋人节
2019年09月27日 世界旅游日
2019年10月01日 国庆节
2019年10月04日 世界动物日
2019年10月07日 重阳节
2019年10月08日 寒露
2019年10月09日 世界邮政日
查看更多节日