html 录音与文本转语音demo

<!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>
html 录音与文本转语音demo

猜你喜欢
