Skip to content

x webkit speech

Jump to bottom Edit New page
uretgec edited this page Jan 3, 2013 · 12 revisions
  • x-webkit-speech kodu Safari ve Google Chrome gibi webkit tarayıcılarda kullanabileceğiniz text inputuna sesinizi yazdırmanızı sağlar.

Demo adresi: http://blogs.sitepointstatic.com/examples/tech/speech-input/index.html ##En basit yolu:

##XHTML Standardına göre:

Uygun olmayan tarayıcılarda denetlemek için deneyebileceğiniz kod bloğu. Console.log ilede bu işlemi gerçekleştirebilirsiniz.

if (document.createElement("input").webkitSpeech === undefined) {
alert("Speech input is not supported in your browser.");
}

#Stockoverflowda bulduğum bilgi: You can add some style to input::-webkit-input-speech-button, that's all you need. example (http://stackoverflow.com/a/10982382) Link

input::-webkit-input-speech-button {
  -webkit-appearance: none;width: 50px;height: 30px;background-color: #CCCCCC;
}

*always add -webkit-appearance: none;

##Textarea Speech Rec Eklemek HTML kodunda bir adet gizli input ekliyoruz. CSS ile inputu textareanın üzerine monte ediyoruz.

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

Javascript kodu:

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

Css kodu:

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

Kaynak:

Add a custom footer
Add a custom sidebar
Clone this wiki locally