百度语音合成---前端vue项目

 

 

☞：官方文档

☞：网页示例

 

具体步骤：

　　1.通过 socket.io 接收后端传过来的数据。

　　2.判断是否在播放声音。  如果没有则直接获取百度 token 播放声音

　　3.如果有，则存入数组。声音播放结束后，播放数组中的数据并且移除将要播放的数据

 

项目代码（注意，代码有删减仅供参考）：

<template>
    <div>
        <div class="app">
            <div id="bdtts_div_id">
                <audio ref="audio" id="tts_autio_id" :src="audioSrc" autoplay="autoplay" @canplay="playing()" @ended="ending()">
                </audio>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                audioSrc: '',
                orderArr: [],
                isPlay: false
            }
        },
        methods: {
            playing() {
                // 开始播放声音
            },
            ending() {
　　　　　　　　　　// 声音播放结束
                console.log('audio end');
                
                var arr = this.orderArr;
                
                console.log(this.orderArr)
                
                if (arr.length > 0) {
                    this.isPlay = true;
                    var data = arr[0];
                    
                    this.orderArr.splice(0,1);
                    
                        this.axios.get('baidu', {
                            params: { //请求参数
                            }
                        }).then((res) => {

                            var str = ''
                            if('wx' == data.type) {
                                str = '微信支付'
                            } else if('zfb' == data.type) {
                                str = '支付宝支付'
                            }

                            str = str + data.message + '元';

                            this.audioSrc = 'http://tsn.baidu.com/text2audio?lan=zh&ctp=1&cuid=15378723&tok=' + res.data.access_token + '&tex=' + str + '&vol=15&per=0&spd=5&pit=5&aue=3';
                            this.$refs.audio.play()
                        })
                    
                } else {
                    this.isPlay = false;
                }
                
            }
        },
        created: function() {

            this.$options.sockets.chat = (data) => {
                console.log(data);
　　　　　　　　　　// data:  {id: 4, message: 44, type: "wx", order: "v3TYbgt1ea1551428506775"}

                if(data.id == this.$route.query.id) {

                    /**
                     * 1.添加进数组中
                     * 2.判断是否在播报
                     * 3.如果没有在播报---播放提醒
                     * 4.如果有在播放---播放结束之后，移除已播放过的内容
                     */

                    if(this.isPlay == false) {
                        
                        this.isPlay = true;
                        
                        this.axios.get('baidu', {
                            params: { //请求参数
                            }
                        }).then((res) => {

                            var str = ''
                            if('wx' == data.type) {
                                str = '微信支付'
                            } else if('zfb' == data.type) {
                                str = '支付宝支付'
                            }

                            str = str + data.message + '元';

                            this.audioSrc = 'http://tsn.baidu.com/text2audio?lan=zh&ctp=1&cuid=15378723&tok=' + res.data.access_token + '&tex=' + str + '&vol=15&per=0&spd=5&pit=5&aue=3';
                            this.$refs.audio.play()
                        })
                        
                    } else {
                        
                        console.log('存入数据')
                        this.orderArr.push(data);
                    }

                }
            }

        }
    }
</script>

<style scoped>
    .app {
        margin-top: 200px!important;
        margin-left: 33px!important;
    }
</style>