整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML5實(shí)時(shí)語(yǔ)音通話聊天,MP3壓縮傳輸3KB每秒

          從Recorder H5 GitHub開源庫(kù)優(yōu)化后,對(duì)邊錄邊轉(zhuǎn)碼成小語(yǔ)音片段文件實(shí)時(shí)上傳服務(wù)器這種操作支持非常良好,因此以前不太好支持的H5語(yǔ)音通話已經(jīng)有了更好的突破空間。因此花了兩晚時(shí)間打造了一個(gè)H5語(yǔ)音通話聊天的demo。

          歡迎在線把玩:https://xiangyuecn.github.io/Recorder/

          一、把玩方法

          1. 準(zhǔn)備局域網(wǎng)內(nèi)兩臺(tái)設(shè)備(Peer A、Peer B)用最新版本瀏覽器(demo未適配低版本)分別打開demo頁(yè)面(也可以是同一瀏覽器打開兩個(gè)標(biāo)簽)
          2. 勾選頁(yè)面中的H5版語(yǔ)音通話聊天,在Peer A中點(diǎn)擊新建連接
          3. 把Peer A的本機(jī)信手動(dòng)復(fù)制傳輸給Peer B,粘貼到遠(yuǎn)程信息中,并點(diǎn)擊確定連接
          4. 把Peer B自動(dòng)生成的本機(jī)信息手動(dòng)復(fù)制傳輸給Peer A,粘貼到遠(yuǎn)程信息中,并點(diǎn)擊確定連接
          5. 雙方P2P連接已建立,使用頁(yè)面上方的錄音功能,隨時(shí)開啟錄音,音頻數(shù)據(jù)會(huì)實(shí)時(shí)發(fā)送給對(duì)方

          局域網(wǎng)H5版對(duì)講機(jī)

          二、技術(shù)特性

          (1)數(shù)據(jù)傳輸

          github demo中考慮到減少對(duì)服務(wù)器的依賴,因此采用了WebRTC P2P傳輸功能,無(wú)需任何服務(wù)器支持即可實(shí)現(xiàn)局域網(wǎng)內(nèi)的兩個(gè)設(shè)備之間互相連接,連接代碼也算簡(jiǎn)單。有服務(wù)器支持可能就要逆天了,不過(guò)代碼也會(huì)更復(fù)雜。

          如果正式使用,可能不太會(huì)考慮使用WebRTC,用WebSocket通過(guò)服務(wù)器進(jìn)行轉(zhuǎn)發(fā)可能是最佳的選擇。

          WebRTC局域網(wǎng)P2P連接要點(diǎn)(實(shí)際代碼其實(shí)差不多,只不過(guò)多做了點(diǎn)兼容):

          /******Peer A(本機(jī))******/
          var peerA=new RTCPeerConnection(null,null)
          //開啟會(huì)話,等待遠(yuǎn)程連接
          peerA.createOffer().then(function(offer){
           peerA.setLocalDescription(offer);
           peerAOffer=offer;
          });
          var peerAICEList=[......] //通過(guò)peerA.onicecandidate監(jiān)聽獲得所有的ICE連接信息候選項(xiàng),如果有多個(gè)網(wǎng)絡(luò)適配器,就會(huì)有多個(gè)候選
          //創(chuàng)建連接通道對(duì)象,A端通過(guò)這個(gè)來(lái)進(jìn)行數(shù)據(jù)發(fā)送
          var peerAChannel=peerA.createDataChannel("RTC Test");
          /******Peer B(遠(yuǎn)程)******/
          var peerB=new RTCPeerConnection(null,null)
          //連接到Peer A
          peerB.setRemoteDescription(peerAOffer);
          //開啟應(yīng)答會(huì)話,等待Peer A確認(rèn)連接
          peerB.createAnswer().then(function(answer){
           peerB.setLocalDescription(answer);
           peerBAnswer=answer;
          });
          //把Peer A的連接點(diǎn)都添加進(jìn)去
          peerB.addIceCandidate(......peerAICEList)
          var peerBICEList=[......] //通過(guò)peerB.onicecandidate監(jiān)聽獲得所有的ICE連接信息候選項(xiàng),如果有多個(gè)網(wǎng)絡(luò)適配器,就會(huì)有多個(gè)候選
          var peerBChannel=... //通過(guò)peerB.ondatachannel得到連接通道對(duì)象,B端通過(guò)這個(gè)來(lái)進(jìn)行數(shù)據(jù)發(fā)送
          /*******最終完成連接********/
          //連接到Peer B
          peerA.setRemoteDescription(peerBAnswer);
          //把Peer B的連接點(diǎn)都添加進(jìn)去
          peerA.addIceCandidate(......peerBICEList)
          /*
          peerA peerB分別等待peerA/BChannel.onopen回調(diào)即完成P2P連接
          ,然后通過(guò)監(jiān)聽peerA/BChannel.onmessage獲得對(duì)方發(fā)送的信息
          ,通過(guò)peerA/BChannel.send(data) 發(fā)送數(shù)據(jù)。
          */
          

          (2)音頻采集和編碼

          由于是在我的Recorder庫(kù)中新加的demo,因此音頻采集和編碼都是現(xiàn)成的,Recorder庫(kù)有好的兼容性和穩(wěn)定性,因此節(jié)省了最大頭的工作量。

          編碼最佳使用MP3格式,因?yàn)榇烁袷揭褍?yōu)化了實(shí)時(shí)編碼性能,可做到邊錄邊轉(zhuǎn)碼,16kbps 16khz的情況下可做到2kb每秒的文件大小,音質(zhì)還可以,實(shí)時(shí)傳輸時(shí)為3kb每秒,15分鐘大概3M的流量。

          用wav格式也可以,不過(guò)此格式編碼出來(lái)的數(shù)據(jù)量太大,16位 16khz接近50kb每秒的實(shí)時(shí)傳輸數(shù)據(jù),15分鐘要37M多流量。其他格式由于暫未對(duì)實(shí)時(shí)編碼進(jìn)行優(yōu)化,使用中會(huì)導(dǎo)致明顯卡頓。

          降噪、靜音檢測(cè)等高級(jí)功能是沒(méi)有的,畢竟是非專業(yè)人員 要求高點(diǎn)可以,但不要超出范圍太多啦。

          (3)音頻實(shí)時(shí)接收和播放

          接收到一個(gè)音頻片段后,本應(yīng)該是立即播放的,但由于編碼、網(wǎng)絡(luò)傳輸導(dǎo)致的延遲,可能上個(gè)片段還未播放完(甚至未開始播放),因此需要緩沖處理。

          因?yàn)榇嬖诰彌_,就需要進(jìn)行實(shí)時(shí)同步處理,如果緩沖內(nèi)積壓了過(guò)多的音頻片段,會(huì)導(dǎo)致語(yǔ)音播放滯后太多,因此需要適當(dāng)進(jìn)行對(duì)數(shù)據(jù)進(jìn)行丟棄,實(shí)測(cè)發(fā)現(xiàn)網(wǎng)絡(luò)正常、設(shè)備性能靠譜的情況下基本沒(méi)有丟棄的數(shù)據(jù)。

          然后就是播放了,本應(yīng)是播完一個(gè)就播下一個(gè),測(cè)試發(fā)現(xiàn)這是不靠譜的。因?yàn)榻Y(jié)束一個(gè)片段后再開始播放下一個(gè)發(fā)出聲音,這個(gè)過(guò)程會(huì)中斷比較長(zhǎng)時(shí)間,明顯感覺(jué)得出來(lái)中間存在短暫停頓。因此必須在片段未播完時(shí)準(zhǔn)備好下一個(gè)片段的播放,并且提前開始播放,達(dá)到抹掉中間的停頓。

          我寫了兩個(gè)播放方式:

          1. 實(shí)時(shí)解碼播放
          2. 雙Audio輪換播放

          最開始用一個(gè)Audio停頓感太明顯,因此用兩個(gè)Audio輪換抹掉中間的停頓,但發(fā)現(xiàn)不同格式Auido播放差異巨大,播放wav非常流暢,但播放mp3還是存在停頓(后面用解碼的發(fā)現(xiàn)是得到的PCM時(shí)長(zhǎng)變長(zhǎng)了,導(dǎo)致事件觸發(fā)會(huì)出現(xiàn)誤差,為什么會(huì)變長(zhǎng)?怪異)。

          因此后面寫了一個(gè)解碼然后再播放,mp3這次終于能正常連續(xù)播放了,wav格式和雙Audio的播放差異不大。實(shí)時(shí)解碼里面也用到了雙Audio中的技巧,其實(shí)也是用到了兩個(gè)BufferSource進(jìn)行類似的輪換操作,以抹掉兩個(gè)片段間的停頓。

          不過(guò)最終播放效果還是不夠好,音質(zhì)變差了點(diǎn),并且多了點(diǎn)噪音。如果有現(xiàn)成的播放代碼拿過(guò)來(lái)用就就好了。

          三、應(yīng)用場(chǎng)景

          1. 數(shù)據(jù)傳輸改成WebSocket,做個(gè)仿微信語(yǔ)音通話H5版還是可以的(受限于Recorder瀏覽器支持)
          2. 局域網(wǎng)H5版對(duì)講機(jī)(前端玩具)
          3. ......沒(méi)有想到

          完。

          用HTML5+JS實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音

          現(xiàn)在越來(lái)越多的視頻采用了AI語(yǔ)音,下面給大家介紹幾種簡(jiǎn)單的文字轉(zhuǎn)語(yǔ)音的辦法,完全免費(fèi)的歐。

          1. 使用HTML5語(yǔ)音合成API-SpeechSynthesis實(shí)現(xiàn)的文字轉(zhuǎn)語(yǔ)音

          因?yàn)镾peechSynthesis完全是由瀏覽器端實(shí)現(xiàn)的文字轉(zhuǎn)語(yǔ)音,大家可以用下面命令測(cè)試一下自己使用的瀏覽器支持哪些文字轉(zhuǎn)成語(yǔ)音,方法很簡(jiǎn)單。

          1. 打開瀏覽器任意頁(yè)面,點(diǎn)擊F12打開瀏覽器調(diào)試控制臺(tái),
          2. 點(diǎn)擊【控制臺(tái)】或者是【console】切換到控制臺(tái)頁(yè)面,在提示符>位置輸入speechSynthesis.getVoices()并回車。
          3. 有些瀏覽器控制臺(tái)默認(rèn)是禁止復(fù)制粘貼的這調(diào)代碼有可能要手動(dòng)輸入allow pasting來(lái)啟用復(fù)制粘貼。
          4. 不同瀏覽器支持的語(yǔ)音數(shù)量不同,edge支持最多有302種

          Chrome支持也不少

          而maxthon就支持一種

          注意這個(gè)支持多寡和當(dāng)前使用的操作系統(tǒng)版本,瀏覽器內(nèi)核版本也有一定關(guān)系,各瀏覽器支持情況參考下表,數(shù)字代表開始支持的內(nèi)核版本。

          下面來(lái)看看用html5+js代碼怎樣實(shí)現(xiàn)一個(gè)簡(jiǎn)單的頁(yè)面來(lái)實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音

          先用html語(yǔ)言寫一個(gè)簡(jiǎn)單的頁(yè)面,代碼如下:

          <!DOCTYPE html>
          <html>
          
          <head>
          <title>HTML5+JS實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音朗讀功能</title>
          </head>
          
          <body>
          <article>
          <h3 align="center">請(qǐng)?jiān)谙旅嫖谋究蛑休斎胍D(zhuǎn)換的文字:</h3>
          <p>
          <textarea id="texts" rows="15" class="_play">使用瀏覽器實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音,不需要網(wǎng)絡(luò)。</textarea>
          </p>
          <p>
          <label>選擇轉(zhuǎn)換語(yǔ)音:</label>
          <select id="voiceSelect" onchange="play()"></select>
          </p>
          <button class="_search" onclick="play()">開始</button>
          <button onclick="resume()">繼續(xù)</button>
          <button onclick="pause()">暫停</button>
          <!-- <button onclick="cancel()">清除隊(duì)列</button> -->
          <button onclick="cls()">清空文文字</button>
          </article>
          </body>
          </html>

          效果是這樣的:

          看起來(lái)比較丑,可以在<head>標(biāo)簽里面加上css代碼,使頁(yè)面看起來(lái)好看一點(diǎn)

          <head>
          <title>HTML5+JS實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音朗讀功能</title>
          <style>
          article {margin: 0 auto;max-width: 800px;text-align: center;}
          textarea {max-width: 600px;width:100%;text-align: left;}
          button{border-radius: 3px;border: 1px solid #dddddd;height: 30px;width: 80px;cursor: pointer;}
          </style>
          </head>

          效果如下:

          為選擇轉(zhuǎn)換語(yǔ)音的選擇框添加js代碼

          <script>
          var to_speak = window.speechSynthesis;
          var voiceSelect = document.querySelector("#voiceSelect");
          var voices = [];
          //創(chuàng)建選擇語(yǔ)言的select標(biāo)簽
          function populateVoiceList() {
          voices = speechSynthesis.getVoices();
          for(i = 0; i < voices.length; i++) {
          var option = document.createElement('option');
          option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
          if(voices[i].default) {
          option.textContent += ' -- DEFAULT';
          }
          option.setAttribute('data-lang', voices[i].lang);
          option.setAttribute('data-name', voices[i].name);
          voiceSelect.appendChild(option);
          }
          }
          
          setTimeout(function() {
          populateVoiceList();
          }, 500) //
          </script>

          這樣刷新頁(yè)面后選擇轉(zhuǎn)換語(yǔ)音的選擇框后面就出現(xiàn)一個(gè)下拉列表,里面列出了瀏覽器支持的語(yǔ)音。

          后面為各按鈕添加js代碼:

          開始:

          var _play = document.querySelector("._play");
          var dataName;
          //清除所有語(yǔ)音播報(bào)創(chuàng)建的隊(duì)列
          function cancel() {
          window.speechSynthesis.cancel();
          }
          function play() {
          cancel(); //一定要加這個(gè),不加的話瀏覽器會(huì)不發(fā)聲。
          to_speak = new SpeechSynthesisUtterance(_play.value);
          
          //to_speak.rate = 1.4;// 設(shè)置播放語(yǔ)速,范圍:0.1 - 10之間
          
          var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
          for(i = 0; i < voices.length; i++) {
          if(voices[i].name === selectedOption) {
          to_speak.voice = voices[i];
          }
          }
          
          window.speechSynthesis.speak(to_speak);
          
          }

          繼續(xù),暫停,清空文字:

          //暫停
          function pause() {
          window.speechSynthesis.pause();
          }
          //繼續(xù)播放
          function resume() {
          window.speechSynthesis.resume(); //繼續(xù)
          }
          //清除所有語(yǔ)音播報(bào)創(chuàng)建的隊(duì)列
          function cancel() {
          window.speechSynthesis.cancel();
          }
          //清空文本框
          function cls() {
          document.getElementById("texts").value=""; 清空文本框
          }

          可以在播放、暫停和繼續(xù)播放里面加上檢測(cè)文本框內(nèi)是否有文字的函數(shù),有文字才播放。

          //檢查文本框是否為空

          function myCheckFunc() {

          let x;

          x = document.getElementById("texts").value;

          try {

          if (x === "")

          throw "文本框?yàn)榭?#34;;


          } catch (error) {

          alert( "提示" + error);

          }

          }

          完整js代碼如下:

          <script>
          if(!('speechSynthesis' in window)) {
          throw alert("對(duì)不起,您的瀏覽器不支持")
          }
          
          var _play = document.querySelector("._play"),
          to_speak = window.speechSynthesis,
          dataName, voiceSelect = document.querySelector("#voiceSelect"),
          voices = [];
          
          function play() {
          myCheckFunc();//檢查文本框是否為空
          cancel(); //
          to_speak = new SpeechSynthesisUtterance(_play.value);
          
          //to_speak.rate = 1.4;// 設(shè)置播放語(yǔ)速,范圍:0.1 - 10之間
          
          var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
          for(i = 0; i < voices.length; i++) {
          if(voices[i].name === selectedOption) {
          to_speak.voice = voices[i];
          }
          }
          
          window.speechSynthesis.speak(to_speak);
          
          }
          
          //暫停
          function pause() {
          myCheckFunc();//檢查文本框是否為空
          window.speechSynthesis.pause();
          }
          //繼續(xù)播放
          function resume() {
          myCheckFunc();//檢查文本框是否為空
          window.speechSynthesis.resume(); //繼續(xù)
          }
          //清除所有語(yǔ)音播報(bào)創(chuàng)建的隊(duì)列
          function cancel() {
          window.speechSynthesis.cancel();
          }
          //清空文本框
          function cls() {
          document.getElementById("texts").value=""; 清空文本框
          }
          //檢查文本框是否為空
          function myCheckFunc() {
          let x;
          x = document.getElementById("texts").value;
          try {
          if (x === "")
          throw "文本框?yàn)榭?#34;;
          
          } catch (error) {
          alert( "提示" + error);
          }
          }
          
          //創(chuàng)建選擇語(yǔ)言的select標(biāo)簽
          function populateVoiceList() {
          voices = speechSynthesis.getVoices();
          for(i = 0; i < voices.length; i++) {
          var option = document.createElement('option');
          option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
          
          if(voices[i].default) {
          option.textContent += ' -- DEFAULT';
          }
          option.setAttribute('data-lang', voices[i].lang);
          option.setAttribute('data-name', voices[i].name);
          voiceSelect.appendChild(option);
          }
          }
          
          setTimeout(function() {
          populateVoiceList();
          }, 500) //
          </script>

          這樣一個(gè)簡(jiǎn)單的文字轉(zhuǎn)語(yǔ)音的網(wǎng)頁(yè)就做好了,而且不依賴網(wǎng)絡(luò),沒(méi)網(wǎng)的時(shí)候也可轉(zhuǎn)換,而且使用win10系統(tǒng),EDGE瀏覽器支持100多種文字。

          有個(gè)小問(wèn)題就是,這樣轉(zhuǎn)換瀏覽器會(huì)直接發(fā)聲,而不是輸出為文件,這個(gè)問(wèn)題可以用錄屏軟件或者錄音軟件例如Adobe Audition,Cool Edit Pro等解決。

          1. 用edge播放文本內(nèi)容

          這種方式更簡(jiǎn)單一點(diǎn),步驟如下:

          1. 新建一個(gè)txt文件里面輸入要轉(zhuǎn)的內(nèi)容,然后用EDGE瀏覽器打開這個(gè)問(wèn)題文件.
          2. 點(diǎn)擊地址欄右側(cè)大聲朗讀按鈕

          在彈出的朗讀此頁(yè)內(nèi)容工具條上點(diǎn)擊【語(yǔ)音選項(xiàng)】,在彈出的對(duì)話框上可以設(shè)置語(yǔ)音的速度和語(yǔ)音的類型。選好之后點(diǎn)工具條上播放按鈕就可以播放了。

          1. 使用EDGE插件實(shí)現(xiàn)轉(zhuǎn)換

          (1)在EDGE瀏覽器點(diǎn)擊右上角三個(gè)點(diǎn),打開edge瀏覽器選項(xiàng)菜單,點(diǎn)擊【擴(kuò)展】,打開擴(kuò)展對(duì)話框,選擇打開Microsoft edge加載項(xiàng)

          1. 在搜索框輸入voice remaker,添加這個(gè)擴(kuò)展

          1. 添加成功后,點(diǎn)擊瀏覽器地址欄后面的擴(kuò)展圖標(biāo)打開這個(gè)擴(kuò)展,在彈出的對(duì)話框的文本框里面輸入要轉(zhuǎn)的文字,在voice下拉列表選擇要轉(zhuǎn)的語(yǔ)音點(diǎn)擊【convert to speech】,等待片刻就可以在下面看到轉(zhuǎn)好的語(yǔ)音文件,可以點(diǎn)擊下載來(lái)下載這個(gè)文件。

          1. 用PC端工具調(diào)用edge瀏覽器語(yǔ)音轉(zhuǎn)換功能實(shí)現(xiàn)轉(zhuǎn)換

          推薦大家用edge-TTS-record這個(gè)工具版本V0.1.1,這個(gè)工具既不要錢也不需要登陸。

          在文本框里輸入文字,【朗讀者】選擇語(yǔ)音,可以點(diǎn)【試聽】按鈕試聽一下,點(diǎn)【錄制】即可保存為wav文件。

          以上這幾種方式所使用的語(yǔ)音轉(zhuǎn)換引擎是一樣的都是調(diào)用edge瀏覽器的SpeechSynthesis功能,所以它們里面可選擇的語(yǔ)音是一樣的,一般都是有幾百種,這種方式轉(zhuǎn)換出來(lái)的語(yǔ)音,雖然聽起來(lái)有點(diǎn)機(jī)械,但是對(duì)應(yīng)普通的視頻配音來(lái)說(shuō)完全足夠了。



          者:xmanlin

          轉(zhuǎn)發(fā)鏈接:https://segmentfault.com/a/1190000022268377


          主站蜘蛛池模板: 成人国产一区二区三区| 国产一区视频在线免费观看| 久久久无码一区二区三区| 亚洲丶国产丶欧美一区二区三区| 日本道免费精品一区二区| 无码人妻aⅴ一区二区三区有奶水| 视频一区二区三区免费观看| 国产精品高清视亚洲一区二区 | 国产无套精品一区二区| 无码人妻一区二区三区在线水卜樱| 99久久精品午夜一区二区| 久久一区二区明星换脸| 亚洲夜夜欢A∨一区二区三区| 538国产精品一区二区在线| 人妻体内射精一区二区| 一区二区三区视频网站| 一区二区三区亚洲视频| 国产在线精品一区二区夜色| 久久se精品一区二区| 久久久精品人妻一区二区三区| 无码人妻精品一区二区三| 亚洲国产美女福利直播秀一区二区| 国产精品视频分类一区| 国产av一区最新精品| 一区二区三区四区在线播放| 久久免费精品一区二区| 色窝窝免费一区二区三区| 久久免费视频一区| 精品亚洲福利一区二区| 一区二区视频在线观看| 福利一区在线视频| 伊人久久精品无码麻豆一区| 一区二区三区四区在线播放 | 免费萌白酱国产一区二区| 日韩制服国产精品一区| 精品日韩一区二区三区视频| 国产综合无码一区二区三区| 色婷婷香蕉在线一区二区| 亚洲AV色香蕉一区二区| 三级韩国一区久久二区综合 | 精品久久一区二区|