使用React.js实现的语音阅读测试

使用React.js实现的网页应用，使用window.speechSynthesis接口实现的语音阅读消息。

html5, 语音阅读

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

let
  n = 13,
  v = 1,
  r = 0.7,
  p = 1,
  endWords = '...конец массива', //end of array
  startWords = 'ждать.,ждать,.ждать., метка,';

class Awesome extends React.Component {
  constructor(){
    super();
    this.state = {
      play: false
    }
  }
  
  // TODO: refactor the hell out of this franken-function!
  sayStuff() {
    const nums = [startWords];
    for (var i = 0; i < n; i++) {
      if (i < n - 1) nums.push(Math.floor(Math.random() * 9))
      else {
        nums.push(endWords);
      }
    }
    const noComma = nums.toString().replace(/\,/g, ".");
    console.info(noComma);
    var msg = new SpeechSynthesisUtterance();
    msg.voiceURI = 'native';
    msg.volume = v; // 0 to 1
    msg.rate = r; // 0.1 to 10
    msg.pitch = p; //0 to 2
    msg.text = noComma;
    msg.lang = 'ru'; // en-US, en-GB, en-ZA, and others work also
    window.speechSynthesis.speak(msg);
  }

stopTalkingToMe() {
    window.speechSynthesis.cancel();
  }
  
  start(){
    const audio = document.getElementById('russian');
    this.setState({play: true});
    audio.play();
  }
  
  stop(){
    const audio = document.getElementById('russian');
    this.setState({play: false});
    audio.pause();
  }

playRussianManSignOff(e){  
      !this.state.play 
        ? this.start()
        : this.stop();
  }
  
  render() {
    return (
      <div>
        <h1 className="columns ten">Numbers!</h1>
        <i 
          id="easter" 
          className="columns two shadow fa fa-asterisk fa-2x" 
          onClick={this.playRussianManSignOff.bind(this)}/>
            <audio 
              title="Russian man sign off"
              id="russian" 
              src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/194840/Russian_Man_signoff_2013-04-23.ogg"></audio>
        <h4 className="columns twelve">...lots of them</h4>  
        <div className="row">
          <div 
            className="columns six button button-primary" 
            onClick={this.sayStuff.bind(this)}>
              say them to me
          </div>
          <div 
            className="columns six button stop" 
            onClick={this.stopTalkingToMe.bind(this)}>
              ok, stop talking
          </div>
        </div>
      </div>
    )
  }
}

ReactDOM.render(
  <Awesome />,
  document.getElementById('yes')
);

编译

CSS

HTML

使用React.js实现的网页应用，使用window.speechSynthesis接口实现的语音阅读消息。

html5, 语音阅读

编辑器支持Emmet

快捷键

使用React.js实现的网页应用，使用window.speechSynthesis接口实现的语音阅读消息。

html5, 语音阅读

使用React.js实现的生命游戏算法演示动画

使用Matter.js实现围绕在标题文本周围的重力球效应

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：