使用Web语音阅读API实现文本阅读并且高亮当前词汇

Web Speech API Demo

h5, speech, voice

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2144
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

var synth = window.speechSynthesis;
var el = document.querySelector("#allstar");
var pgps = el.querySelectorAll("p");

var currIndex = 0;
var fullText = "";
var playing = false;

pgps.forEach(function(p) {
    var html = p.innerHTML;

p.innerHTML = "";

html.split(" ").filter(function(w) {
 return w.trim().length;
 }).reduce(function(prev, curr) {
 var br = curr === " ";
 var elem = document.createElement(br ? "br" : "span");

if (!br) {
            elem.dataset.index = currIndex;
            elem.innerHTML = curr;
            var space = document.createElement("span");
            space.textContent = " ";
            prev.push(space);
        }

prev.push(elem);

fullText += curr.replace(" ", "") + " ";
 currIndex += elem.textContent.length + 1;

return prev;
    }, []).forEach(function(span) {
        return p.appendChild(span);
    });
});

var utterThis = new SpeechSynthesisUtterance(fullText);
var ctp = document.querySelector(".ctp");
utterThis.pitch = 1;
utterThis.rate = 1;

utterThis.onboundary = function(event) {
    var index = event.charIndex;

var el = document.querySelector("[data-index='" + index + "']");
    if (el) {
        var els = document.querySelectorAll("[data-index]");
        els.forEach(function(e) {
            return e.classList.remove("current");
        });
        el.classList.add("current");
    }
};

document.addEventListener("click", function() {
    if (!playing) {
        ctp.classList.add("ctp--hidden");
        synth.speak(utterThis);
        playing = true;
        return;
    }

ctp.classList.remove("ctp--hidden");
    synth.cancel();
    playing = false;
});

编译

CSS

HTML

Click to play
<div id="allstar">
 
 Somebody once told me the world is gonna roll me
 I ain't the sharpest tool in the shed
 She was looking kind of dumb with her finger and her thumb
 In the shape of an "L" on her forehead
 
 
 
 Well the years start coming and they don't stop coming
 Fed to the rules and I hit the ground running
 Didn't make sense not to live for fun
 Your brain gets smart but your head gets dumb
 So much to do, so much to see
 So what's wrong with taking the back streets?
 You'll never know if you don't go
 You'll never shine if you don't glow
 
 
 
 Hey now, you're an all-star, get your game on, go play
 Hey now, you're a rock star, get the show on, get paid
 And all that glitters is gold
 Only shooting stars break the mold
 
 
 
 It's a cool place and they say it gets colder
 You're bundled up now, wait till you get older
 But the meteor men beg to differ
 Judging by the hole in the satellite picture
 The ice we skate is getting pretty thin
 The water's getting warm so you might as well swim
 My world's on fire, how about yours?
 That's the way I like it and I never get bored
 
 
 
 Hey now, you're an all-star, get your game on, go play
 Hey now, you're a rock star, get the show on, get paid
 All that glitters is gold
 Only shooting stars break the mold
 
 
 
 Hey now, you're an all-star, get your game on, go play
 Hey now, you're a rock star, get the show, on get paid
 And all that glitters is gold
 Only shooting stars
 
 
 
 Somebody once asked could I spare some change for gas?
 I need to get myself away from this place
 I said yep what a concept
 I could use a little fuel myself
 And we could all use a little change
 
 
 
 Well, the years start coming and they don't stop coming
 Fed to the rules and I hit the ground running
 Didn't make sense not to live for fun
 Your brain gets smart but your head gets dumb
 So much to do, so much to see
 So what's wrong with taking the back streets?
 You'll never know if you don't go (go!)
 You'll never shine if you don't glow
 
 
 
 Hey now, you're an all-star, get your game on, go play
 Hey now, you're a rock star, get the show on, get paid
 And all that glitters is gold
 Only shooting stars break the mold
 
 
 
 And all that glitters is gold
 Only shooting stars break the mold
 
</div>

<!--
 ,-' `._ 
 ,' `. ,-. 
 ,' \ ),.\ 
 ,. / \ /( \; 
 /'\\ ,o. ,ooooo. \ ,' `-') 
 )) )`. d8P"Y8. ,8P"""""Y8. `' .--"' 
 (`-' `Y' `Y8 dP `' / 
 `----.( __ ` ,' ,---. ( 
 ),--.`. ( ;,---. ) 
 / \O_,' ) \ \O_,' | 
 ; `-- ,' `---' | 
 | -' `. | 
 _; , ) : 
 _.'| `.:._ ,.::" `.. | 
 --' | .' """ ` |`. 
 | :; : : _. |`.`.-'--. 
 | ' . : :__.,'|/ | \ 
 ` \--.__.-'|_|_|-/ / ) 
 \ \_ `--^"__,' , | 
 -hrr- ; ` `--^---' ,' | 
 \ ` / / 
 \ ` _ _ / 
 \ ` / 
 \ ' ,' 
 `. , _,' 
 `-.___.---'

W H A T   A R E   Y O U   D O I N G   I N   M Y   S W A M P!
-->

Web Speech API Demo

h5, speech, voice

编辑器支持Emmet

快捷键

Web Speech API Demo

h5, speech, voice

使用网页组件(webcomponents)实现的标题文本撒花动画特效

使用GSAP实现的3D走马灯品牌图文展示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：