一、前言?

? ? ? ? AI二次元女友這個(gè)項(xiàng)目持續(xù)更新，在window端的語音識(shí)別和語音合成的功能，在上一篇文章里已經(jīng)詳細(xì)說明了微軟Azure語音服務(wù)的代碼實(shí)現(xiàn)。也是為了實(shí)現(xiàn)一次代碼，多端復(fù)用這樣的訴求，所以全部的代碼實(shí)現(xiàn)都改成了web api的方式。然而在實(shí)測(cè)發(fā)布到webgl的時(shí)候，就發(fā)現(xiàn)了一個(gè)問題，因?yàn)檫@個(gè)項(xiàng)目涉及到麥克風(fēng)錄制聲音，用作語音識(shí)別，結(jié)果在發(fā)布的時(shí)候，引擎報(bào)錯(cuò)，提示unity發(fā)布到webgl失敗了，查了一下相關(guān)資料，原來是unity內(nèi)置的microphone類是不支持webgl了，所以只好另找解決方案。

? ? ? ? ·我在網(wǎng)上也查了不少資料，從unity官方也得到了一些信息，解決方案的思路，參見unity官方文檔，文檔里描述了unity如何調(diào)用js的方法，涉及到unity端*.jslib的拓展方法，unity文檔：https://docs.unity3d.com/cn/2020.3/Manual/webgl-interactingwithbrowserscripting.html

? ? ? ? 因?yàn)樽约杭夹g(shù)能力也有限，所以找了好幾個(gè)現(xiàn)成的解決方案，做了實(shí)測(cè)，最后找到一個(gè)博主提供的解決方案以及源碼。把他的源碼集成到我項(xiàng)目里，確實(shí)是解決了我的問題，是實(shí)現(xiàn)了發(fā)布到webgl之后，可以調(diào)用麥克風(fēng)錄音，并且通過Azure的語音識(shí)別，正確識(shí)別到文本了。這過程其實(shí)也遇到不少問題，花了點(diǎn)時(shí)間，不過最終都解決了，怕自己忘記了，所以就趕忙寫個(gè)文檔留存，以防未來需要的時(shí)候，可以查閱。我參考的博主的解決方案里，除了在unity端調(diào)用js代碼外，還有js回傳數(shù)據(jù)到unity。部分代碼實(shí)現(xiàn)是在js里實(shí)現(xiàn)了，所以在發(fā)布webgl后，需要修改一點(diǎn)代碼，并加入js庫，具體配置方法，見下文。

????關(guān)于本文的內(nèi)容，我也制作有相應(yīng)的視頻，視頻和文檔可以配合使用。B站視頻傳送門：

二、發(fā)布Webgl

? ? ? ? unity發(fā)布webgl項(xiàng)目的設(shè)置，首先確保引擎安裝了webgl平臺(tái)的拓展，這個(gè)在buildsetting里如果切換不到webgl平臺(tái)，那就上官網(wǎng)下在安裝包，安裝上就可以了。轉(zhuǎn)換一下平臺(tái)即可。發(fā)布之前確認(rèn)一下工程的路徑，保證工程的路徑是全英文的，不然導(dǎo)出webgl會(huì)報(bào)錯(cuò)。

? ? ? ? 發(fā)布設(shè)置方面：

????????1、Other Settings里,Color Space修改為Gamma

? ? ? ? 2、Publishing Settings里，勾選Decompression Fallback

? ? ??

? ? ? ? ?如果說在發(fā)布webgl過程發(fā)現(xiàn)其他問題，自行到百度或其他渠道去搜一下，這方面的資料很多，基本上都可以找到相關(guān)問題的解決方案，以上是我在發(fā)布時(shí)遇到的一些配置問題，做一下記錄。

三、腳本說明

? ? ? ? 項(xiàng)目涉及到unity端還有js端兩部分的代碼。

? ? ? ? 1、unity端代碼說明

????????在unity端，參見官方解決方案，需要在unity的Plugins文件下，創(chuàng)建*jslib文件，在這個(gè)庫里，按照unity官方提供的示例編寫js代碼，然后在C#腳本里按照指定的方式引用就可以在unity端調(diào)用js代碼了。

????????jslib官方代碼示例(這個(gè)文件要放在Plugins文件夾下面)

? 在C#端，根據(jù)官方示例，編寫以下代碼就可以引用到j(luò)s的方法了

