html5通过js实现对⽹页⽂本内容语⾳朗读教程
简介
⽹页⽂字语⾳阅读功能实现的核⼼是通过  的SpeechSynthesis 接⼝是语⾳服务的控制接⼝；它可以⽤于获取设备上关于可⽤的合成声⾳的信息，开始、暂停语⾳，或除此之外的其他命令。
在定义了⼀些必要的变量后，我们⽤ 获取了⼀列可⽤的声⾳并且⽤它们⽣成⼀列可选表单，这样⽤户能够选择他们想要的声⾳。
图⽰
⽹页语⾳的语⾔类型是根据客户端本地浏览器类型，拥有不同的语⾔类型，⽹页⽂字的语⾳阅读可以在没有外⽹的情况下使⽤。
项⽬结构图
html内容文本框代码⽰例
index.html 完整代码⽰例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语⾳⽂字阅读器</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<h1>语⾳⽂字阅读器</h1>
<button id="toggle-box" class="btn btn-toggle" type="button">阅读输⼊⽂本</button>
<div id="box" class="box">
<h3>选择语⾳的语⾔类型:</h3>
<div class="select-container select-voices">
<div class="select-title">
<div class="select-content" tabindex="0" hidefocus="true"></div>
<i class="select-icon select-down"></i>
</div>
<ul class="select-items"></ul>
</div>
<textarea class="read-content" id="read-content" placeholder="请输⼊要阅读的内容"></textarea>            <button id="read-btn" class="btn read-btn" type="button">阅读</button>
<span class="close-box-btn" id="close-box-btn">×</span>
</div>
<main id="main" class="main"></main>
</div>
</body>
<script src="js/message.js"></script>
<script src="js/index.js"></script>
</html>
index.js 代码⽰例
function $(selector) {
return document.querySelector(selector);
}
function $$(selector) {
return document.querySelectorAll(selector);
}
HTMLElement.prototype.hasClass = function (className) {
return new RegExp(" " + className + " ").test(' ' + this.className + ' ');
// 语⾔类型数组
let voices = [];
// 默认语⾔类型
let voice = "zh-CN";
const songs = [
{
name: "她不是真的爱我",
singer: "⽩⼩⽩",
imgName: "baixiaobai"
},
{
name: "下雪的季节",
singer: "本兮",
imgName: "benxi"
},
{
name: "今⽣他⽣",
singer: "陈启泰",
imgName: "chenqitai"
},
{
name: "流着泪为你祝福",
singer: "韩⼩薰",
imgName: "hanxiaoxun"
},
{
name: "真爱你的云",
singer: "黄国俊",
imgName: "huangguojun"
},
{
name: "车站",
singer: "李健",
imgName: "lijian"
},
{
name: "伤了⼼的⼥⼈怎么了",        singer: "刘涛",
imgName: "liutao"
},
{
name: "画颜",
singer: "魏新⾬",
imgName: "weixinyu"
},
{
name: "祝你⼀路顺风",
singer: "吴奇隆",
imgName: "wuqilong"
},
{
name: "回来我的爱",
singer: "阳⼀",
imgName: "yangyi"
},
{
name: "绵阳印象",
singer: "⽻上轩",
imgName: "yushangxuan"
},
{
name: "歌",
singer: "张翰",
imgName: "zhanghan"
{
name: "烈⽕青春",
singer: "张⾬⽣",
imgName: "zhangyusheng"
},
{
name: "成都",
singer: "赵雷",
imgName: "zhaolei"
},
{
name: "歌唱⼆⼩放⽜郎",
singer: "杨慧妍",
imgName: "yanghuiyan"
},
{
name: "我的唇吻不到我爱的⼈",
singer: "王奕⼼",
imgName: "wangyixin"
},
{
name: "贝多芬的悲伤",
singer: "萧风",
imgName: "xiaofeng"
},
{
name: "菊花爆满⼭",
singer: "马博",
imgName: "mabo"
},
{
name: "⼀亿个伤⼼",
singer: "蒙⾯哥",
imgName: "mengmiange"
},
{
name: "帝都",
singer: "萌萌哒天团",
imgName: "mengmengdatiantuan"    },
{
name: "陪你⼀起变⽼",
singer: "唐古",
imgName: "tanggu"
},
{
name: "我在前世约了你",
singer: "唐古",
imgName: "tanggu"
},
{
name: "恋⼈⼼",
singer: "魏新⾬",
imgName: "weixinyu"
},
{
name: "新娘不是我",
singer: "程响",
imgName: "chengxiang"
}
];
// 变量定义部分
const toggleBoxBtn = $("#toggle-box"); const closeBoxBtn = $("#close-box-btn");
const readBtn = $("#read-btn");
const box = $("#box");
const readContent = $("#read-content");
const main = $("#main");
// 获取阅读信息对象实例
let message = new SpeechSynthesisUtterance();
/
/ console.log(message);
message.lang = voice;
songs.forEach(createPopBox);
/**
* 创建每⼀块
* @param {*} item
*/
function createPopBox(item){
const boxItem = ateElement('div');
boxItem.classList.add('box');
boxItem.innerHTML = `<p>我是${ item.singer }，我唱的《${ item.name }》。</p>`;    main.appendChild(boxItem);
}
// 点击每⼀列
const children = main.querySelectorAll('.box');
children.forEach(box => {
box.addEventListener('click',() => {
children.forEach((child) => {
ve('active');
});
box.classList.add('active');
setMessageText(box.querySelector('p').im());
speakMessage();
});
});
/**
* 设置⽂本
* @param {*} text
*/
function setMessageText(text){
= text;
}
/**
* 获取阅读语⾔类型
*/
function getVoices() {
voices = Voices();
// console.log(voices);
}
/**
* 加载下拉选项
* @param {*} selectContainer
*/
function loadSelect(selectContainer) {
const selectListItem = selectContainer.querySelector('.select-items');
selectListItem.innerHTML = "";
voices.forEach(voice => {
const voiceItem = ateElement('div');
voiceItem.classList.add('select-option');
voiceItem.setAttribute('data-value', voice.lang);
voiceItem.innerHTML = voice.name + '(' + voice.lang + ")";
selectListItem.appendChild(voiceItem);
});
const label = voices.find(_ => voice === _.lang).name + '(' + voice + ")";
setDefaultSelectValue(selectContainer.querySelector('.select-content'),label);
}
/
**
* 设置选择下拉选项值
* @param {*} el

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。