<div class="div">
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
     <p>你好，世界！</p>
 </div>
 <div class="btn">播放</div>

需要引入jquery-1.8.1.min.js（那个版本都行）

var app = {
        audioOff: true,
        outer: $('.div p'),
        index: 0,//初始值
        msg: new SpeechSynthesisUtterance(),
        content: '语音播报结束',//文字内容
        onInit() {
            app.content = app.outer.eq(app.index).text();
            this.event();

        },
        configure() {
            app.msg.text = app.content;
            app.msg.lang = "zh-CN";//使用的语言:中文
            app.msg.volume = 1;//声音音量:0-1
            app.msg.rate = 0.8;//语速:0.1-10
            app.msg.pitch = 0.8;//音高:0-2
            app.play();
        },
        play() {
            console.log("语音播报");
            speechSynthesis.speak(app.msg);
            app.onend();
        },
        // 暂停
        stop() {
            speechSynthesis.stop(app.msg);
        },
        // 结束
        onend() {
            app.msg.onend = () => {
                console.log("语音播报结束");
                app.index += 1;
                if (app.index <= (app.outer.length - 1)) {
                    app.content = app.outer.eq(app.index);
                    app.outer.eq(app.index).css({
                        'color': 'red',
                    });
                    app.configure();
                }
            };
        },
        // 事件
        event() {
            $('body').on('click', '.btn', function () {
                console.log("语音");
                app.configure();
            });
        }
    }
    app.onInit();