ホームページ > ウェブフロントエンド > H5 チュートリアル > H5の入力ボックスに音声機能を追加する方法を詳しく解説

H5の入力ボックスに音声機能を追加する方法を詳しく解説

Y2J
リリース: 2017-05-22 13:58:49
オリジナル
5408 人が閲覧しました

この記事では、HTML5 を使用して入力ボックスに音声入力機能を追加する方法を紹介します。実装方法は非常に簡単です。必要な方はこの記事を参照してください。

ここで使用する強力な HTML 関数を紹介します。将来的には、入力ボックスに音声を直接追加できるようになります。まず実装方法を見てみましょう。

音声認識を実行するには、入力ボックスの右側にマイクのアイコンが表示されます。

実際、音声認識は HTML5 の基本機能です。その使い方は

<input type=”text” speech x-webkit-speech />
ログイン後にコピー

XHTML 風の構文が好きなら、次のように表現できます

<input type=”text” x-webkit-speech=”x-webkit-speech” />
ログイン後にコピー

音声認識は、 10 年前、さらには数年前でも、Web ページ上の音声認識は、Flashplayer などの他の方法を使用しないと実現できませんでした。しかし、現在では、音声を取得するには、入力ボックスに attribute タグを追加するだけで認識できるようになりました。

携帯電話のブラウザなどのモバイル デバイスは、HTML5 をサポートしている限り、音声認識もサポートする必要があります。 Android でこのページを閲覧してみてください?

さらに、javascriptを使用して音声認識イベントの終了を取得したい場合は、onwebkitspeechchange

<input type=”text” speech x-webkit-speech onwebkitspeechchange=”alert(this.value)” />
ログイン後にコピー
【関連推奨事項】

1.

Html5の無料ビデオチュートリアル

2を使用できます。仮想キーボードを作成する場合の H5 入力ボックスがブロックされている場合はどうすればよいですか?

3.

HTML5 を使用して WeChat で全画面再生を実装する方法の詳細な説明

4.

H5 の新しいタグによるブラウザーの互換性の問題の詳細な説明

5. H5 を使用して変更する方法を説明します。更新せずに現在の URL 詳細な例

以上がH5の入力ボックスに音声機能を追加する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート