html 錄音與文本轉語音demo

時間 2019-11-08

標籤 html 錄音文本語音 demo 欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
        <script src="js/recorder.mp3.min.js"></script>
        <script type="text/javascript">
            $(function(){
                mui.init()
                var rec=Recorder();//使用默認配置，mp3格式

                    
                    
                $("#but").click(function(){
                    console.log("1");
                    var ssu = new window.SpeechSynthesisUtterance('蓬頭稚子學垂綸，側坐莓苔草映身。路人借問遙招手，怕得魚驚不該人。');
                     window.speechSynthesis.speak(ssu);
                });
                $("#start").click(function(){
                    alert("開始錄音")
                    rec.open(function(){//打開麥克風受權得到相關資源
                        rec.start();//開始錄音
                    },function(msg,isUserNotAllow){//用戶拒絕未受權或不支持
                        console.log((isUserNotAllow?"UserNotAllow，":"")+"沒法錄音:"+msg);
                    });
                });
                $("#end").click(function(){
                    alert("結束錄音");
                    rec.stop(function(blob,duration){//到達指定條件中止錄音
                                console.log(URL.createObjectURL(blob),"時長:"+duration+"ms");
                                rec.close();//釋放錄音資源
                                //已經拿到blob文件對象想幹嗎就幹嗎：當即播放、上傳
                                
                                /*當即播放例子*/
                                var audio=document.createElement("audio");
                                audio.controls=true;
                                $("#audo").html(audio);
                                //document.body.appendChild(audio);
                                //簡單的一嗶
                                audio.src=URL.createObjectURL(blob);
                                audio.play();
                                
                            },function(msg){
                                console.log("錄音失敗:"+msg);
                            });
                })
                
            })
            
        
        </script>
    </head>
    <body>
        <div  style="width: 100px; height: 100px;">
            <button id="but">播放</button>
            <button id="start">開始錄音</button>
            <button id="end">結束錄音</button>
        </div>
        <div id="audo">
            
        </div>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。