百度智能雲之語音技術（自動播報語音）

一、需求

商城平台在收到客戶付款成功后自動語音播報“系統到賬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>