x-webkit-语音输入和文本区域

New hotness, speech input. (The demo, the demo)

新的热点，语音输入。 (演示，演示)

You get an input:

您得到输入：

<input>

<input>

You add an x-webkit-speech attribute

您添加一个x-webkit-speech属性

<input x-webkit-speech>

<input x-webkit-speech>

And voila!

瞧！

Or if you don't have a recent Chrome version, here's what these who have a recent Chrome version see:

或者，如果您没有最新的Chrome版本，以下是那些拥有最新的Chrome版本的人看到的内容：

Nice.

真好

文字区(Textareas)

Speech inputs - gotta love them. But in textareas - you can't have them. So you can put an input and a textarea and copy over the content.

语音输入-必须爱上他们。 但是在textareas中-您不能拥有它们。 因此，您可以输入内容和文本区域，然后在内容上进行复制。

html:

HTML：

<textarea id="txt"></textarea>
<input x-webkit-speech id="mike"/>

With some CSS you can remove the border, add pointy cursor, etc make it look like not an input.

使用某些CSS，您可以删除边框，添加尖的光标等，使其看起来像不是输入。

#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;
}

Finally a little JavaScript to a/ unfocus the input and b/ carry over the content from the input to the textarea

最后，使用一些JavaScript来a /使输入失去焦点，并b /将内容从输入传递到文本区域

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

That's all there is. Click over to the demo.

这就是全部。 单击演示。

Here's what you should see in Chrome:

这是您应该在Chrome浏览器中看到的内容：

You can see that console.log() there - it's definitelly worth exploring. The thing is a SpeechInputEvent type of object is passed to the handler of the onwebkitspeechchange event. This object has some interesting properties, such as the array results[] which is number of guesses what you've said and confidence (0 to 1 it seems) in the guess.

您可以在那里看到console.log() -绝对值得探索。 事情是将对象的SpeechInputEvent类型传递给onwebkitspeechchange事件的处理程序。 该对象具有一些有趣的属性，例如数组results[] ，它是您所说的猜测数目以及对猜测的信心(似乎为0到1)。

Enjoy and go ahead and add these all over the place! 🙂

享受并继续添加这些到处！ 🙂

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/x-webkit-speech-input-and-textareas/