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

更新日期: 2019-07-11 阅读次数: 236 字数: 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年07月23日 大暑
2019年07月30日 非洲妇女日
2019年08月01日 八一建军节
2019年08月06日 国际电影节
2019年08月07日 七夕
2019年08月08日 立秋
2019年08月15日 日本投降日
2019年08月15日 中元节
2019年08月23日 处暑
2019年09月03日 抗日胜利纪念日
2019年09月08日 白露
2019年09月08日 国际扫盲日
查看更多节日