• 百度语音合成实现步骤

Step1:成为百度AI开放平台的开发者

在线语音合成

  1. // appKey = Va5yQRHl********LT0vuXV4
  2. // appSecret = 0rDSjzQ20XUj5i********PQSzr5pVw2
  3. https://openapi.baidu.com/oauth/2.0/token?grant_type=client_credentials&client_id=appKey4&client_secret=appSecret
  • 可以获取如下结果
  1. {
  2.     "access_token": "1.a6b7dbd428f731035f771b8d********.86400.1292922000-2346678-124328",
  3.     "expires_in": 2592000,
  4.     "refresh_token": "2.385d55f8615fdfd9edb7c4b********.604800.1293440400-2346678-124328",
  5.     "scope": "public audio_tts_post ...",
  6.     "session_key": "ANXxSNjwQDugf8615Onqeik********CdlLxn",
  7.     "session_secret": "248APxvxjCZ0VEC********aK4oZExMB",
  8. }
  • scope中含有audio_tts_post 表示有语音合成能力，没有该audio_tts_post 的token调用接口会返回502错误。
  • 在结果中可以看见 token和expires_in:在2592000秒（30天）后过期。

访问合成接口

  1. let access_token = 1.a6b7dbd428f731035f771b8d********.86400.1292922000-2346678-124328
  2. // 这是一个正常MP3的下载url
  3. // tex在实际开发过程中请urlencode2次
  4. https://tsn.baidu.com/text2audio?per=0&tex=你好&lan=zh&cuid=1&ctp=1&spd=4&tok=access_token

百度语音合成demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>语音测试</title>
  6. </head>
  7. <body>
  8. <div>
  9.     <input type="text" id="ttsText">
  10.     <input type="button" id="tts_btn" onclick="doTTS()" value="播放">
  11. </div>
  12. <div id="bdtts_div_id">
  13.     <audio id="tts_autio_id" autoplay="autoplay">
  14.         <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=9&text=播报内容" type="audio/mpeg">
  15.         <embed id="tts_embed_id" height="0" width="0" src="">
  16.     </audio>
  17. </div>
  18. </body>
  19. <script type="text/javascript">
  21.     function doTTS(){
  22.         var ttsDiv = document.getElementById('bdtts_div_id');
  23.         var ttsAudio = document.getElementById('tts_autio_id');
  24.         var ttsText = document.getElementById('ttsText').value;
  26.         ttsDiv.removeChild(ttsAudio);
  27.         var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
  28.        /* tsn是正式版 */
  29.         var token = 24.04cdb49de323c86d4ed169965b4f6083.2592000.1639813589.282335-25190934
  30.         var sss = '<source id="tts_source_id" src="https://tsn.baidu.com/text2audio?per=0&tex='+ttsText+'&lan=zh&cuid=1&ctp=1&spd=4&tok=token" type="audio/mpeg">';
  31.         /* tts是测试版 */
  32.         /* var sss = '<source id="tts_source_id" src="https://tts.baidu.com/text2audio?cuid=baike&spd=4&lan=ZH&ctp=1&pdt=301&vol=4&rate=32&per=5&tex='+ttsText+'" type="audio/mpeg">';*/
  33.         /* var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=Zh&ie=UTF-8&spd=4&text='+ttsText+'" type="audio/mpeg">';*/
  34.         var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
  35.         var au2 = '</audio>';
  36.         ttsDiv.innerHTML = au1 + sss + eee + au2;
  37.         ttsAudio = document.getElementById('tts_autio_id');
  38.         ttsAudio.play();
  39.     } 
  40. </script>
  41. </html>

