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 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式