JavaScript | SpeechSynthesisUtteranceで一時停止と再開機能

2021-01-312021-02-08JavaScript Audio,JavaScript

JavaScriptのSpeechSynthesisUtteranceを使って再生中の音声読み上げを一時停止、再開する機能の実装サンプルです。

See the Pen JavaScript | speech synthesis pause & resume by yochans (@yochans) on CodePen.

SpeechSynthesisUtteranceで一時停止と再開機能

一時停止にはSpeechSynthesis.pause()を利用します。

SpeechSynthesis.pause();

また、一時停止されている音声読み上げの再開にはSpeechSynthesis.resume()を使います。

SpeechSynthesis.resume();

上記動作サンプルのJavaScriptコードになります。

<button class="btns" id="play-btn">play</button>
<button class="btns" id="pause-btn">pause</button>
<button class="btns" id="resume-btn">resume</button>

//btn
const play_btn = document.querySelector('#play-btn');
const pause_btn = document.querySelector('#pause-btn');
const resume_btn = document.querySelector('#resume-btn');


//play
play_btn.addEventListener( 'click' , play );

function play(){
	
	speechSynthesis.cancel();

	let play_option = new SpeechSynthesisUtterance();
	play_option.text = `吾輩は猫である。名前はまだない。
どこで生れたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考えもなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ち付いて書生の顔を見たのがいわゆる人間というものの見始めであろう。`;
	play_option.lang = 'ja-JP';
	speechSynthesis.speak(play_option);
};

//pause
pause_btn.addEventListener( 'click' , pause );

function pause(){
	speechSynthesis.pause();
};

//pause
resume_btn.addEventListener( 'click' , resume );

function resume(){
	speechSynthesis.resume();
};