Google Chrome has the following input control:
谷歌Chrome有以下输入控制:
More info on how to use it can be found here.
更多关于如何使用它的信息可以在这里找到。
I need to make the microphone bigger. It would also be nice if I could use a custom image for the microphone. I found that adjusting the width and height of the input element does not make the microphone larger.
我需要把话筒放大一点。如果我能用一个自定义的图像作为麦克风的话，那也不错。我发现调整输入元素的宽度和高度不会使麦克风变大。
4 个解决方案
#1
4
#speech {
-webkit-transform: scale(4,4)
}
This is what I worked out:
这就是我所做的:
and the html for that is:
它的html是:
<html>
<body>
<img src="Capture.JPG" alt="Smiley face" width="80" style="margin-top:70px; margin-left:120px; position:absolute;" />
<input style="-webkit-transform: scale(8,8); opacity:.001; width:50px; border:none; margin-left:00px; margin-top:100px;" type="text" speech="speech" x-webkit-speech="x-webkit-speech" />
</body>
</html>
anyways now I could use the events:
无论如何，我现在可以利用这些事件:
onspeechchange="processspeech();"
onwebkitspeechchange="processspeech();"
to place the text where appropriate...
在适当的地方放置文本……
#2
1
Currently, the only way to increase the size of the microphone is to increase the font-size of the input element.
目前，增加麦克风尺寸的唯一方法是增加输入元素的字体大小。
HTML:
HTML:
<input type="text" id="speech" value="some text here" x-webkit-speech />
CSS:
CSS:
#speech {
font-size: 20px;
}
#3
0
For people still looking for this: I managed to style it by setting the opacity of the speech element to 0, then overlaying it with a visible element that you can style yourself. Then I used jQuery to trigger a click on the speech element when you click on your overlayed element :) This way you can even use your own image!
对于仍然在寻找这个功能的人:我通过将语音元素的不透明度设置为0，然后将其覆盖在一个可见的元素上，然后将其设置为自己的样式。然后我使用jQuery触发了单击你的重叠元素时的语音元素:)这样你甚至可以使用你自己的图像!
As a note, as far as I know there will be an edited version of the W3C spec for the speech element in the future, that should give developers more control over the look and feel (source: http://www.adobe.com/devnet/html5/articles/voice-to-drive-the-web-introduction-to-speech-api.html)
值得一提的是，据我所知，未来将会有一个编辑版的W3C规范来规范语音元素，这应该会让开发人员对外观和感觉有更多的控制(来源:http://www.adobe.com/devnet/html5/articles/drive -web-introduction- speech-api.html)
#4
0
In Webkit you can enter the shadow DOM to alter the layout of default browser elements. This is how I did it using a custom icon font from icomoon.io (font "Font Awesome" has a nice microphone), but you can of course also use any background image on the input::-webkit-input-speech-button element itself.
在Webkit中，您可以输入影子DOM来更改默认浏览器元素的布局。这是我使用icomoon的自定义图标字体做的。io(字体“字体很棒”有一个很好的麦克风)，但是你当然也可以在输入中使用任何背景图像:-webkit-input-speech-button元素本身。
input::-webkit-input-speech-button {
-webkit-appearance: none; /* Important to undo default styling. */
height: 100%;
padding: 0 1em;
cursor: pointer;
&:before {
content: '\e601';
font-family: icomoon;
}
}
#1
4
#speech {
-webkit-transform: scale(4,4)
}
This is what I worked out:
这就是我所做的:
and the html for that is:
它的html是:
<html>
<body>
<img src="Capture.JPG" alt="Smiley face" width="80" style="margin-top:70px; margin-left:120px; position:absolute;" />
<input style="-webkit-transform: scale(8,8); opacity:.001; width:50px; border:none; margin-left:00px; margin-top:100px;" type="text" speech="speech" x-webkit-speech="x-webkit-speech" />
</body>
</html>
anyways now I could use the events:
无论如何，我现在可以利用这些事件:
onspeechchange="processspeech();"
onwebkitspeechchange="processspeech();"
to place the text where appropriate...
在适当的地方放置文本……
#2
1
Currently, the only way to increase the size of the microphone is to increase the font-size of the input element.
目前，增加麦克风尺寸的唯一方法是增加输入元素的字体大小。
HTML:
HTML:
<input type="text" id="speech" value="some text here" x-webkit-speech />
CSS:
CSS:
#speech {
font-size: 20px;
}
#3
0
For people still looking for this: I managed to style it by setting the opacity of the speech element to 0, then overlaying it with a visible element that you can style yourself. Then I used jQuery to trigger a click on the speech element when you click on your overlayed element :) This way you can even use your own image!
对于仍然在寻找这个功能的人:我通过将语音元素的不透明度设置为0，然后将其覆盖在一个可见的元素上，然后将其设置为自己的样式。然后我使用jQuery触发了单击你的重叠元素时的语音元素:)这样你甚至可以使用你自己的图像!
As a note, as far as I know there will be an edited version of the W3C spec for the speech element in the future, that should give developers more control over the look and feel (source: http://www.adobe.com/devnet/html5/articles/voice-to-drive-the-web-introduction-to-speech-api.html)
值得一提的是，据我所知，未来将会有一个编辑版的W3C规范来规范语音元素，这应该会让开发人员对外观和感觉有更多的控制(来源:http://www.adobe.com/devnet/html5/articles/drive -web-introduction- speech-api.html)
#4
0
In Webkit you can enter the shadow DOM to alter the layout of default browser elements. This is how I did it using a custom icon font from icomoon.io (font "Font Awesome" has a nice microphone), but you can of course also use any background image on the input::-webkit-input-speech-button element itself.
在Webkit中，您可以输入影子DOM来更改默认浏览器元素的布局。这是我使用icomoon的自定义图标字体做的。io(字体“字体很棒”有一个很好的麦克风)，但是你当然也可以在输入中使用任何背景图像:-webkit-input-speech-button元素本身。
input::-webkit-input-speech-button {
-webkit-appearance: none; /* Important to undo default styling. */
height: 100%;
padding: 0 1em;
cursor: pointer;
&:before {
content: '\e601';
font-family: icomoon;
}
}