[js常用]百度將文字轉化為語音實例

-Advertisement-

嗷嗷方便的文字轉語音,不過用的時候記得到百度語音上申請key,免費的.之前在網路上看到有人寫了一部分,自己豐富下,以後用也方便 ...

嗷嗷方便的文字轉語音,不過用的時候記得到百度語音上申請key,免費的.之前在網路上看到有人寫了一部分,自己豐富下,以後用也方便

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>百度語音測試</title>
  </head>
  <body>
    <div>
      <input type="text" id="ttsText">
      <input type="button" id="tts_btn" onclick="doTTS()" value="獲取新的語音">
      <input type="button" id="tts_btns" onclick="zanting()" value="暫停">
      <input type="button" id="tts_btns" onclick="jixu()" value="繼續/播放">
       <input type="button" id="tts_btns" onclick="shichang()" value="時長">
    </div>
    <div id="bdtts_div_id">
      <audio id="tts_autio_id" >
        <source id="tts_source_id" src="https://tsn.baidu.com/text2audio?tex=我喜歡你&lan=zh&per=4&cuid=1&ctp=1&tok=24.71726d18e11bf62415c11e3c2aa88121.2592000.1544946462.282335-14837008" type="audio/mpeg">
        <embed id="tts_embed_id" height="0" width="0" src="">
      </audio>
    </div>
  </body>
</html>
<script>

    function zanting() {
        var ttsAudio = document.getElementById('tts_autio_id');
        ttsAudio.pause();
    }
    function jixu() {
        var ttsAudio = document.getElementById('tts_autio_id');
        ttsAudio.play();
    }

    function shichang() {
          var ttsAudio = document.getElementById('tts_autio_id');
          alert(ttsAudio.duration);
    }

        function doTTS(){
      var ttsDiv = document.getElementById('bdtts_div_id');
      var ttsAudio = document.getElementById('tts_autio_id');
      var ttsText = document.getElementById('ttsText').value;
      
      // 這樣為什麼替換不了播放內容
      /*var ssrcc = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=10&text='+ttsText;
      document.getElementById('tts_source_id').src=ssrcc;*/
      
      // 這樣就可實現播放內容的替換了
      ttsDiv.removeChild(ttsAudio);
      var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
      var sss = '<source id="tts_source_id" src="https://tsn.baidu.com/text2audio?tex='+ttsText+'&lan=zh&per=4&cuid=1&ctp=1&tok=24.71726d18e11bf62415c11e3c2aa88121.2592000.1544946462.282335-14837008" type="audio/mpeg">';
      var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
      var au2 = '</audio>';
      ttsDiv.innerHTML = au1 + sss + eee + au2;
      
      ttsAudio = document.getElementById('tts_autio_id');
      
      ttsAudio.play();
    }




</script>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

JavaScript實現郵箱尾碼提示功能

先來個基礎的需求根據下麵需求實現如示意圖所示的郵箱輸入提示功能，註意，根據要求只需實現下麵功能當用戶沒有任何輸入時，提示框消失當用戶輸入字元後，顯示提示框，並且把用戶輸入的內容自動拼上郵箱尾碼進行顯示暫時不用考慮示意圖中的紅色和藍色背景色的邏輯註意用戶輸入中前後空格需要去除小優化編碼 ...
利用canvas畫一個實時時鐘

先放一張效果圖：下麵是源代碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ text-align: center; margin-top: 150 ...
chrome瀏覽器調試工具你會使用嗎？

瀏覽器調試工具使用總結一. console使用 console.table()，可以把對象輸出成表格的形式，直觀的觀察數據。 console.dir()，可以直觀觀察dom元素的對象形式二. $的使用 $('selector')，獲取查詢到的第一個dom元素 $$('selector')，查找符 ...
蘋果手機對網頁上樣式為position:fixed的彈窗支持不好的解決辦法

在Web頁面上，如果想模擬對話框效果，一般會給div元素添加position:fixed的樣式來實現，然後給背景添加一個半透明的遮罩。如： HTML代碼：這種結構在大部分瀏覽器和移動設備上顯示都沒有問題，但是在蘋果手機（safari mobile）上，當底部的鍵盤或者選擇器（日期選擇，下拉列表選擇 ...
如何優雅的構建排序公式

最近的一個項目中的需求要對一堆元素進行排序，排序的依據是元素在頁面上面的坐標位置，然後按照順序給所有元素一個編號。如下圖所示：排序並編號排序並編號做這個需求的是一個新入職的小伙，思考摸索了很久，他也沒有找到合適的方法。不得不說，部分新入職的小伙的思維能力還是有待提高啊。其實這個問題很簡單，就是 ...
JS對瀏覽器Cookie的操作，查詢、設置以及刪除

JavaScript是運行在客戶端的腳本，因此一般是不能夠設置Session的，因為Session是運行在伺服器端的。而cookie是運行在客戶端的，所以可以用JS來設置cookie. 假設有這樣一種情況，在某個用例流程中，由A頁面跳至B頁面，若在A頁面中採用JS用變數temp保存了某一變數的值， ...
如何一步步在生產環境上部署django和vue

本文由雲+社區發表本文主要講述瞭如何一步步在生產環境上部署django和vue，操作系統預設為centos 說明：後文中出現的以下字元串均表示具體的路徑或者名稱，含義如下： DJANGO_DIR 表示django的工程根目錄 DJANGO_NAME 表示django的工程名稱 VUE_HTML_ ...
element-ui Collapse 摺疊面板源碼分析整理筆記（十）

Collapse 摺疊面板源碼： collapse.vue collapse item.vue ...