window.speechSynthesis.speak文字朗读示例

寻技术 React / R语言 2023年07月08日 146

window.speechSynthesis.speak文字朗读示例,可以应用到中文或英文都可以,示例测试使用的是Chrome浏览器,请注意一下浏览器的版本

中文文字和英文朗读使用示例:

<script> 
	var speaker = new window.SpeechSynthesisUtterance();

    // 开始朗读
    function speakText() {
        var context = $('#num_result').val();
        window.speechSynthesis.cancel();
		
		if ($('#sudu').val()=='' || isNaN($('#sudu').val())===true ){
			alert('朗读速度,填写错误!')
			return false
		}
		/*
			SpeechSynthesisUtterance.lang:设置话语的语言。 例如:“zh-cn”表示中文
			SpeechSynthesisUtterance.pitch:设置说话的音调(音高)。范围从0(最小)到2(最大)。默认值为1
			SpeechSynthesisUtterance.rate:设置说话的速度。默认值是1,范围是0.1到10,表示语速的倍数,例如2表示正常语速的两倍	
			SpeechSynthesisUtterance.text:设置在说话时将合成的文本内容。
			SpeechSynthesisUtterance.volume:设置将在其中发言的音量。区间范围是0到1,默认是1
		*/

		speaker.rate = $("#sudu").val() //设置说话语速 语音朗读速度
		speaker.pitch = 1 //设置说话音量
		
		speaker.text = context;
		window.speechSynthesis.speak(speaker);

    }
    
    // 取消朗读
    function stopSpeak() {
		window.speechSynthesis.cancel();
    }
	
	// 暂停朗读
    function pausedText() {
		window.speechSynthesis.pause();
    }
	
	// 暂停后继续朗读
    function resumeText() {
        window.speechSynthesis.resume();
    }

HTML中按钮事件:

<div class="line1">
      <strong>朗读速度:</strong><input name="sudu" id="sudu" class="num_input" type="text" value="1" title="速度从0.1-2" onkeyup="this.value=this.value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.');"/>
</div>

<div class="line1">
       <strong>朗读内容:</strong><textarea name="num_result" id="num_result" style="width:600px; height:120px;" class="input_border"></textarea>
</div>

<input type="button" id="btn1" class="v_input" onclick="speakText()" value="播放">
<input type="button" id="btn2" class="v_input" onclick="pausedText()" value="暂停">
<input type="button" id="btn3" class="v_input" onclick="resumeText()" value="继续">
<input type="button" id="btn4" class="v_input" onclick="stopSpeak()" value="取消">
关闭

用微信“扫一扫”