Vue中实现百度语音播放demo

  • voicePlay.js 播报语音方法

    1. export function voicePlay(word) {
    2.   let url = "https://tts.baidu.com/text2audio?cuid=baike&spd=5&lan=ZH&ctp=1&pdt=301&vol=4&rate=32&per=0&tex=' " + encodeURI(word);
    3.   let n = new Audio(url);
    4.   n.src = url;
    5.   n.play();//播放阅读
    7.   return n
    8. }

  • 语音播报的混入代码 ```javascript / 播报语音方法 / import {voicePlay} from “@/utils/voicePlay” / websocket实时推送接口 / import {cancelVoiceWordMessage,voiceWordMessage} from ‘@/api/socket’

export const voicePlayerMiXin = { data() { return{ isOpenPlay: false, // 浏览器是否开启了语音播报

  1.         voicePlayObj: null, // audio对象
  2.         voiceWord: '', // 当前语音播报内容
  3.         voiceType: '', // 当前播报语音的类型 0 事件，1 联勤
  4.         voiceWordNew: '', // 最新推送的播报内容
  5.         voicePlayState: false, // 播报状态
  6.         voiceWordIsShow: false, // 播报文字是否显示
  7.         isPlaying: false, // 语音是否正在播报
  8.         eventId: '', // 事件id
  9.         orderId: '',// 工单id
  10.     }
  11. },
  12. watch:{
  13.       '$store.state.connectStatus'() {
  14.           this.initVoicePlayerSub()
  15.       },
  16.       // 监听区域ID变化
  17.       '$store.state.region'() {
  18.           this.initVoicePlayerSub()
  19.       },
  20.       //平台实时播报的内容
  21.       '$store.state.voiceWord'() {
  22.           let data = this.$store.state.voiceWord
  23.            // 第一条数据来了之后，就开始播报，
  24.           if (!this.isPlaying && this.isOpenPlay) {
  25.               this.isPlaying = true
  26.               this.voiceWord = ''
  27.               this.voiceWordIsShow = false
  28.               this.voicePlayMethod(data)
  29.           }
  30.       },
  31.   },
  32.   mounted() {
  33.       this.initVoicePlayerSub();
  34.   },
  35.   methods: {
  36.       // 监听用户鼠标悬浮事件，启用音频播放 浏览器默认是不播放音频的 需要事件启动
  37.       openBrowserPlayVoice() {
  38.           if (!this.isOpenPlay) {
  39.               this.resetVoice()
  40.               this.isOpenPlay = !this.isOpenPlay
  41.               voicePlay('-')
  42.           }
  43.       },
  44.       // 初始化语音播报的websocket连接
  45.       initVoicePlayerSub() {
  46.           cancelVoiceWordMessage()
  47.           if (this.$store.state.connectStatus) {
  48.               // 实时播报内容
  49.               voiceWordMessage(this.$store.state.region.regionCode)
  50.           }
  51.       },
  52.       // 播报语音
  53.       voicePlayMethod(data) {
  54.             let that = this
  55.             // 如果没有开启语音播报,就返回
  56.             if (!that.isOpenPlay) {
  57.                 that.resetVoice()
  58.                 return
  59.             }
  60.             // 正在播报，就返回
  61.             if (that.voicePlayState) {
  62.                 return
  63.             }
  64.             that.orderId = data.orderId
  65.             that.eventId = data.eventId
  67.             // 没有播报，就开始播报
  68.             if (!that.voicePlayState) {
  69.                 // 存储当前播报的类型和内容
  70.                 that.voiceType = data.tag
  71.                 that.eventId = data.eventId
  72.                 that.orderId = data.orderId
  73.                 that.voiceWord = data.desc
  75.                 // 显示播报弹窗
  76.                 that.voiceWordIsShow = true
  77.                 // 播报文字内容
  78.                 that.voicePlayObj = voicePlay(that.voiceWord)
  79.                 //当浏览器能够开始播放指定的音频/视频时，发生 canplay 事件。
  80.                 that.voicePlayObj.addEventListener("canplay", function () {   
  81.                     that.voicePlayState = true
  82.                 });
  83.                //当播放完一首歌曲时也会触发
  84.                 that.voicePlayObj.addEventListener("ended", function () {   
  85.                     // 修改为当前没有语音播报
  86.                     that.resetVoice()
  87.                 })
  88.             }
  89.       },
  90.        resetVoice() {
  91.           // 修改为当前没有语音播报
  92.           this.voicePlayState = false
  93.           this.isPlaying = false // 播报完，设置为false
  94.           this.voiceWord = ''
  95.           this.voiceWordIsShow = false
  96.       },
  97.        // 点击语音播报，根据播报类型，跳转到新窗口 0 事件，1 联勤工单
  98.       jumpNewWindow() {
  99.           if (this.voiceType === 1) {
  100.               let routeNameStr = this.$route.path
  101.               // 根据当前路由名称是否为 /eventProcessing， 如果是联勤联动页面，就直接显示工单详情，如果不是就跳转到联勤联动页面
  102.               if(routeNameStr === '/eventProcessing') {
  103.                   let orderId = this.orderId;
  104.                   this.curOrderIdName = this.orderId;
  105.                   if (orderId) {
  106.                       manageInfo({orderId}).then(res => {
  107.                           if (res.code == 0) {
  108.                               this.dialogVisible = true;
  109.                               this.$refs.workOrderDetails_.initDetailes();
  110.                           }
  111.                       })
  112.                   }
  113.               } else {
  114.                   this.$router.push({
  115.                       name: 'eventProcessing',
  116.                       params: {
  117.                         orderId: this.orderId
  118.                       }
  119.                   });
  120.               }
  121.               return
  122.           }
  123.           if (this.voiceType === 0) {
  124.               this.$store.state.curClickEventId = this.eventId
  125.               let routeNameStr = this.$route.path
  126.               // 根据当前路由名称是否为 /eventCenter， 如果是事件中心，就调用这个方法this.clickEventItem(null)
  127.               if(routeNameStr === '/eventCenter') {
  128.                   this.clickEventItem(null)
  130.               } else {
  131.                   // 当前路由名称不是 /eventCenter， 就跳转到 事件中心，显示事件详情
  132.                   this.$router.push({path: '/eventCenter'})
  133.               }
  134.           }
  135.       },
  136.   },
  137.   destroyed() {
  138.         this.voicePlayObj = null
  139.         /* 断开webscoket */
  140.         cancelVoiceWordMessage()
  141.    },

}

  2. - 语音播报文字弹窗组件
  3. ```javascript
  4. <template>
  5.         <div v-if="voiceWordIsShow" class="flex flex-center">
  6.             <div @click="jumpNewWindow" class="voiceWord flex flex-center"
  7.                  style="z-index: 9999">
  8.                 <i class="iconfont iconfont_">&#xe697;</i>
  9.                 <span>{{voiceWord}}</span>
  10.             </div>
  11.         </div>
  12. </template>
  14. <script>
  15.     export default {
  16.         name: "voicePlay",
  17.         props: {
  18.             voiceWordIsShow: {
  19.                 type: Boolean,
  20.                 default: false
  21.             },
  22.             voiceWord: {
  23.                 type: String,
  24.                 default: ''
  25.             }
  26.         },
  27.         data() {
  28.             return {
  30.             }
  31.         },
  32.         methods: {
  33.             jumpNewWindow() {
  34.                 this.$emit('jumpNewWindow')
  35.             }
  36.         }
  37.     }
  38. </script>
  40. <style lang="less" scoped>
  41.     .voiceWord {
  42.         position: absolute;
  43.         top: calc(var(--num88) * var(--num));
  44.         height: calc(var(--num40) * var(--num));
  45.         line-height: calc(var(--num40) * var(--num));
  46.         border-width: calc(var(--num1) * var(--num));
  47.         border-style: solid;
  48.         border-radius: calc(var(--num4) * var(--num));
  49.         border-color: @primary5;
  50.         background: @fill5;
  51.     }
  53.     .voiceWord span {
  54.         margin: 0 calc(var(--num18) * var(--num)) 0 calc(var(--num11) * var(--num));
  55.         font-size: calc(var(--num14) * var(--num));
  56.     }
  58.     .voiceWord i {
  59.         margin-left: calc(var(--num18) * var(--num));
  60.     }
  61.     .iconfont_ {
  62.         color: @yellow1 !important;
  63.         font-size: calc(var(--num22) * var(--num)) !important;
  64.     }
  65. </style>

使用语音播报组件

  1. <template>
  2.   <div  @mouseover.stop="openBrowserPlayVoice" >
  3.       <!--语音播报组件-->
  4.       <voicePlayComp 
  5.           @jumpNewWindow="jumpNewWindow" 
  6.           :voiceWordIsShow="voiceWordIsShow"
  7.           :voiceWord="voiceWord"/>
  8.   </div> 
  9. </template>
  10. <script>
  11.    import {voicePlayerMiXin} from '../../mixins/voicePlayerMiXin';
  12.    export default {
  13.        data() {
  14.            return{}
  15.        },
  16.        mixins:[ voicePlayerMiXin ],
  17.        mounted(){
  19.        },
  20.        methods:{
  22.        }
  23.    }         
  24. </script>