百度智能云之语音技术（自动播报语音）

一、需求

商城平台在收到客户付款成功后自动语音播报“系统到账1000元”。

二、解决思路

1、客户支付成功，后台生成订单；

2、后台推送一条消息到客户端；

3、客户端收到消息后调用第三方接口将文字转成语音文件播放。

三、实践（本案例使用百度语音技术）

1、申请百度智能云账号

2、进入语音技术模块创建一个应用（文档地址）

3、换取token

// appKey = Va5yQRHl********LT0vuXV4
// appSecret = 0rDSjzQ20XUj5i********PQSzr5pVw2

https://openapi.baidu.com/oauth/2.0/token?grant_type=client_credentials&client_id=Va5yQRHl********LT0vuXV4&client_secret=0rDSjzQ20XUj5i********PQSzr5pVw2

{
    "access_token": "1.a6b7dbd428f731035f771b8d********.86400.1292922000-2346678-124328",
    "expires_in": 2592000,
    "refresh_token": "2.385d55f8615fdfd9edb7c4b********.604800.1293440400-2346678-124328",
    "scope": "public audio_tts_post ...",
    "session_key": "ANXxSNjwQDugf8615Onqeik********CdlLxn",
    "session_secret": "248APxvxjCZ0VEC********aK4oZExMB",
}

3、访问合成接口

http://tsn.baidu.com/text2audio?lan=zh&ctp=1&cuid=abcdxxx&tok=1.a6b7dbd428f731035f771b8d****.86400.1292922000-2346678-124328&tex=%e7%99%be%e5%ba%a6%e4%bd%a0%e5%a5%bd&vol=9&per=0&spd=5&pit=5&aue=3
// 这是一个正常MP3的下载url
// tex在实际开发过程中请urlencode2次

4、测试客户端截图

5、测试客户端代码（本案例使用uniapp）

<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="button-sp-area">
                <button type="default" @click="changeAudio()">切换</button>
                <button type="primary" @click="play()">播放</button>
                <button type="primary" @click="pause()">暂停</button>
                <button type="warn" @click="stop()">停止</button>
            </view>
            <view>
                <view class="uni-title">测试文字</view>
                <view>
                    <input v-model="readText" class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
                </view>
                <view class="uni-title">语速</view>
                <view>
                    <slider v-model="spd" min="0" max="15" show-value @change="spdSliderChange" />
                </view>
                <view class="uni-title">音调</view>
                <view>
                    <slider v-model="pit" min="0" max="15" show-value @change="pitSliderChange" />
                </view>
                <view class="uni-title">音量</view>
                <view>
                    <slider v-model="vol" min="0" max="15" show-value @change="volSliderChange" />
                </view>

                <view class="uni-title">发音人</view>
                <view class="uni-list">
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            当前选择
                        </view>
                        <view class="uni-list-cell-db">
                            <picker @change="bindPickerChange" :value="index" range-key="lable" :range="array">
                                <view class="uni-input">{{array[index].lable}}</view>
                            </picker>
                        </view>
                    </view>
                </view>
                <button type="primary" @click="loadBaiduAudio2()">测试百度语音合成</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                innerAudioContext: null,
                readText: '支付宝到账一千元',
                access_token: '00.ae748a58ea3160facbdf707c923b5309.2592000.1574926792.282335-16656017',
                spd: 5,
                pit: 5,
                vol: 5,
                per: 0,
                array: [{
                        value: 0,
                        lable: '普通女声'
                    },
                    {
                        value: 1,
                        lable: '普通男生'
                    },
                    {
                        value: 3,
                        lable: '情感合成-度逍遥'
                    },
                    {
                        value: 4,
                        lable: '情感合成-度丫丫'
                    }
                ],
                index: 0
            }
        },
        onLoad() {
            const innerAudioContext = uni.createInnerAudioContext();
            innerAudioContext.autoplay = true;
            innerAudioContext.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3';
            innerAudioContext.pause();
            innerAudioContext.onPlay(() => {
                console.log('开始播放');
            });
            innerAudioContext.onError((res) => {
                console.log(res.errMsg);
                console.log(res.errCode);
            });
            this.innerAudioContext = innerAudioContext;
        },
        methods: {
            changeAudio: function() {
                this.innerAudioContext.src = 'http://m10.music.126.net/20191029152112/53749fba54e8903c0daa20d7c723f3d6/ymusic/374b/8502/4d09/798b85bbef3192e6de5675159073e941.mp3';
            },
            play: function() {
                this.innerAudioContext.play();
            },
            pause: function() {
                this.innerAudioContext.pause();
            },
            stop: function() {
                this.innerAudioContext.stop();
            },
            // GET方式
            loadBaiduAudio2: function() {
                this.innerAudioContext.src = 'http://tsn.baidu.com/text2audio?tex=' + encodeURIComponent(encodeURIComponent(this.readText)) +
                    '&tok=' + this.access_token + '&cuid=test_001&ctp=1&lan=zh&spd=' +
                    this.spd + '&pit=' + this.pit + '&vol=' + this.vol + '&per=' + this.per
            },
            // POST方式
            loadBaiduAudio: function() {
                uni.request({
                    url: 'http://tsn.baidu.com/text2audio',
                    method: 'POST',
                    data: {
                        // 必填    合成的文本，使用UTF-8编码。小于2048个中文字或者英文数字。（文本在百度服务器内转换为GBK后，长度必须小于4096字节）
                        tex: encodeURIComponent(encodeURIComponent(this.readText)),
                        // 必填    开放平台获取到的开发者access_token
                        tok: this.access_token,
                        // 必填    用户唯一标识，用来计算UV值。建议填写能区分用户的机器 MAC 地址或 IMEI 码，长度为60字符以内
                        cuid: 'test_001',
                        // 必填    客户端类型选择，web端填写固定值1
                        ctp: 1,
                        // 必填    固定值zh。语言选择,目前只有中英文混合模式，填写固定值zh
                        lan: 'zh',
                        // 选填    语速，取值0-15，默认为5中语速
                        spd: 5,
                        // 选填    音调，取值0-15，默认为5中语调
                        pit: 5,
                        // 选填    音量，取值0-15，默认为5中音量
                        vol: 5,
                        // 选填    发音人选择, 0为普通女声，1为普通男生，3为情感合成-度逍遥，4为情感合成-度丫丫，默认为普通女声
                        per: 0,
                        // 选填    3为mp3格式(默认)； 4为pcm-16k；5为pcm-8k；6为wav（内容同pcm-16k）; 注意aue=4或者6是语音识别要求的格式，但是音频内容不是语音识别要求的自然人发音，所以识别效果会受影响。
                        aue: 3
                    },
                    header: {},
                    success: (res) => {
                        // this.innerAudioContext.src = res.data;
                    }
                });
            },
            bindPickerChange: function(e) {
                console.log('picker发送选择改变，携带值为', e.target.value)
                this.index = e.target.value
                this.per = this.array[e.target.value].value || 0;
            },
            spdSliderChange: function(e) {
                console.log('value 发生变化：' + e.detail.value);
                this.spd = e.detail.value;
            },
            pitSliderChange: function(e) {
                console.log('value 发生变化：' + e.detail.value);
                this.pit = e.detail.value;
            },
            volSliderChange: function(e) {
                console.log('value 发生变化：' + e.detail.value);
                this.vol = e.detail.value;
            }
        }
    }
</script>

<style>
    button {
        margin-top: 30upx;
        margin-bottom: 30upx;
    }

    .button-sp-area {
        margin: 0 auto;
        width: 60%;
    }

    .mini-btn {
        margin-right: 10upx;
    }
</style>