javascript - Wordpress 插件功能在桌面上运行良好,但在移动设备上无法正常运行。为什么?
问题描述
我为我们的 wordpress 网站 (https//speaktoday.com) 创建了一个 Wordpress Accent(text-to-speech) 插件/简码。 它的功能在桌面上运行良好,但每当我在移动设备上打开它时,它会显示一个弹出窗口“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 以查看该插件。向下滚动时,您会看到语言选择下拉菜单。
提前致谢
解决方案
不幸的是,没有办法绕过提示允许使用您的设备硬件的权限。想象一下,任何网站都可以在未经同意的情况下只听麦克风。您很可能已经在桌面上允许了权限(并且已经记住了)。
移动设备也没有mouseup
事件。尝试使用该blur
事件,或使用 取消超时change
。
推荐阅读
- python-3.x - 功能 service_account.Credentials.from_service_account_info() 不起作用
- c# - AutoMapper - 嵌套集合未映射
- c++ - 模板类。如何实现这个?c++
- python - Python 中的 MemoryError 通过使用 mmap 和 re.findall 搜索大文件
- r - 将参考点和线添加到 geom_line() 图
- html - CSS网格没有响应
- css - 为“DIV ID”分配一个值。(WooCommerce)
- reactjs - 带有 react-ga 库的 Google Analytics
- java - Android 应用程序中的产品图像大小
- python - 稀疏线性微分方程求解 Matlab vs Python