模仿语音输入效果

   
   

   
   

	
    
    

		
     
     
      
      详细病情
      
      (支持语音输入识别)
     
     
		
     
     

            
      
      
            
      
      

				
       
       's
				
       
       
			
      
      
		
     
     
	
    
    

   
   


   
   
	
   
   

		
    
    

			
     
     
      
      
     
     
                
     
     

                    
      
      
                    
      
      
                    
      
      
                    
      
      
                    
      
      
                    
      
      
                
     
     
		
    
    
	
    
    
语音输入病情
	
   
   

   
   


   
   
.fill-case dl:last-child, .fill-text dl {
	border-bottom: none;
}
.fill-text dl dt{
	padding: 15px 0 10px;
	font-size: 1.6rem;
}
.fill-text dl dt span {
	color: #fe4847;
	font-size: 1.2rem;
}
.fill-text dl dd {
	position: relative;
}
.fill-text dl dd .tape {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	height: 30px;
}
.fill-text dl dd .tape .hear {
	width: 171px;
	height: 24px;
	margin-top: 6px;
	display: none;
	background: url(../images/bg/icon_doctor_yuyinshuru.png) center center no-repeat;
    background-size: 100% 100%;
    position: relative;
	color: #fff;
	font-size: 1.2rem;
	line-height: 24px;
}
.fill-text dl dd .tape .hear b {
	font-weight: 400;
	padding-left: 30px;	
}
.fill-text dl dd .tape .hear i {
	width: 14px;
	height: 14px;
	display: inline-block;
	background: url(../images/bg/icon_doctor_shangchuyuyin.png) center center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: -24px;
    top: 5px;
}
.fill-text dl dd .tape .say {
	width: 30px;
	height: 30px;
	float: right;
	display: inline-block;
	background: url(../images/bg/icon_doctor_shurubingq.png) center center no-repeat;
    background-size: 100% 100%;
}
.fill-text dl dd textarea {
	width: 100%;
	height: 140px;
	vertical-align: top;
	border: 1px solid #dcdcdc;
	border-radius: 2px;
	padding: 10px 10px 50px;
	line-height: 21px;
	font-size: 1.4rem;
}
/* 录音弹窗 */
.sound-recording {
	width: 150px;
	height: 143px;
	position: fixed;
	top: 50%;
	left: 50%;
	padding: 20px;
	margin-top: -71px;
	margin-left: -75px;
	background: rgba(0,0,0,.3);
	border-radius: 5px;
	display: none;
}
.sound-recording dl {
	width: 100%;
	font-size: 0;
}
.sound-recording dl i {
	width: 50px;
	height: 73px;
	display: inline-block;
	background: url(../images/bg/icon_home_speak.png) center center no-repeat;
	background-size: 100% 100%;
}
.sound-recording dl dt {
	width: 50%;
	display: inline-block;
}
.sound-recording dl dd {
	width: 50%;
	display: inline-block;
	padding-left: 10px;
	text-align: right;
}
.sound-recording dl dd span {
	max-width: 48px;
	background: #fff;
	display: block;
	margin-top: 10px;
	height: 2px;


	border-radius: 2px;
}
.sound-recording p {
	width: 100%;
	text-align: center;
	font-size: 1.2rem;
	color: #fffefe;
	padding-top: 15px;
}


   
   
//语音识别
    var timeout = undefined;    //定时器  
    var state = 0;  //状态
    var lastTime = null;    //最后时间     
    var nowTime = null;     //开始时间
    $("#talk_btn").on("touchstart", function (event) {  
        lastTime = new Date().getTime();  //创建时间
        event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动 

        //span的width随机变化
        setInterval(function (){
            $(".sound-recording dd span").each(function (){
                $(this).width(48*Math.random() + 'px');
            });
        },200)
        clearTimeout(timeout);
        state = 0;  
        timeout = setTimeout(function() {  
            state = 1;  
        }, 1000);  
        $(".sound-recording").show();//显示录音
    });   
      
    $("#talk_btn").on("touchend", function (event) {  
        event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动  
        $(".sound-recording").hide();//关闭录音
        $("#hear").css("display","inline-block");
        clearTimeout(timeout);  
        state = 0;  
        nowTime = new Date().getTime();  
        var timeLength = ((nowTime-lastTime)/1000).toFixed(1);  //时间差
        $("#hear b").text(timeLength);
        
    }); 

    $("#hear i").on("click", function (){
        $(this).parent().hide();
    })