• H5语音合成播放

    最少的代码实现语音播放

    let spee = window.speechSynthesis
var utterThis = new SpeechSynthesisUtterance('JavaScript runTime例如 Node.js，deno.js，bun.js');
spee.speak(utterThis); 

    • 1
    • 2
    • 3

    兼容问题

    在这里插入图片描述

    speechSynthesis 网页语音 API 的SpeechSynthesis 接口是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。

    [属性

    1. SpeechSynthesis.paused 只读

    当SpeechSynthesis 处于暂停状态时 值返回 true

    1. SpeechSynthesis.pending 只读

    当语音播放队列到目前为止保持没有说完的语音时 值返回 true

    1. SpeechSynthesis.speaking 只读

    当语音谈话正在进行的时候，即使SpeechSynthesis处于暂停状态 值返回 true

    speechSynthesis 方法

    在这里插入图片描述

    speechSynthesis.getVoices() 获取当前设备所有可用声音的

    let spee = window.speechSynthesis;
let voices = spee.getVoices();
	// 过滤出中文
	const zhList = voices.filter(item=>item.lang.includes('zh-'))
	console.log(zhList);
	for (let i = 0; i < zhList.length; i++) {
	 	console.log(zhList[i].name + ' (' + zhList[i].lang + ')');
	 }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    speechSynthesis.cancel() 移除当前播放语音

    let spee = window.speechSynthesis;
spee.cancel()

    • 1
    • 2

    SpeechSynthesis.pause()
    SpeechSynthesis 接口的 pause() 方法将 SpeechSynthesis 对象置于暂停状态。

    let spee = window.speechSynthesis;
spee.pause()

    • 1
    • 2

    SpeechSynthesis.resume()
    SpeechSynthesis 接口的 resume() 方法将 SpeechSynthesis 对象置于非暂停状态：如果它已经暂停，则恢复它。

    let spee = window.speechSynthesis;
spee.resume()

    • 1
    • 2

    SpeechSynthesis.speak()
    SpeechSynthesis 接口的 speak() 方法将一个话语添加到话语队列中；当任何其他话语在被说出之前排队时，它将被说出 (播放)

    let spee = window.speechSynthesis;
var utterThis = new SpeechSynthesisUtterance('JavaScript runTime例如 Node.js，deno.js，bun.js');
spee.speak(utterThis )

    • 1
    • 2
    • 3

    SpeechSynthesisUtterance

    Web语音API的语音合成语音接口表示语音请求。它包含语音服务应该阅读的内容以及关于如何阅读的信息（例如语言、音调和音量）
    在这里插入图片描述

    在这里插入图片描述

    属性

    SpeechSynthesisUtterance.lang

    语音合成话语接口的lang属性获取并设置话语的语言。
    如果未设置，则将使用应用程序的lang（即lang值），如果也未设置，将使用用户代理默认值。

    SpeechSynthesisUtterance.pitch

    获取并设置说话的音调

    表示间距值的浮点。它可以在0（最低）到2（最高）之间，1是当前平台或语音的默认音调。一些语音合成引擎或语音可能会进一步限制最小和最大速率。如果使用SSML，该值将被标记中的韵律标记覆盖。

    SpeechSynthesisUtterance.rate

    获取并设置说话的速度。

    表示速率值的浮点。它的范围可以在0.1（最低）到10（最高）之间，1是当前平台或语音的默认音调，对应于正常的语速。其他值作为相对于此的百分比，因此，例如2是速度的两倍，0.5是速度的一半，等等。
    一些语音合成引擎或语音可能会进一步限制最小和最大速率。如果使用SSML，该值将被标记中的韵律标记覆盖。

    SpeechSynthesisUtterance.text

    获取并设置在说话时将合成的文本。

    语音合成-话语接口的文本属性获取并设置在说话时将合成的文本。

    SpeechSynthesisUtterance.voice

    获取并设置将用于说话的声音。

    voice 属性获取和设置将用于说出话语的声音。

    这应该设置为 SpeechSynthesis.getVoices() 返回的 SpeechSynthesisVoice 对象之一。如果在说出话语时未设置，则使用的语音将是可用于该话语的语言设置的最合适的默认语音。

    SpeechSynthesisUtterance.volume

    获取并设置语音的音量。

    语音合成语音接口的音量属性获取并设置语音的音量。
    如果未设置，将使用默认值1。
    价值表示体积值的浮点，介于0（最低）和1（最高）之间

    代码示例

    let spee = window.speechSynthesis, utterThis = new SpeechSynthesisUtterance('JavaScript runTime例如 Node.js，deno.js，bun.js'), Voices = window.speechSynthesis.getVoices()
utterThis.lang = 'zh-HK' // 这种播放语言
utterThis.voice = voices[Voices.length]; // 设置播放语音声音 获取最后一个
utterThis.pitch = 2; //设置说话的音调(说话的音高)	1-2
utterThis.rate = 1; // 设置语速 0.1-10
utterThis.volume = 0.2 // 话的音量0.1-1
spee.speak(utterThis); // 播放

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    事件

    事件属性

    start (开始播放)
    resume （重新播放）
    boundary （在播放时触发）
    end （播放结束）
    error （播放错误）
    pause (暂停)
    mark

    事件返回参数 object
    除了下面列出的属性外，还可以使用父接口Event的属性。
    charIndex （字符索引）只读
    返回字符在语音合成语句中的索引位置。事件触发时正在讲话的文本。
    elapsedTime （运行时间）只读
    返回语音合成发出后经过的时间（秒）。开始有人说事件是在触发的。
    name（名称）只读
    返回与作为语音合成语句发生的某些类型的事件相关联的名称。正在发言的文本：在标记事件的情况下达到的SSML标记的名称，或在边界事件的情况中达到的边界类型。
    utterance（话语）只读
    返回触发事件的语音合成发音实例。
    在这里插入图片描述

    事件实参

    事件代码示例

    
let utterThis = new SpeechSynthesisUtterance('JavaScript runTime例如 Node.js，deno.js，bun.js');

	// 正在朗读时触发
	utterThis.addEventListener('boundary',(e)=>{
		console.log('boundary',e);
	})
	
	//结束时触发
	utterThis.addEventListener('end',(e)=>{
		console.log('end',e);
	})
	
	//错误时触发
	utterThis.addEventListener('error',(e)=>{
		console.log('error',e);
	})
	
	// 暂停
	utterThis.addEventListener('pause',(e)=>{
		console.log('pause',e);
	})
	
	//开始
	utterThis.addEventListener('start',(e)=>{
		console.log('start',e);
	})
	
	// 重新开始
	utterThis.addEventListener('resume',(e)=>{
		console.log('resume',e);
	})
	
	utterThis.addEventListener('mark',(e)=>{
		console.log('mark',e);
	})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    代码示例

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
	head>
	<body>
		<button onclick="getVoiceslist()">获取当前声音列表button>
		<button onclick="resume()" >恢复button>
		<button onclick="pause()" >暂停button>
		<button onclick="cancel()" >取消button>
	body>
	<script>

		let spee = window.speechSynthesis;
		function getVoiceslist() {
			// 获取当前语言
			console.log(speechSynthesis)	

			//到得所有声音类型
			let voices = spee.getVoices();
			
			// 过滤出中文
			const zhList = voices.filter(item=>item.lang.includes('zh-'))
			
			console.log(zhList);
			// for (let i = 0; i < zhList.length; i++) {
			// 	console.log(zhList[i].name + ' (' + zhList[i].lang + ')');
			// }

			var utterThis = new SpeechSynthesisUtterance('JavaScript runTime例如 Node.js，deno.js，bun.js');
			utterThis.lang = 'zh-HK' // 这种播放语言 （粤语）
			utterThis.voice = voices[zhList.length]; // 设置播放语音声音
			utterThis.pitch = 2; //设置说话的音调(说话的音高)	1-2
			utterThis.rate = 1; // 设置语速 0.1-10
			utterThis.volume = 0.2 // 话的音量0.1-1
			spee.speak(utterThis); // 播放
			
			// 5s 后关闭当播放
			setTimeout(()=>{
				spee.cancel()
			},5000)
			
			// 正在朗读时触发
			utterThis.addEventListener('boundary',(e)=>{
				console.log('boundary',e);
			})
			
			//结束时触发
			utterThis.addEventListener('end',(e)=>{
				console.log('end',e);
			})
			
			//错误时触发
			utterThis.addEventListener('error',(e)=>{
				console.log('error',e);
			})
			
			// 暂停
			utterThis.addEventListener('pause',(e)=>{
				console.log('pause',e);
			})
			
			//开始
			utterThis.addEventListener('start',(e)=>{
				console.log('start',e);
			})
			
			// 重新开始
			utterThis.addEventListener('resume',(e)=>{
				console.log('resume',e);
			})
			
			utterThis.addEventListener('mark',(e)=>{
				console.log('mark',e);
			})
			
		}

	function resume(){
		 spee.resume() // resume
	}
	function pause(){
		spee.pause() // 暂停
	}
	function cancel(){
		spee.cancel() // 取消
	}

	script>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
  • 相关阅读:
    前端基础之《Bootstrap（11）—JavaScript插件_模态框和下拉菜单》
    烟雾报警系统设计与实现
    C语言 指针 模拟排序函数 指针数组笔试题上
    2019年数维杯数学建模B题火灾等级评价与快速救援措施优化求解全过程文档及程序
    P15 P16 P17 文件读写
    03、GO语言变量定义、函数
    ＜ ElementUi组件库： el-progress 进度条Bug及样式调整 ＞
    企业数据挖掘平台产品特色及合作案例介绍
    JNI调用NoSuchMethodError: no non-static method错误
    深入浅出计算机组成原理（五）-I/O
  • 原文地址：https://blog.csdn.net/qq_39970857/article/details/126124817