为你的网站文章添加朗读功能

805 阅读 1 评论 282 字

例如,我的文章页的代码结构如下

<div id="j-title">文章标题</div>
<div id="j-article">文章内容文章内容文章内容文章内容文章内容</div>

我们想要实现,点击 朗读按钮 实现机器朗读:文章内容文章内容文章内容文章内容文章内容

新增朗读按钮

找到一个合适的位置,放置一个用于点击朗读的按钮,代码如下

<button id="read">朗读</button>

朗读按钮点击后的事件(要做的事情)

// 判断当前环境是否支持朗读功能,如果不支持朗读,就把朗读按钮给删了
if (!window.speechSynthesis) return $('#read').remove();

// 朗读按钮点击后(click)做的事情,要干什么
$('#read').on('click', function () {
    // 下面两行代码用于生成朗读对象,看不懂不用管,照着写就行
    const synth = window.speechSynthesis;
    const msg = new SpeechSynthesisUtterance();
    
    // 如果当前的文字是 朗读,那么我们就执行朗读功能,否则就是停止朗读
    if ($(this).html() === '朗读') {
        msg.lang = 'zh-CN';
        // $('#j-article').text() 是获取朗读的内容,也就是上面的:文章内容文章内。。。
        msg.text = $('#j-article').text();
        // 开始朗读
        synth.speak(msg);
        // 将当前的字设置成停止朗读
        $(this).html('停止朗读');
    } else {
        // 否则就是取消朗读
        synth.cancel(msg);
        // 恢复成原样
        $(this).html('朗读');
    }
});
文章评论 (1)
  1. 夏目贵志 夏目贵志 回复TA
    元旦快乐~!
QQ咨询
QQ号码
979779692
微信咨询
微信二维码
在线咨询
微信咨询 QQ咨询
客服头像

截屏,微信识别二维码

微信号:itx2021

(点击微信号复制,添加好友)

微信号已复制,请打开微信添加好友!