ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLに音声を追加する方法

HTMLに音声を追加する方法

藏色散人
藏色散人オリジナル
2021-03-26 11:45:2312887ブラウズ

オーディオを HTML に追加する方法: 最初に空の HTML5 ドキュメント構造を作成し、次に body タグに audio 要素を挿入し、ソースを通じてオーディオ ファイルを導入し、最後に作成されたページ プログラムを実行します。

HTMLに音声を追加する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

Sublime Text ツールを開き、下図に示すように、挿入する音声ファイルと HTML ファイルが含まれるディレクトリ構造を準備します。

HTMLに音声を追加する方法

HTML ファイルを開き、次の図に示すように、新しい空の HTML5 ドキュメント構造を作成します。エンコードは UTF-8 に設定する必要があることに注意してください。

HTMLに音声を追加する方法

次に、body タグに audio 要素を挿入します。次の図に示すように、audio 要素はソースを通じてオーディオ ファイルを紹介します。ファイル タイプは次のとおりである必要があることに注意してください。正しく書かれています。

HTMLに音声を追加する方法

作成したページ プログラムを実行すると、Web ページに以下のようなオーディオ プレーヤーが表示され、再生ボタンをクリックすると、オーディオが自動的に再生されます。

HTMLに音声を追加する方法

もちろん、audio 要素をサポートしていない古いバージョンのブラウザがたくさんありますが、現時点では、ブラウザがサポートしていない場合に音声にプロンプ​​トを追加できます。 audio 要素をサポートすると、このプロンプトが表示されます。

HTMLに音声を追加する方法

再生ページに入った直後にオーディオ コンテンツを自動的に再生したい場合は、次の図に示すように、オーディオにcontrols属性を追加する必要があります。

HTMLに音声を追加する方法

最後に、編集者は、現在の主流ブラウザによる HTML5 の audio 要素のサポートをリストしました。これは参考として使用できます。

HTMLに音声を追加する方法

推奨学習: 「HTML5 ビデオ チュートリアル

以上がHTMLに音声を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。