使用JS为网站文章添加朗读功能,在这里我们可以使用JS调用浏览器自带的文字语音功能实现文章的功能。

文章页的代码

<div id="read-title">语音朗读文章</div>
<div id="read-article-text">语音朗读文章内容,这里是一篇需要朗读的文章示例,点击朗读按钮进行朗读</div>

我们想要实现点击朗读按钮实现机器朗读:"语音朗读文章内容,这里是一篇需要朗读的文章示例,点击阅读按钮进行朗读"。

新增朗读按钮

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

<button id="read-article">点击朗读</button>

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

// 判断当前环境是否支持朗读功能,如果不支持朗读,就把朗读按钮给删了
if (!window.speechSynthesis) return $('#read').remove();
 
// 朗读按钮点击后(click)做的事情,要干什么
$('#read-article').on('click', function () {
    // 下面两行代码用于生成朗读对象,看不懂不用管,照着写就行
    const synth = window.speechSynthesis;
    const msg = new SpeechSynthesisUtterance();
    
    // 如果当前的文字是 朗读,那么我们就执行朗读功能,否则就是停止朗读
    if ($(this).html() === '朗读') {
        msg.lang = 'zh-CN';
        // $('#read-article-text').text() 是获取朗读的内容,也就是上面的:文章内容文章内。。。
        msg.text = $('#read-article-text').text();
        // 开始朗读
        synth.speak(msg);
        // 将当前的字设置成停止朗读
        $(this).html('停止朗读');
    } else {
        // 否则就是取消朗读
        synth.cancel(msg);
        // 恢复成原样
        $(this).html('朗读');
    }
});

以上就是利用JS调用浏览器自带的功能,实现在线文章朗读功能。有疑问留言哦!!!