以上是C#調(diào)用js代碼的示例，在項(xiàng)目功能里已經(jīng)把錄音和結(jié)束錄音的功能封裝好了，直接調(diào)用就可以了，根據(jù)自己的需要，調(diào)用StartRecord()開始錄制，調(diào)用StopRecord()結(jié)束錄制

? 2、js代碼說明

? ? ? ? 源碼提供了js代碼，因?yàn)轫?xiàng)目涉及到j(luò)s端完成錄制后，需要把錄音數(shù)據(jù)回傳到unity中使用，所以還需要增加一部分的js代碼，實(shí)現(xiàn)上述功能。源碼里提供了相關(guān)的代碼，我們只需要在導(dǎo)出的webgl包里，修改相應(yīng)的代碼文件，就可以了。具體的修改方法，見下一節(jié)內(nèi)容。

四、腳本配置

? ? ? ? 這節(jié)里詳細(xì)說明一下在導(dǎo)出的webgl包中的代碼配置內(nèi)容。

? ? ? ? 1、添加js腳本

? ? ? ? 找到[recorder.wav.min.js]腳本，把腳本拷貝到輸出的webgl包，index.html相同的文件夾下[根目錄]即可。

????????

? ? ? ? 2、修改index.html?

? ? ? ? 先找到[AddToIndex.js]文件，后續(xù)需要添加的代碼都在這個(gè)文件里了，直接復(fù)制就可以了。

? ? ? ? ①在index.html中引用/recorder.wav.min.js腳本

? ? ? ? 在[AddToIndex.js]文件，里拷貝"<script src="./recorder.wav.min.js"></script>",添加到index.html里，引用[recorder.wav.min.js]腳本。

②拷貝js處理代碼到index.html中

????????[AddToIndex.js]里拷貝第7行到110行的代碼，到<script>腳本里（可以直接添加到" document.body.appendChild(script);"這行代碼后面）

③初始化代碼

? ? ? ? 這里需要注意添加一下實(shí)例化代碼，需要在index.html里找到unityInstance的實(shí)例化代碼塊里，添加"UnityIns = unityInstance; ?initRecord();" 這兩行代碼，（可以添加到"then((unityInstance) => {" 這段代碼之后）

修改完上述代碼，就配置完成了，可以部署webgl項(xiàng)目實(shí)測(cè)一下效果了。這里我實(shí)測(cè)原作者項(xiàng)目的時(shí)候，遇到過一個(gè)問題。因?yàn)槲业捻?xiàng)目是需要拿到錄音數(shù)據(jù)，發(fā)送到語音識(shí)別api的，剛開始發(fā)現(xiàn)識(shí)別的結(jié)果有問題，一直不準(zhǔn)確。后來在錄制聲音的配置上，把采樣率調(diào)整未44100之后，就識(shí)別正常，這里做一下記錄，我自己的源碼就已經(jīng)做過這個(gè)修改了。

? ? ? ? 五、結(jié)束語

? ? ? ? 這次這個(gè)方案，解決了unity語音識(shí)別功能發(fā)布到webgl失效的問題，現(xiàn)在這個(gè)項(xiàng)目可以順利部署到webgl使用了。目前這個(gè)解決方案，在發(fā)布之后還需要做一些js的代碼處理，相對(duì)麻煩一些，目前我還沒有找到更簡(jiǎn)單的解決方案，未來如果找到更便捷的方案再做分享。

?

?????? ?六、參考資料

? ? ? ? 這個(gè)解決方案也查閱了很多大佬的資料，以下是查閱和參考的相關(guān)資料傳送門：? ? ??

CSDN博客：https://blog.csdn.net/Wenhao_China/article/details/126779212?spm=1001.2014.3001.5502t

CSDN博文：https://blog.csdn.net/a987654sd/article/details/105551560

解決方案作者的源碼地址：

Github：https://github.com/HiWenHao/UnityWebGLMicrophone

附加材料：

以下兩個(gè)webgl使用microphone方案我尚未驗(yàn)證，也放在這里供參考

解決方案1：https://gitcode.net/mirrors/xiangyuecn/recorder?utm_source=csdn_github_accelerator

解決方案2：https://github.com/tgraupmann/UnityWebGLMicrophone/tree/maste

AI二次元女友項(xiàng)目源碼：

Github地址：https://github.com/zhangliwei7758/unity-AI-Chat-Toolkit

Gitee地址：https://gitee.com/DammonSpace/unity-ai-chat-toolkit