欢迎您来到,李雷博客 | PHP博客        登录  |  注册

window.speechSynthesis.speak文字朗读示例

更新:2023-06-01 10:04:04
人气:1137
来源:本站原创
A+

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="取消">
推荐的文章
# 发表我的评论
  /     /  
# 最近评论
暂时还没有评论,要不要说点什么?
  Ads by Google
  联系博主
Hello,本博客系统采用PHP和MySql开发,程序开发完全是因为个人爱好,是自己纯手写PHP源代码,未采用任何PHP框架!
QQ:858353007   微信号:lileihot123
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
加我微信
移动端访问
 
 
Copyright © 2014- 2024 www.mdaima.com All Rights Reserved.
李雷博客,专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客!   ICP备案号:京ICP备10202169号-4