This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2018.
The volume property of the SpeechSynthesisUtterance interface gets and sets the volume that the utterance will be spoken at.
If not set, the default value 1 will be used.
A float that represents the volume value, between 0 (lowest) and 1 (highest.)
If SSML is used, this value will be overridden by prosody tags in the markup.
const synth = window.speechSynthesis;
const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");
const voices = synth.getVoices();
// …
inputForm.onsubmit = (event) => {
event.preventDefault();
const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
const selectedOption =
voiceSelect.selectedOptions[0].getAttribute("data-name");
for (const voice of voices) {
if (voice.name === selectedOption) {
utterThis.voice = voice;
}
}
utterThis.volume = 0.5;
synth.speak(utterThis);
inputTxt.blur();
};
| Specification |
|---|
| Web Speech API> # dom-speechsynthesisutterance-volume> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
volume |
33 | 14 | 49 | 21 | 7 | 33 | 62 | No | 7 | 3.0 | No | 7 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance/volume