h5实现接口返回的富文本，变成语音朗读

1.html

<div class="text-white">
					<div class="container text-center">
						<div class="row">
							<!-- 居中对齐 -->
							<div class="col-md-5 mx-auto">
								<form class="mb-5">
									<!-- 文本输入框 -->
									<div class="form-froup">
										<textarea id="text-input" class="form-control mb-2"
											placeholder="请输入文本内容..."></textarea>
									</div>
									<!-- 视听按钮 -->
									<div class="form-froup">
										<button class="btn btn-light btn-block mb-3 play">试听</button>
										<button type="button" class="pause">暂停</button>
										<button type="button" class="resume">恢复播放</button>
										<p class="text-secondary">
											注意：此应用使用的是Web Speech API，为确保正常运行，请使用最新版
											Chrome 浏览器。
										</p>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>

2.js

// 文字转语音播报
// 1.先拿到文本
var text='';
$.ajax({
	type: 'get',
	url: '接口',
	data: {
		id: 13,
	},
	success:function(res){
		console.log(res.data.record[0].content,'nnnn')
		text=res.data.record[0].content
	}
})
// 初始化 speechSynthesis API
const synth = window.speechSynthesis
// 获取 DOM 节点
const body = document.querySelector('body')
const textForm = document.querySelector('form')
const textInput = document.querySelector('#text-input')
const rate = document.querySelector('#rate')
const rateValue = document.querySelector('#rate-value')
const pitch = document.querySelector('#pitch')
const pitchValue = document.querySelector('#pitch-value')

let voices = []
// 设置暂停的状态值
var pauser=false;
// 设置继续播放的状态值
var resume=false;
var ended=false;//朗读结束状态值
function getVoiceList() {
	voices = synth.getVoices()
	// 循环 voices 数组，并逐一创建一个 option
	voices.forEach((voice) => {
		const option = document.createElement('option')
		option.textContent = voice.name
		// 设置 option 属性
		option.setAttribute('data-lang', voice.lang)
		option.setAttribute('data-name', voice.name)
	})
}
// synth.getVoices() 为异步执行
// synth.getVoices() 方法将在 synth.onvoiceschanged 触发时运行
// 因此须有如下语句，否则 synth.getVoices() 返回空数组
getVoiceList()
if (synth.onvoiceschanged !== undefined) {
	synth.onvoiceschanged = getVoiceList
}
// 发音方法
function speakIt() {
	// 若正在发音则直接返回
	if (synth.speaking) {
		return
	}
	textInput.value=text;
	if (textInput.value != '') {
		// 获取发音文本
		const speakText = new SpeechSynthesisUtterance(textInput.value)
		// 发音结束后触发的方法
		speakText.onend = (e) => {
			$('.play').css('display','inline-block')
			$('.pause').css('display','none')
			ended=true;
		}
		//发音开始
		speakText.onstart = (e) => {
			$('.play').css('display','none')
			$('.pause').css('display','inline-block')
			ended=false;
		}
		// 发音出错是触发的方法
		speakText.onerror = (e) => {
			console.log('出现错误，请重试。')
		}
		// 语音暂停时触发
		speakText.onpause=(e)=>{
			console.log('语音暂停')
		}
		// 语音继续播放
		speakText.onresume=(e)=>{
			console.log('继续播放')
		}
		// 开始发音
			synth.speak(speakText)
		
	}
}
// 提交表单
textForm.addEventListener('submit', (e) => {
	e.preventDefault()
	speakIt()
})
// // 点击播放
$('.play').on('click',function(){
	$('.pause').css('display','inline-block')
	$('.play').css('display','none')
})
// 点击暂停
$('.pause').on('click',function(){
	synth.pause()
	$('.pause').css('display','none')
	$('.resume').css('display','inline-block')
})
// 点击恢复播放
$('.resume').on('click',function(){
	synth.resume()
	// 如果还有内容的话，点击完恢复播放之后暂停应该显示
	if(ended){
		$('.resume').css('display','none')
		$('.play').css('display','inline-block')
	}else{
		$('.resume').css('display','none')
		$('.pause').css('display','inline-block')
	}
	
})

3.css就比较简单了，只是将暂停和继续播放按钮隐藏而已

/* 一进页面暂停，继续播放按钮隐藏 */
.pause,
.resume{
    display: none;
}