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>
posted @   菜鸡变小鸟  阅读(1257)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示