jQuery在线语音识别转换js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery在线语音识别转换js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery在线语音识别转换</title>
<link rel="stylesheet" type="text/css" href="voicewo.css?v=9">
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="jquery.voicewo.js?v=9" type="text/javascript"></script>
<script src="kindeditor/kindeditor.js" type="text/javascript"></script>
</head>
<body>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td>
        	<textarea name="content" id="content" style="width: 696px; height:180px;"></textarea>
            <div style="height:5px; line-height:5px;">&nbsp;</div>
            <div id="btn"></div>
        </td>
    </tr>
    <tr>
    	<td>&nbsp;</td>
    </tr>
    <tr>
    	<td>&nbsp;</td>
    </tr> 
    <tr>
    	<td>&nbsp;</td>
    </tr>              
    <tr>
        <td>
        	<textarea name="content-kindeditor" id="content-kindeditor" style="width: 700px; height:230px;"></textarea>
            <div style="height:5px; line-height:5px;">&nbsp;</div>
            <div id="btn-kindeditor"></div>            
        </td>
    </tr>    
</table>

<script type="text/javascript">
$(document).ready(function(){
	
	//语音云按钮
	$('#btn').voicewo({
		'width'			  : 92,
		'height'		  : 25,
		'outputId'		  : 'content',
		'buttonImage'	  : 'btn.png',
		'swf'			  : 'voicewo.swf'
	});	
	
	var editor;
	
    KindEditor.ready(function(K) {
    	editor = K.create('#content-kindeditor', {width : '700px', height  : '230px'});
    });	
		
	//语音云按钮
	$('#btn-kindeditor').voicewo({
		'width'			  : 92,
		'height'		  : 25,
		'buttonImage'	  : 'btn.png',
		'swf'			  : 'voicewo.swf',
		'overrideEvents'  : ['onOutput'],
		'onOutput'		  : function(value){
			editor.insertHtml(value);
		}
	});		

})
</script>
</body>
</html>

CSS代码(voicewo.css):

/*voicewoCopyright (c) 2014 yufanEmail yufan1029@qq.com*/
/* vc-tip */
.vc-tip{width:auto;position:absolute;padding:6px 10px 5px;*padding:7px 10px 4px;line-height:16px;color:#444;font-size:14px;font-family:STHeiti,"Microsoft Yahei","微软雅黑",Arial,sans-serif;background-color:#fff;border:solid 1px #b0b0b0;border-radius:3px;box-shadow:0 0 2px #ddd;display:none;}
.vc-tip-arrow{position:absolute;overflow:hidden;font-style:normal;font-family:simsun;font-size:12px;text-shadow:0 0 2px #ccc;}
.vc-tip-arrow em,.vc-tip-arrow i{position:absolute;left:0;top:0;font-style:normal;}
.vc-tip-arrow em{color:#b0b0b0;}
.vc-tip-arrow i{color:#fff;text-shadow:none;}
/* top */
.vc-tip-top .vc-tip-arrow{height:6px;width:12px;left:50%;margin-left:-6px;bottom:-6px;}
.vc-tip-top .vc-tip-arrow em{top:-8px;}
.vc-tip-top .vc-tip-arrow i{top:-9px;}
/* bottom */
.vc-tip-bottom .vc-tip-arrow{height:6px;width:12px;left:50%;margin-left:-6px;top:-6px;}
.vc-tip-bottom .vc-tip-arrow em{top:-1px;}
.vc-tip-bottom .vc-tip-arrow i{top:0px;}
/* left */
.vc-tip-left .vc-tip-arrow{height:12px;width:6px;top:50%;margin-top:-6px;right:-6px;}
.vc-tip-left .vc-tip-arrow em{left:-6px;}
.vc-tip-left .vc-tip-arrow i{left:-7px;}
/* right */
.vc-tip-right .vc-tip-arrow{height:12px;width:6px;top:50%;margin-top:-6px;left:-6px;}
.vc-tip-right .vc-tip-arrow em{left:1px;}
.vc-tip-right .vc-tip-arrow i{left:2px;}
/* content */
.vc-tip-content{width:90px;text-align:center;}
.vc-tip-content-recording{width:90px;height:4px;background-color:#f3f3f3;margin:6px 0 6px 0;}
.vc-tip-content-recording-width{width:0%;height:4px;background-color:#666;}
.vc-tip-content-recoging{width:22px;height:22px;background:url(loading.gif) no-repeat 0 0;margin:6px auto 6px auto;}
.vc-tip-content-title{height:auto;line-height:20px;margin:6px 0 10px 0;}
.vc-tip-content-btn-box{margin:5px 0;}
.vc-tip-content-btn{display:inline-block;min-width:36px;border:1px solid #DCDCDC;border:1px solid rgba(0,0,0,0.1);text-align:center;color:#444;font-size:12px;height:23px;padding:0 4px;line-height:23px;text-decoration:none;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 0.218s;-moz-transition:all 0.218s;-o-transition:all 0.218s;transition:all 0.218s;background-color:#F5F5F5;background-image:-webkit-gradient(linear,left top,left bottom,from(#F5F5F5),to(#F1F1F1));background-image:-webkit-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:-moz-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:-ms-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:-o-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:linear-gradient(top,#F5F5F5,#F1F1F1);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5',EndColorStr='#f1f1f1');}
.vc-tip-content-btn:active{-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 1px rgba(0,0,0,0.3);box-shadow:inset 0 0 1px rgba(0,0,0,0.3);}

附件:下载该文件资源,减少时间成本(增值服务)