自定义语音输入按钮?

时间:2012-04-10 03:26:06

标签: javascript html5 google-chrome speech-to-text

我正在尝试创建一个可以弹出speech input panel的按钮(在HTML5中),我尝试使用<label>

<label>
    <input type="text" x-webkit-speech />
    ​<button>Speak</button>
</label>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

http://jsfiddle.net/DerekL/XzD2U/

但它只关注<input> D:这不是我想做的 有什么建议吗? (它不必支持IE或Firefox,只支持Google Chrome)

这就是我想要的:http://jsfiddle.net/DerekL/RWCJR/
但我想使用真正的按钮而不是这个假的<input>按钮。

2 个答案:

答案 0 :(得分:2)

你完成的任务非常有限。你所追求的是不可能的。触发语音的唯一方法是单击文本框中的麦克风图标。如果您愿意使用javascript,那么我认为您可以填写一些内容。这就是我要做的。

  1. 创建一个仅足以包含麦克风图标的文本输入
  2. 使用转换使按钮大小
  3. 将其透明并将其覆盖在真实按钮上
  4. 点击隐藏式麦克风后,使用javascript将新值复制到真实文本字段中。
  5. http://jsfiddle.net/Lu3Vb/

    你可以在这个例子中看到我是如何一起攻击它的。有两个按钮,一个带有完全透明的麦克风,另一个带有部分透明和红色边框,以便您可以看到效果。

    CSS

    input.speechbutton {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        height: 20px;
        width: 20px;
        margin-left: 30px;
        -webkit-transform: scale(3.0, 1.0);
    }
    

    HTML

    <div style="position: relative;">
        <button>Speech</button>
        <input class="speechbutton" type="text" value="" x-webkit-speech />
    </div>
    

答案 1 :(得分:0)

试试这个:

<label>
    <input onfocus="document.getElementById('myButton').focus();" type="text" x-webkit-speech />
    <button id="myButton"  >Speak</button>
</label>