Giter VIP home page Giter VIP logo

roudokuka's Introduction

roudokuka

roudokuka is simple web reader, it's working with browser feature only.
"Roudokuka" == "朗読家" == "Reader"

Example

You can try examples easily in your browser. click ↓ link.
https://snowsunny.github.io/roudokuka

How to use roudokuka?

You must load roudokuka somehow. if it's done, roudokuka is ready to use!!

jsDelivr CDN


Add ↓ tag to somewhere.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/roudokuka/docs/roudokuka.min.js"></script>

npm

roudokuka is published on npm → https://www.npmjs.com/package/roudokuka
install with npm or yarn or something, and add line like this ↓ to somewhere.

import Roudokuka from 'roudokuka'

Simple usage

let roudokuka = new Roudokuka(['1, 2, 3', '4, 5, 6'])
roudokuka.start()

If you want try more examples, check ↓ page.
https://snowsunny.github.io/roudokuka

Documentation

Classes

Roudokuka

This is main class of roudokuka.

Methods

constructor(linesInfoArray, userOptions:Object)

Create roudokuka object.

linesInfoArray
Type: Array
linesInfoArray is must contain string or object.

// string only
let linesInfo = ['1, 2, 3', '4, 5, 6']

// string with line object.
// line object is can set SpeechSynthesisUtterance's properties and events. more help → https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance
let linesInfo = ['1, 2, 3', '4, 5, 6', {
  text: '7, 8, 9',
  pitch: '1.8',
  rate: '1.5',
  onend: (e) => {
    console.log(e)
  }
}]

userOptions
Type: Object
userOptions is overwrite defaultOptions property, It's using for global utterance options and roudokuka's events.

defaultOptions = {
  lang: "",
  onboundary: null,
  onend: null,
  onerror: null,
  onmark: null,
  onpause: null, // still buggy any browser
  onresume: null, // still buggy any browser
  onstart: null,
  pitch: 1,
  rate: 1,
  voice: null,
  volume: 1,
  onLibrettoEnd: undefined
}

start(lineIndex)

start reading with roudokuka.

lineIndex
Type: int (default = 0)
If you want start with not first line, you can set Index number of lines.

stop()

Stop reading.

onReady() - Return: Promise

If you want change voice, this method is wait on voices loading. this method use with voices property.

// Example
let roudokuka = new Roudokuka(['1, 2, 3', '4, 5, 6'])
roudokuka.onReady().then(() => {
  console.log(roudokuka.voices)
})

Events

roudokuka is can use with SpeechSynthesisUtterance's events. more help → https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance

let options = {
  onend: (speechSynthesisEvent, lineObject) => {
    // roudokuka is return "speechSynthesisEvent" and "lineObject" to callback of onend event.
    console.log(speechSynthesisEvent, lineObject)
  }
}
let roudokuka = new Roudokuka(['1, 2, 3', '4, 5, 6'], options)
roudokuka.start()

onLibrettoEnd

If read all lines in libretto property, this event is triggered.

// loop with onLibrettoEnd event
let loopCount = 0
let roudokuka = new Roudokuka(['1, 2, 3', '4, 5, 6'], {
  onLibrettoEnd: () => {
    if(loopCount++ < 2) {
      console.log(`Libretto is end. loop: ${loopCount}`)
      roudokuka.start()
    }
  }
})
roudokuka.start()

roudokuka's People

Contributors

dependabot[bot] avatar snowsunny avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

roudokuka's Issues

以前SpeechSynthesisにあった不具合が直っていないか確認する

snowsunny/novels-reader#15 の確認をしてたら新しく実装された機能があったので、前に確認して不具合があった機能を改めて確認したい。

取り敢えず下記の2つを確認する!

  • 長文の読み上げ
  • 一時停止系の機能

特に一時停止機能が正しく動く様になっていたら嬉しいなぁ…あまり改行を入れない人の作品を読んでいる時に、この機能欲しいなーって何回も思ったので… ☺️ 🙏

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.