4

谷歌浏览器有以下输入控件：

在此处输入图像描述

关于如何使用它的更多信息可以在这里找到。

我需要使麦克风更大。如果我可以为麦克风使用自定义图像，那就太好了。我发现调整输入元素的宽度和高度并不会使麦克风变大。

4

4 回答 4

4 
#speech {
  -webkit-transform: scale(4,4)
}

这就是我的工作：

并且为此的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>

图片

无论如何，现在我可以使用这些事件：

 onspeechchange="processspeech();"  
 onwebkitspeechchange="processspeech();"

将文本放置在适当的位置...

于 2012-04-20T20:57:11.707 回答
1

目前，增加麦克风尺寸的唯一方法是增加font-size输入元件的尺寸。

HTML：

<input type="text" id="speech" value="some text here" x-webkit-speech />

CSS：

#speech {
  font-size: 20px;
}
于 2012-04-20T04:53:29.670 回答
0

对于仍在寻找这个的人：我设法通过将语音元素的不透明度设置为 0 来设置它的样式，然后用你可以自己设置样式的可见元素覆盖它。然后，当您单击覆盖的元素时，我使用 jQuery 触发了对语音元素的单击 :) 这样您甚至可以使用自己的图像！

作为说明，据我所知，将来会有语音元素的 W3C 规范的编辑版本，这应该让开发人员对外观有更多的控制（来源： http: //www.adobe.com /devnet/html5/articles/voice-to-drive-the-web-introduction-to-speech-api.html )

于 2013-06-03T07:28:03.120 回答
0

在 Webkit 中，您可以输入shadow DOM来更改默认浏览器元素的布局。这就是我使用来自icomoon.io的自定义图标字体的方法（字体“Font Awesome”有一个不错的麦克风），但您当然也可以在input::-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;
  }
}
于 2014-02-28T14:13:04.960 回答