| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>5.2.3 SpeechSynthesisUtterance volume attribute test - Manual</title> |
| <style> |
| div, |
| #test { |
| display: block; |
| width: 640px; |
| word-break: break-all; |
| padding: 4px; |
| } |
| #test, |
| #volume { |
| background: skyblue; |
| font-weight: bold; |
| } |
| </style> |
| <script> |
| const text = "hello universe"; |
| const volumes = [0, 0.2, 0.4, 0.6, 1]; |
| |
| handleVoicesChanged = async _ => { |
| for (const volume of volumes) { |
| await new Promise(resolve => { |
| document.getElementById("volume").value = volume; |
| const utterance = new SpeechSynthesisUtterance(); |
| utterance.text = text; |
| utterance.volume = volume; |
| utterance.onend = resolve; |
| window.speechSynthesis.speak(utterance); |
| }); |
| }; |
| }; |
| onload = e => { |
| document.getElementById("test").onclick = _ => { |
| if (window.speechSynthesis.getVoices().length === 0) { |
| window.speechSynthesis.onvoiceschanged = handleVoicesChanged; |
| } else { |
| handleVoicesChanged() |
| } |
| }; |
| }; |
| </script> |
| </head> |
| <body> |
| <div> |
| <h3>Specification:</h3> |
| <a href="https://w3c.github.io/speech-api/speechapi.html#utterance-attributes"><b><code><i><u>volume</u></i></code> attribute</b></a> |
| <blockquote> |
| This attribute specifies the speaking volume for the utterance. It ranges between 0 and 1 inclusive, with 0 being the lowest volume and 1 the highest volume, with a default of 1. If SSML is used, this value will be overridden by prosody tags in the markup. |
| </blockquote> |
| </div> |
| <div id="test"> |
| Click to execute <code>window.speechSynthesis.speak()</code> with <code>volume attribute</code> set to <code>0, 0.2, 0.4, 0.6, 1.</code> |
| </div> |
| <br> |
| <div> |
| <label for="volume">Current volume: </label> |
| <input id="volume" readonly> |
| <h3>Manaul Test:</h3>Does the volume of audio output change? |
| </div> |
| </body> |
| </html> |
