javascript - 页面加载时谷歌语音搜索

Question

首先，我正在尝试创建一个我不希望永远工作的临时解决方案。如果你愿意，只是一个实验！

我有以下运行！我想要做的是在页面加载时启动语音搜索。任何想法让这个工作！注意：您需要 chrome 浏览器才能看到麦克风输入。

<html>
<head>
<style>

#mike {
font-size: 25px;
width: 25px;
height: 25px;
cursor:pointer;
border: none;
position: absolute;
margin-left: 5px;
outline: none;
background: transparent;
}
#txt {
height: 150px;
width: 150px;
}
</style>

<script>
var mike = document.getElementById('mike');
mike.onfocus = mike.blur;
mike.onwebkitspeechchange = function(e) {
console.log(e); // SpeechInputEvent
document.getElementById('txt').value = mike.value;  
};
</script>
</head>

score 13 · Accepted Answer

不幸的是，这是不可能的。最重要的原因是它会侵犯隐私/安全隐患。用户必须自愿选择被记录（在这种情况下，通过鼠标单击）。如果可以模拟事件并且用户不知道他们正在被记录，则可能会产生严重的法律后果。希望这可以帮助！

更新：

这是来自有关以下内容的文档Speech Input：

为了最大限度地减少用户无意中让网页在他们不知情的情况下录制语音的可能性，如果网页失去了对另一个窗口或同一用户代理中另一个选项卡的输入焦点，实现必须中止活动的语音输入会话。

以下是同一份文件中的担忧：

1) 从安全角度来看，口述密码输入可能存在问题，但由用户决定是否要说出他们的密码。

2) 语音输入可能被用于窃听用户。恶意网页可以使用诸如隐藏输入元素或以其他方式使用户相信它已停止录制语音而继续这样做的技巧。他们还可以潜在地设置输入元素的样式以显示为其他内容并诱使用户单击它们。可以在http://www.quirksmode.org/dom/inputfile.html中查看文件输入元素样式的示例。上述建议旨在降低此类攻击的风险。

另外，根据html5rocks.com 的这篇文章：

第一次使用语音识别时，Chrome 需要询问用户使用麦克风的权限，在这种情况下，只有在用户允许时才会触发 onstart。

考虑到这一点，如果不是几乎不可能的话，在未经用户同意的情况下实施事件将非常困难onload，因为 Google 已采取措施防止malicious webpages. 谷歌还阻止用户模拟点击事件。

score 4 · Accepted Answer

在尝试了一堆东西和研究之后，我发现：

您不能以编程方式激活语音输入。这是为了防止滥用。 https://code.google.com/p/html5rocks/issues/detail?id=594

那是从谷歌。

想尽办法让 jFiddle 工作。使用了一堆 jquery 函数，尝试了目标来模拟点击，一些第三方的东西——看起来他们已经得到了很好的保护。

score 2 · Accepted Answer

您是否尝试过这种方法：

x-webkit-speech：onwebkitspeechchange 不保留值

如果您查看示例，他们完全通过

onwebkitspeechchange="webkitSpeechChange(this);"

我想您需要将其添加到您的代码中。

score 2 · Accepted Answer

您可以使用不需要单击按钮即可激活的 webkitSpeechRecognition。然后只需将您捕获的任何文本引导到输入中。

webkitSpeechRecognition 会提示用户授权站点使用麦克风，但只要该权限存在，它就可以在页面加载后立即开始监听用户输入。确保您的站点使用 HTTPS，以便浏览器只向用户请求一次权限并记住它。

您可能还想查看annyang，这是一个 JavaScript 库，可以让处理语音识别变得超级简单。

score -2 · Accepted Answer

首先想到的是使用 jQuery。这里有一点方法：

$(document).ready(function(){
  startMikeInput();
}

当页面加载完成时，这将启动您的麦克风输入。您还需要在脚本标签中引用 jQuery。使用外部 js 文件也可能会有所帮助。

javascript - 页面加载时谷歌语音搜索

5 回答 5

Related

Reference