如何風格的谷歌瀏覽器的語音輸入控制

谷歌瀏覽器具有以下輸入控制的麥克風：關於如何使用它，可以發現here 如何風格的谷歌瀏覽器的語音輸入控制

enter image description here

更多信息。

我需要增大麥克風的音量。如果我可以使用麥克風的自定義圖像，這也會很好。我發現調整輸入元素的寬度和高度不會使麥克風變大。

2012-04-20 Tono Nam

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

這是我的工作了：

和的HTML是： enter image description here

<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-20 20:57:11

目前，增加麥克風大小的唯一方法是增加輸入元素的font-size。

HTML：

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

CSS：

#speech { 
    font-size: 20px; 
}

來源

2012-04-20 04:53:29

我記得有一個網站使用它自己的大麥克風。我會繼續尋找。儘管如此，謝謝 – 2012-04-20 05:08:31

對於人們仍在尋找這個地方：我設法它的樣式設置將語音元素的不透明度設置爲0，然後用可見元素覆蓋它，您可以自己設計樣式。然後，我使用jQuery觸發點擊元素上的點擊語音元素。這樣，您甚至可以使用自己的圖像！

作爲一個說明，據我知道會有在未來的語音元素W3C規範的編輯版本，應該給開發者更多的控制權的外觀和感覺（來源：http://www.adobe.com/devnet/html5/articles/voice-to-drive-the-web-introduction-to-speech-api.html）

來源

2013-06-03 07:28:03

在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-28 14:13:04 lmeurs

如何風格的谷歌瀏覽器的語音輸入控制

回答

相關問題