如何给网站添加一个文章朗读功能

<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('朗读');
    }
});