javascript - Wordpress 插件功能在桌面上运行良好但在移动设备上运行不正常。为什么？

Question

我为我们的 wordpress 网站 (https//speaktoday.com) 创建了一个 Wordpress Accent(文本到语音)插件/短代码。 它的功能在桌面上运行良好，但无论何时我打开它移动它显示弹出窗口“speaktoday.com 想要使用语音(拒绝和允许)”。此外，它的功能(文字转语音)在移动设备上不起作用。 而且我不想在移动设备上打开我的网站时显示该弹出消息，而且该插件的功能也应该在移动设备上正常工作。 请给我适当的解决方案。

这是我的代码:

    <?php
/** Plugin Name: SpeakToday_Accent
    Description: This plugin is used to select preferred accent
    Author: Amit  Singh
    Version: 1.0
    link : https://speaktoday.com

*/
add_shortcode( 'TTSdefault', 'voice_counter' );
function voice_counter($att,$content){
    $att = shortcode_atts(array('lang' => ''),$att);
    $languageVal = $att['lang'];
    //echo "<h2>".$languageVal."</h2>";

?>

<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<script src="//code.responsivevoice.org/1.5.6/responsivevoice.js"></script>

<script>
setTimeout(responsiveVoice.speak("",$('#voiceselection').val()),15000);
</script>
<script>



function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();

    } else if (document.selection && document.selection.type != "Control") { 
        text = document.selection.createRange().text;
    }
    return text;
}
$(document).ready(function (){ 
   $(document).mouseup(function (e){ 
      setTimeout(function() { 
         responsiveVoice.cancel(); 
         var text = $('#voiceselection').val();
          responsiveVoice.speak(getSelectionText(), text ); 

      }, 1);
   });
});
</script>
<div class = "speaktoday_accent" style="background:white;width:155px; position: relative !important;transform: none !important; display: inline-block;">
 <select id="voiceselection" style="width:155;line-height:2;">
  <option value="UK English Female">UK English Female</option>
    <option value="US English Female">US English Female</option>
    <option value="Hindi Female">Hindi Female</option>
    <option value="UK English Male">UK English Male</option>
    <option value="US English Male">US English Male</option>
     </select>
</div>

<script>
    var spge = <?php echo json_encode($languageVal); ?>;
    //alert(spge);
         $("#voiceselection").on('change', function () {
             window.localStorage.setItem("voiceselection", this.value);
        });
        $(document).ready(function () {
            var n = sessionStorage.getItem('on_load_counter');
             if (n === null) {
             n = 0;
             }
              n++;
            sessionStorage.setItem("on_load_counter", n);

            if(n>1){
                 $("#voiceselection").val(window.localStorage.getItem("voiceselection"));
                $('select option[value="voiceselection"]').attr("selected",true);
            }
            else{

                //alert(spge);
            // $("#voiceselection").val(window.localStorage.getItem("voiceselection"));

            //alert(spge);
            $("#voiceselection").val(spge).change();
                //$('select option[value="UK English Female"]').attr("selected",true);
            }

            //alert(n);
        });
</script>


<?php

}

请帮我解决这些问题。 您可以访问https://speaktoday.com看到那个插件。当您向下滚动时，您会看到一个语言选择下拉菜单。

提前致谢

Answer 1

不幸的是，没有办法绕过提示以允许使用您的设备硬件的权限。想象一下，任何站点都可以在未经同意的情况下收听麦克风。您很可能已经在桌面上授予了权限(并且已经记住了)。

移动设备也没有 mouseup 事件。尝试使用 blur 事件，或使用 change 取消超时。