zhichen-edu
/
zc_saas_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
							<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>自定义语音识别</title>
		<script type="text/javascript">
var text='';
document.addEventListener('plusready', function(){
    initDom();
    // 监听语音识别事件
	plus.speech.addEventListener('start', function(){
        console.log('Event: start');
        text=null;
        result.value='识别中';
		partial.innerText='';
	}, false);
    plus.speech.addEventListener('volumeChange', function(e){
        volume.style.width = 100*e.volume+'px';
    }, false);
    plus.speech.addEventListener('recognizing', function(e){
        console.log('Event: recognizing');
        partial.innerText = e.partialResult;
    }, false);
	plus.speech.addEventListener('recognition', function(e){
        console.log('Event: recognition');
        text?(text+='\n'):text='';
        text+=e.result;
        result.value=text;
		partial.innerText = e.result;
	}, false);
	plus.speech.addEventListener('end', function(){
        console.log('Event: end');
        if(!text||text==''){
            plus.nativeUI.toast('没有识别到内容');
        }
        result.value=text;
	}, false);
}, false);

var result=null,recogniz=null,partial=null,volume=null;
function initDom(){
  result = document.getElementById('result');
	recogniz = document.getElementById('recogniz');
	partial = document.getElementById('partial');
   volume = document.getElementById('volume');
	done = document.getElementById('done');
	done.addEventListener('touchstart', doStart, false);
	done.addEventListener('touchend', doEnd, false);
}
function doStart(){
    plus.speech.startRecognize({
        engine: 'baidu',
        lang: 'zh-cn',
        'userInterface': false,
        'continue': true
    });
	recogniz.style.visibility = 'visible';
}
function doEnd(){
    plus.speech.stopRecognize();
    recogniz.style.visibility = 'hidden';
}

function startRecognizeSilent(){
    var options={
        userInterface: false
    };
    plus.speech.startRecognize(options, function(s){
       console.log('success: '+s); 
    }, function(e){
        console.log('error: '+JSON.stringify(e));
    });
}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
.text {
    width: 80%;
    height: 50px;
    border: #00CCCC 1px solid;
    color: #CCCCCC;
}
.recogniz {
    width: 200px;
    height: 100px;
    padding: 12px;
    margin: auto;
    background-color: rgba(0,0,0,0.5);
    border-radius: 16px;
    visibility: hidden;
}
.partial {
    width: 100%;
    height: 40px;
    margin-top: 16px;
    font-size: 12px;
    color: #FFFFFF;
}
.volume {
	width: 10px;
	height: 6px;
	border-style:solid;
	display:inline-block;
	box-sizing:border-box;
	border-width:1px;
	border-color:#CCCCCC;
	border-radius: 50%;
    background-color: #00CC00;
}
		</style>
	</head>
	<body>
        <br/>
        <p class="des">
            设置userInterface属性值为false则不使用默认语音识别界面，此时可通过H5自定义语音识别界面。
        </p>
        <div style="color:#FF0000;font-weight:bold;text-align:center;">注意：仅百度语音识别支持自定义界面</div>
        <br/>
        <div style="width:100%;text-align:center;">
            <textarea id="result" class="text" placeholder="语音识别内容"></textarea>
        </div>
        <br/>
        <div style="width:100%;height:100px;text-align:center;">
            <div id="recogniz" class="recogniz">
                <div style="color: #0000CC;">...倾听中...</div>
                <div id="partial" class="partial">...</div>
                <div id="volume" class="volume"></div>
        	</div>
        </div>
        <br/>
        <div style="position:absolute;bottom:50px;width:100%;">
            <div id="done" class="button" readonly>按下开始&amp;松开结束</div>
        </div>
	</body>
</html>