不同元素的 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。@Kaiido 自己的这个答案可能有用。另请参阅有关弃用的 Google 群组讨论。

简而言之，如果当前帧或其任何祖先曾经有用户激活，我们将只允许 speak() 成功。

激活输入如下：

激活触发输入事件是 isTrusted 属性为 true 且类型为以下之一的任何事件：

• 改变
• 点击
• 上下文菜单
• 双击
• 鼠标向上
• 指针向上
• 重启
• 提交
• 触摸端

所以，我认为mouseover事件不会算作有效的触发器。

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

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

我还可以通过一个初始屏幕来开始这个项目的SpeechSynthesis工作，该屏幕需要用户点击开始——并且激活传播并允许SpeechSynthesis应用程序的其余部分使用。

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