<!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=" 100px; height: 100px;">
<button id="but">播放</button>
<button id="start">开始录音</button>
<button id="end">结束录音</button>
</div>
<div id="audo">
</div>
</body>
</html>