Web端让电脑说话，发音，类似闹钟

最新推荐文章于 2022-04-12 15:37:21 发布

Peter447

最新推荐文章于 2022-04-12 15:37:21 发布

阅读量4.7k

点赞数

分类专栏： web端文章标签：电脑发音闹钟 web端语音

本文链接：https://blog.csdn.net/weixin_42209881/article/details/91821901

版权

web端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

在服务端，我们通常使用windows的VB包，生成vbs文件，让电脑说话，
例如这样：CreateObject(“SAPI.SpVoice”).Speak"床前明月光，疑是地上霜"
在这里插入图片描述
但这样win7操作系统是不支持的，并且在前端使用cmd调用稍麻烦，我就想单纯使用前端实现，
现在看例子：
首先先生成语音文件，可以是各种音频文件，我使用的是MP3格式，可以录音，也可以使用语音软件将文字转换。选用适合浏览器支持的音频格式：
在这里插入图片描述
看代码：

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
         <script src='../static/js/jquery-1.9.1.min.js'></script>
          
    </head>
    
    <body>
    
    <audio src="../static/mp3/包西线紧急.mp3" preload="auto" id="music" loop="loop">
    	你的浏览器不支持html5的audio标签
    </audio>
    <!--preload规定当网页加载时，音频是否默认被加载以及如何被加载。 auto - 当页面加载后载入整个音频-->
    <!-- 1、control 属性供添加播放、暂停和音量控件。
 	2、<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。
 	3、audio 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
 		支持的部分属性列举：
 	4、autoplay 是否自动播放。 -->
    
   <hr>
   <button  id="start" onclick="playMusic()">告警触发</button>
   <button   id="handle" onclick="stopMusic()">告警确认</button>
    
    <div id="time"> </div>
    
</body>

<script>

	var status = false;         //true是发生报警,false停止报警
	var timer1;
	var timer2;
	
	function startMusic()
	{
		if(status){
			$("#music")[0].play();          //响铃
			timer2 = setTimeout(exitMusic,10000);           //等待10秒执行
		}else{
			stopMusic();
		}
	}
	
	function exitMusic(){
		$("#music")[0].pause();
	}	
	
	//触发报警，
	function playMusic()
	{
		status = true;
		timer1=setInterval(startMusic,30000);    //每隔30s执行一次
		startMusic();
	}

	//结束报警
	function stopMusic()
	{
		$("#music")[0].pause();
		status = false;
		clearInterval(timer1);   
		clearTimeout(timer2);   
	}	

</script>



<script>
window.onload=function(){

//定时器每秒调用一次fnDate()
setInterval(function(){
fnDate();
},1000);
}

//js 获取当前时间
function fnDate(){
	var oDiv=document.getElementById("time");
	var date=new Date();
	var year=date.getFullYear();//当前年份
	var month=date.getMonth();//当前月份
	var data=date.getDate();//天
	var hours=date.getHours();//小时
	var minute=date.getMinutes();//分
	var second=date.getSeconds();//秒
	var time=year+"-"+fnW((month+1))+"-"+fnW(data)+" "+fnW(hours)+":"+fnW(minute)+":"+fnW(second);
	oDiv.innerHTML=time;
}
//补位 当某个字段不是两位数时补0
function fnW(str){
var num;
str>10?num=str:num="0"+str;
return num;
} 
</script>


</html>

注意音频文件的引用路径，不需要任何插件，html5就支持

Peter447

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web端让电脑说话，发音，类似闹钟

在服务端，我们通常使用windows的VB包，生成vbs文件，让电脑说话，例如这样：CreateObject(“SAPI.SpVoice”).Speak"床前明月光，疑是地上霜"但这样win7操作系统是不支持的，并且在前端使用cmd调用稍麻烦，我就想单纯使用前端实现，现在看例子：首先先生成语音文件，可以是各种音频文件，我使用的是MP3格式，可以录音，也可以使用语音软件将文字转换。选用适合...
复制链接

扫一扫

专栏目录