vue+audio+java实现广播叫号功能

一、技术

1、后端java：

（1）阿里云语音合成服务javaSDK；
（2）springMVC、springboot。。。。随意

2、前端：

（1）vue：
（2）axios：发送POST请求；
（3）audio标签：播放音乐组件；
（4）element-ui：

二、思路

1、页面一：

（1）准备【table表格】显示待叫号人员信息，每行人员后面添加【叫号按钮】；

（2）点击【叫号按钮】将该行的【姓名等信息】通过【axios】发送POST请求，传入后端，
后端通过【阿里云语音生成服务的javaSDK】，将字符串生成待叫号语音文件。

（3）后端创建一个数组【static List<String>】，每次生成【语音文件】后，将【语音文件名称】添加到该List中。

2、页面二：

（1）仅用于播放叫号语音；
（2）准备一个audio组件，用于播放【语音文件】；
（3）vue的data里创建audio的:src变量【srcUrl】，用于后面语音文件名的替换；
（5）【创建vue变量，定时任务对象timer】，执行发送post请求的方法；
（6）vue的【mounted】里面给【timer】创建2s的定时任务,
发送post请求从后台【List】里获取一个【待播放语音文件名】；
（7）如果没有获取到，则不进行任何操作【直接return】，让【timer】定时任务持续执行去后台查询。
（8）如果获取到文件名，先将【timer】清除定时任务，再将文件名赋值给【srcUrl】；
再调用【audio.load()】【audio.play()】 播放【叫号语音】，播放结束会自动调用@ended里的方法；
（9）audio里面有个监听播放结束的属性onended,@ended="ended"，
每次播放结束，调用自定义的ended()方法，ended()方法重新给【timer】创建2s定时任务调用【POST请求方法】；
（10）over......

<div class="app" id="app">
    <template>
        <!--@ended="ended" 播放结束后调用的方法-->
        <audio v-show="false" ref="audio" controls="controls" @ended="ended">
            <source :src="srcUrl"  type="audio/mp3">
        </audio>
    </template>
</div>

//叫号语音播放方法
play(path){
    var that = this;
    //清除定时任务
    clearInterval(that.timer);
    //播放MP3
    var audio = this.$refs.audio;
    that.srcUrl= that.mp3RootUrl + path;
    console.debug("============开始播放：")
    //更改src后需要重新加载音乐
    audio.load()
    audio.play()
},
//POST请求获取叫号语音路径
getMp3() {
  var that = this;
    //TEST
    axios.post('/xxx/aaa/bbb', {headers: {'Content-Type': 'application/json'}}).then(function (response) {
        var result = response.data;
        if (result.success == true || result.success == 'true') {
            if (result.url== '' || typeof result.obj == 'undefined' || typeof result.url== null) {
                return;
            }
            //播放MP3
            that.play(result.url);
        } else {
            console.debug(result.msg);
        }
    }).catch(function (error) {
        console.log(error);
    });
},

//自定义的audio监听播放结束方法，每次播放停止自动调用
ended() {
    var that = this;
    //重新开始定时任务
    that.timer = setInterval(function() {
    	//Post请求
        that.getMp3();
    }, 2000);
},


//VUE的钩子方法，页面加载完后调用
mounted: function () {
            let that= this;
            that.$alert('开始叫号', '提示', {
                confirmButtonText: '确定',
                showClose: false,
                callback: function (action) {
                	//开始播放的提示语音
                    that.play("start.mp3");
                }
            });
        }

注：奇奇怪怪的bug。。。
1、bug1，谷歌等浏览器会阻止自动播放。。。（准备一个用户交互组件，按钮、提示框等，点击之后，调用play()开始播放）
2、bug2，浏览器打开播放页面，连上音响播放不了，耳机和电脑原声能播放。。。