SpeechSynthesisUtterance-volume-manual.html (1991B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>5.2.3 SpeechSynthesisUtterance volume attribute test - Manual</title> 5 <style> 6 div, 7 #test { 8 display: block; 9 width: 640px; 10 word-break: break-all; 11 padding: 4px; 12 } 13 #test, 14 #volume { 15 background: skyblue; 16 font-weight: bold; 17 } 18 </style> 19 <script> 20 const text = "hello universe"; 21 const volumes = [0, 0.2, 0.4, 0.6, 1]; 22 23 handleVoicesChanged = async _ => { 24 for (const volume of volumes) { 25 await new Promise(resolve => { 26 document.getElementById("volume").value = volume; 27 const utterance = new SpeechSynthesisUtterance(); 28 utterance.text = text; 29 utterance.volume = volume; 30 utterance.onend = resolve; 31 window.speechSynthesis.speak(utterance); 32 }); 33 }; 34 }; 35 onload = e => { 36 document.getElementById("test").onclick = _ => { 37 if (window.speechSynthesis.getVoices().length === 0) { 38 window.speechSynthesis.onvoiceschanged = handleVoicesChanged; 39 } else { 40 handleVoicesChanged() 41 } 42 }; 43 }; 44 </script> 45 </head> 46 <body> 47 <div> 48 <h3>Specification:</h3> 49 <a href="https://w3c.github.io/speech-api/speechapi.html#utterance-attributes"><b><code><i><u>volume</u></i></code> attribute</b></a> 50 <blockquote> 51 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. 52 </blockquote> 53 </div> 54 <div id="test"> 55 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> 56 </div> 57 <br> 58 <div> 59 <label for="volume">Current volume: </label> 60 <input id="volume" readonly> 61 <h3>Manaul Test:</h3>Does the volume of audio output change? 62 </div> 63 </body> 64 </html>