cordova-plugin-iflyspeech
Version:
Cordova plugin to support mobile speech recognizer and synthesizer with iFlyTek voice cloud service
67 lines (60 loc) • 2.44 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="jquery-1.9.js"></script>
<style type="text/css">
html, body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; background-color:white; }
div#fullpage { width:100%; height:100%; margin:0; padding:0; border:0px solid red; text-align:center; vertical-align:middle; }
button { font-size: 22px; }
</style>
</head>
<body onload="onLoad()">
<script>
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.speech.onSpeak( function(str) {
$('textarea#read').val( str );
$('div#status').html( str );
});
var s = navigator.speech.voice_names;
for( var v in s ) {
$('select#voice_name').append( new Option(s[v], v) );
}
$('div#status').html( 'speech engine ready' );
}
function startReading() {
var text = $('textarea#read').val();
var speakers = $('select#voice_name')[0];
var speaker = speakers.options[ speakers.selectedIndex ];
var options = {voice_name: speaker.value};
$('div#status').html( speaker.innerHTML + '说：' + text );
navigator.speech.startSpeaking( text, options );
}
function stopReading() {
navigator.speech.stopSpeaking();
}
function startListening() {
$('div#status').html( 'start listening, please speak.' );
navigator.speech.startListening();
}
function stopListening() {
navigator.speech.stopListening();
}
</script>
<div id="fullpage">
<p>Demo for Speech Plugin</p>
<textarea id='read' cols=30 rows=8>爱拼才会赢。安杰坊科技有限公司，擅长手机应用和手游开发。欢迎商务联络。</textarea>
<p>Listen <button onclick="startListening()">Start</button><button onclick="stopListening()">Stop</button></p>
<p>Multi-Lang/Assents: <select id='voice_name'></select>
<p>Read <button onclick="startReading()">Start</button><button onclick="stopReading()">Stop</button></p>
<div id='status'></div>
</div>
</body>
</html>