JSブラウザでのテキスト読み上げ、Vedioタグ

JavaScriptブラウザでのテキスト読み上げ

テキスト合成音声
上記では、2つのメソッドspeakText（text）とstopSpeak（）を直接使用して、音声の読み取りと停止をトリガーしました。

これら2つの関数を実装する方法を見てみましょう。

実際、最近のブラウザはすでにデフォルトで上記の機能を提供しています。

var speechSU = new window.SpeechSynthesisUtterance();
speechSU.text = 'Hello,World';
window.speechSynthesis.speak(speechSU);

互換性：Chrome 33以降、Firefox 49以降、またはIE-Edge）

2つのAPIを使用するだけです。

SpeechSynthesisUtterance 用于语音合成
lang : 语言 Gets and sets the language of the utterance.
pitch : 音高 Gets and sets the pitch at which the utterance will be spoken at.
rate : 语速 Gets and sets the speed at which the utterance will be spoken at.
text : 文本 Gets and sets the text that will be synthesised when the utterance is spoken.
voice : 声音 Gets and sets the voice that will be used to speak the utterance.
volume : 音量 Gets and sets the volume that the utterance will be spoken at.
onboundary : 单词或句子边界触发，即分隔处触发 Fired when the spoken utterance reaches a word or sentence boundary.
onend : 结束时触发 Fired when the utterance has finished being spoken.
onerror : 错误时触发 Fired when an error occurs that prevents the utterance from being succesfully spoken.
onmark : Fired when the spoken utterance reaches a named SSML "mark" tag.
onpause : 暂停时触发 Fired when the utterance is paused part way through.
onresume : 重新播放时触发 Fired when a paused utterance is resumed.
onstart : 开始时触发 Fired when the utterance has begun to be spoken.
SpeechSynthesis : 用于朗读
paused : Read only 是否暂停 A Boolean that returns true if the SpeechSynthesis object is in a paused state.
pending : Read only 是否处理中 A Boolean that returns true if the utterance queue contains as-yet-unspoken utterances.
speaking : Read only 是否朗读中 A Boolean that returns true if an utterance is currently in the process of being spoken — even if SpeechSynthesis is in a paused state.
onvoiceschanged : 声音变化时触发
cancel() : 情况待朗读队列 Removes all utterances from the utterance queue.
getVoices() : 获取浏览器支持的语音包列表 Returns a list of SpeechSynthesisVoice objects representing all the available voices on the current device.
pause() : 暂停 Puts the SpeechSynthesis object into a paused state.
resume() : 重新开始 Puts the SpeechSynthesis object into a non-paused state: resumes it if it was already paused.
speak() : 读合成的语音，参数必须为SpeechSynthesisUtterance的实例 Adds an utterance to the utterance queue; it will be spoken when any other utterances queued before it have been spoken.

次に、上記の2つのメソッドは次のように記述できます。

var speaker = new window.SpeechSynthesisUtterance();
var speakTimer,
    stopTimer;

// 开始朗读
function speakText(text) {
    clearTimeout(speakTimer);
    window.speechSynthesis.cancel();
    speakTimer = setTimeout(function () {
        speaker.text = text;
        speaker.text = text;
	    speaker.rate = 1;// 二倍速（默认为 1，范围 0.1～10）
	    speaker.pitch = 1;// 高音调（数字越大越尖锐，默认为 1，范围 0～2 ）
	    speaker.volume = 1;// 音量 0.5 倍（默认为1，范围 0～1）
        window.speechSynthesis.speak(speaker);
    }, 200);
}

// 停止朗读
function stopSpeak() {
    clearTimeout(stopTimer);
    clearTimeout(speakTimer);
    stopTimer = setTimeout(function () {
        window.speechSynthesis.cancel();
    }, 20);
}

音声合成はもともと非同期操作であるため、上記の処理はその過程で実行されます。

document.getElementById（ "audioplayが"）。ボリューム= 0.5 //設定した音量
本。$R＆LTEFS。AUDIOPLAY。PLAY（）//マルチキャスト放電THIS。$ refs.audioPlay.pause（）//一時停止