vue提示音_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 开发平台的合成效果更棒

选择的声优更加丰富。