N-speech NPM | npm.io

nSpeech

nSpeech is screen reader library (TTS).
nSpeechはWeb Speech APIを使用した、スクリーンリーダーライブラリです (TTS)。

Install

$ npm install n-speech

Usage

Include nSpeech.js before </body>.
</body>の前にnSpeech.jsを追加します。
Please add ".speech" to any tags of the sentence you want to read.
読み上げたい文章のタグに".speech"を追加してください。

<body>
<p class="speach">The sentence is read.</p>
<p class="speach">この文章が読まれます。</p>

<button type="button" id="play" class="button">Play</button>
<button type="button" id="pause" class="button">Pause</button>

<script  src="js/nSpeech.js"></script>
<script>
  var speech = new nSpeech();
  var play = document.getElementById('play');
  var stop = document.getElementById('stop');

  play.addEventListener('click', function(){
    speech.play();
  });

  stop.addEventListener('click', function(){
    speech.stop();
  });
</script>
</body>

Selector and Options defined

The selector and options can be defined to this.
セレクタとオプションを定義することができます。

// In this case is ID.
// Other case is class and tag. (ex: '.speech', 'p')
var example_id = new nSpeech('#example_id');

var example_class = new nSpeech('.example_class');

var example_tag = new nSpeech('p');

var example_option = new nSpeech({ lang: 'ja-JP' });

var example_id_option = new nSpeech('#example_id_option', {
  lang: 'ja-JP'
});

Override the text selection

Able to read the override selected text by drag.
ドラッグで選択したテキストを読むことができます。

Create select with voice list

Able to create select with voice list.
音声リストをselectに出力することができます。

<body>
<select id="voiceSelect"></select>

<script  src="js/nSpeech.js"></script>
<script>
  var speech = new nSpeech({
    selectId: "voiceSelect" // Create select voice list.
  });
</script>
</body>

Options

The following options are available.
以下のオプションが利用できます。
lang can use the options from (ja-JP) or other selects in this link.
langでは以下の以下のリンクにあるセレクトの(ja-JP)などが利用できます。
https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices

// default options
var options = {

  // This is spoken the language. ex: 'en-US'.
  lang    : "",
  
  // This will insert an object from the voice
  voice   : null,
  
  // Speech volume.
  volume  : 1,
  
  // Speech rate. Speech gets faster if increase.
  rate    : 1,
  
  // Speech pitch. Speech gets shrill voice if increase
  pitch   : 1,
  
  // Read this text.
  text    : "",
  
  // Create option elements in this id.
  selectId      : "",

  // Create this elements in selectId.
  selectElement : "option",

  // callback methods
  onend   : function() { return undefined; },
  onstart : function() { return undefined; },
  onerror : function() { return undefined; },
  onmark  : function() { return undefined; },

  // Debug mode.
  debug   : false
};
var speech = new nSpeech(options);

Methods

The following methods are available.
以下のメソッドが使えます。

var speech = new nSpeech();

// play
speech.play();

// pause
speech.pause();

// resume
// Start when paused.
speech.resume();

// stop
speech.stop();


////////////////
// change options.
////////////////

// replace text
speech.replaceText("Replace text");

// replace voice
speech.changeVoice("ja-JP");

// change volume
speech.changeVolume(1);

// change rate
speech.changeRate(1);

// change pitch
speech.changePitch(1);

Events

The following callback Methods are available.
以下のコールバックメソッドが使えます。

var speech = new nSpeech();

// Fired when the spoken utterance reaches a word or sentence boundary.
speech.onboundary(function(){
  console.log("onboundary");
});

// Fire when finish.
speech.onend = (function(){
  console.log("onend");
});

// Fire when an error occurs.
speech.onerror = (function(){
  console.log("onerror");
});

// Fired when the spoken utterance reaches a named SSML "mark" tag.
speech.onmark = (function(){
  console.log("onmark");
});

// Fire when pause.
speech.onpause = (function(){
  console.log("onpause");
});

// Fire when resume.
speech.onresume =(function(){
  console.log("onresume");
});

// Fire when start.
speech.onstart = (function(){
  console.log("onstart");
});