ポートフォリオサイト公開中

【JavaScript】google音声検索を自分で作ってみる【Web Speech API】

こんにちは、ともろう(@tomorrowSLog)です。

Web Speech API を使ってgoogle音声検索を作ってみたので備忘録として載せておきます。






【pythonコードを読む】AV女優10000人webスクレイピング

google音声検索

開発言語

  • Javascript(メイン)
  • HTML/CSS(必要に応じて)

開発環境

  • Macbook Pro
  • Chrome

デモンストレーション

注意
PC版Chrome最新版において動作確認をしています

デモサイト



コード全文

<h1>音声検索</h1>
<p>ボタンを押して音声入力をすると自動でgoogle検索が始まります。</p>
<form action="https://www.google.com/search">
  <input type="search" id="q" name="q" size=60>
  <input type="button" value="Click to Speak" onclick="recognition.start()">
</form>

<script type="text/javascript">
  if ('webkitSpeechRecognition' in window) {
  } else {
    alert("このブラウザは対応していません。")
  }
  var recognition = new webkitSpeechRecognition();
  recognition.onresult = function(event) {
    if (event.results.length > 0) {
      q.value = event.results[0][0].transcript;
      q.form.submit();
    }
  }
</script>

参考サイト

参考 Voice Driven Web Apps: Introduction to the Web Speech APIdevelopers.google.com 参考 Web Speech APIw3c.github.io

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です