不同元素的 JavaScript 文本到语音

Question

我正在尝试使用文本到语音来帮助盲人用户使用我的网站作为我项目的一部分，它与我的输入、选择和按钮元素配合得很好。但我也想为标签元素等其他元素发声。我尝试使用 (for) 代替 id 并尝试使用事件 (mouseover) 而不是 ( Click) 但它不起作用。你能帮我解决这个问题吗？或者有什么建议吗？
这是我的代码:

<div class="all">

<form action="/action_page.php">
  <div class="container">
    <h1>Register</h1>
    Select Voice: <select id='voiceList'></select> <br><br>

    <p>Please fill in this form to create an account.</p>
    <hr>
    <input id='text1' type="text" placeholder="Enter Email" name="email" required>
    <label id="email" for="email"><b>Email</b></label>

<br/>
 <label for="email"><b>Name </b></label>
    <input id='text2' type="text" placeholder="Enter Name" name="email" required>
<br/>
    <label for="psw"><b>Password </b></label>
    <input id='text3' type="password" placeholder="Enter Password" name="psw" required>
<br/>
    <label for="psw-repeat"><b>Mobile </b></label>
    <input id='text4' type="password" placeholder="Mobile" name="psw-repeat" required>
    <br/>
        <label for="psw"><b>Gender </b></label>
   <select   id = "myList" style="font-size:15px;">
               <option >Male</option>
               <option >Female</option>

             </select>
             <hr>
    <button type="submit" class="registerbtn">Register</button>
  </div>

  <div class="container signin">
    <p>Already have an account? <a href="#">Sign in</a>.</p>
  </div>
</form>
</div>
<script>
        var txtInput1 = document.querySelector('#text1');
         var txtInput2 = document.querySelector('#email');

        var txtInput3 = document.querySelector('#text3');
        var txtInput4 = document.querySelector('#text4');

        var txtInput5 = document.querySelector('#myList');


        var voiceList = document.querySelector('#voiceList');
        var synth = window.speechSynthesis;
        var voices = [];

        //PopulateVoices();
        if(speechSynthesis !== undefined){
            speechSynthesis.onvoiceschanged = PopulateVoices; 
        }

        txtInput1.addEventListener('mouseover', ()=> {
            var toSpeak = new SpeechSynthesisUtterance(txtInput1.value);
            var selectedVoiceName = voiceList.selectedOptions[0].getAttribute('data-name');
            voices.forEach((voice)=>{
                if(voice.name === selectedVoiceName){
                    toSpeak.voice = voice;
                }
            });
            synth.speak(toSpeak);
        });

         txtInput2.addEventListener('mouseover', ()=> {
            var toSpeak = new SpeechSynthesisUtterance(txtInput2.value);
            var selectedVoiceName = voiceList.selectedOptions[0].getAttribute('data-name');
            voices.forEach((voice)=>{
                if(voice.name === selectedVoiceName){
                    toSpeak.voice = voice;
                }
            });
            synth.speak(toSpeak);
        });
txtInput3.addEventListener('click', ()=> {
            var toSpeak = new SpeechSynthesisUtterance(txtInput3.value);
            var selectedVoiceName = voiceList.selectedOptions[0].getAttribute('data-name');
            voices.forEach((voice)=>{
                if(voice.name === selectedVoiceName){
                    toSpeak.voice = voice;
                }
            });
            synth.speak(toSpeak);
        });
txtInput4.addEventListener('click', ()=> {
            var toSpeak = new SpeechSynthesisUtterance(txtInput4.value);
            var selectedVoiceName = voiceList.selectedOptions[0].getAttribute('data-name');
            voices.forEach((voice)=>{
                if(voice.name === selectedVoiceName){
                    toSpeak.voice = voice;
                }
            });
            synth.speak(toSpeak);
        });
        txtInput5.addEventListener('mouseover', ()=> {
            var toSpeak = new SpeechSynthesisUtterance(txtInput5.value);
            var selectedVoiceName = voiceList.selectedOptions[0].getAttribute('data-name');
            voices.forEach((voice)=>{
                if(voice.name === selectedVoiceName){
                    toSpeak.voice = voice;
                }
            });
            synth.speak(toSpeak);
        });

        function PopulateVoices(){
            voices = synth.getVoices();
            var selectedIndex = voiceList.selectedIndex < 0 ? 0 : voiceList.selectedIndex;
            voiceList.innerHTML = '';
            voices.forEach((voice)=>{
                var listItem = document.createElement('option');
                listItem.textContent = voice.name;
                listItem.setAttribute('data-lang', voice.lang);
                listItem.setAttribute('data-name', voice.name);
                voiceList.appendChild(listItem);
            });

            voiceList.selectedIndex = selectedIndex;
        }
    </script>

</body>

Answer 1

Chrome 会在没有用户激活的情况下禁用 SpeechSynthesis。 This answer by @Kaiido himself可能有用。另请参阅 this discussion关于弃用的 Google 群组。

Briefly, we will only allow speak() to succeed if the current frame, or any of its ancestors, has ever had user activation.

激活输入如下:

An activation triggering input event is any event whose isTrusted attribute is true and whose type is one of:

• change
• click
• contextmenu
• dblclick
• mouseup
• pointerup
• reset
• submit
• touchend

所以，我不认为mouseover事件将被视为有效触发器。

如果您的目的是让网站更易于访问，我会推荐上面提到的@Kaiido - 遵循 WAI 的建议。

如果你想使用 SpeechSynthesis ，也许你可以在标签旁边有一个小按钮，用户可能会点击并激活它来听到它？

我也能得到 SpeechSynthesis在 this project here 工作通过具有要求用户单击开始的初始屏幕-并且该激活传播并允许SpeechSynthesis应用程序的其余部分的使用。

请注意 Web Speech API是一个实验性 API - 可能不适合生产。 SpeechSynthesis它的一部分在浏览器中得到了合理的支持。但是，根据我使用此 API 的经验，我发现不同设备的行为有所不同，这可能是因为它有时会依赖设备的 native 操作系统功能。