SpeechSynthesisUtterance: rate プロパティ
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2018年9月.
rate は SpeechSynthesisUtterance インターフェイスのプロパティで、発話をする速度を取得および設定します。
未設定の場合、既定値の 1 が使用されます。
値
浮動小数点数でレート値を表します。 範囲は 0.1 （最低値）から 10 （最高値）で、既定値では 1 が現在のプラットフォームや音声のレートとなり、通常の会話速度に相当します。 他の値はこの値に対する相対的なパーセント値として動作するため、例えば 2 は 2 倍の速さ、0.5 は半分の速さなどです。
音声合成エンジンや音声によっては、最小レートや最大レートがさらに制約される場合があります。 SSML を使用している場合、この値はマークアップの韻律タグによって上書きされます。
例
再生レートの調整
この例では、スライダーを使って再生速度を調整し、「再生」ボタンで発話を再生します。
HTML
html
<p id="text">暗く嵐の夜でした。</p>
<div id="rate-control">
<label for="rate">Rate:</label>
<input type="range" min="0.5" max="2" value="1" step="0.1" id="rate" />
</div>
<button id="play">再生</button>
CSS
css
body {
font-family: sans-serif;
}
#rate-control {
display: flex;
align-items: center;
gap: 1rem;
margin: 1rem 0;
}
JavaScript
js
const synth = window.speechSynthesis;
const text = document.querySelector("#text");
const play = document.querySelector("#play");
const rate = document.querySelector("#rate");
function speak() {
if (synth.speaking) {
synth.cancel();
}
const utterThis = new SpeechSynthesisUtterance(text.textContent);
utterThis.addEventListener("error", () => {
console.error("SpeechSynthesisUtterance error");
});
utterThis.rate = rate.value;
synth.speak(utterThis);
}
play.addEventListener("click", speak);
出力
仕様書
| Specification |
|---|
| Web Speech API # dom-speechsynthesisutterance-rate |
ブラウザーの互換性
Loading…