家 › サービス › HTML ページに音声を挿入する方法。 HTML ドキュメントに音声を挿入するにはどうすればよいですか? HTMLでBGMを設定する方法

HTML ページに音声を挿入する方法。 HTML ドキュメントに音声を挿入するにはどうすればよいですか? HTMLでBGMを設定する方法

この質問はよく出てくるので、レッスンの中で別の記事を書くことにしました。 HTML にはすべてのブラウザでオーディオを再生するための汎用テクノロジがないため、この問題を解決するには、ほとんどのサイトで行われているように、オーディオプレーヤーファイルをダウンロードすることをお勧めします。すべてを段階的に実行します。

1. サイトが配置されているホスティングのルートディレクトリ (インデックスファイルがあるフォルダー) にオーディオフォルダーを作成します。将来的には、すべてのオーディオファイルをそこに配置することになります。

3. 次に、必要なファイル (できれば mp3 形式) を選択します。サイトのルートにオーディオフォルダーを作成し、アップロードします。

4. あとはプレーヤー接続コードを挿入するだけです。これはどのサイトにも適しており、your_domain と audio_file name という単語をそれぞれ置き換えて、プレーヤーファイルとオーディオファイルへのパスを指定するだけです。

そしてすべての準備が整いました！動作例も見ることができます。

HTML に BGM を挿入する方法 HTML とブラウザの機能を使用して、ページに BGM を挿入することもできます。希望する形式のオーディオファイルが必要です: WAV、AU、MIDI、または MP3。例として、指定された拡張子を持つ任意のファイルを使用できます。

1 つ目の方法は埋め込みタグです。 embed 要素は、ブラウザが最初は理解できないオブジェクト (ビデオファイル、フラッシュムービー、一部のオーディオファイルなど) をロードして表示するために使用されます。

構文は非常に単純です。

終了タグは必要ありません。

次に、属性を含むレコードの例と、そのデコードを以下に見てみましょう。

HTMLにオーディオを再生するためのタグ属性を埋め込む
width - パネルの幅 (ピクセル単位) (またはパーセンテージ)
height - パネルの高さ (ピクセル単位) (またはパーセンテージ)
align - テキストに対するパネルの位置。可能な値は左、右、中央です。
hidden - パネルを非表示にできます。属性値: true - パネルが非表示になります、false - パネルが表示されます (デフォルト値)
autostart - true - ページが読み込まれるとプレーヤーが自動的に開始します。 false - 再生ボタンが押されるのを待ちます。
loop - ループ、true - トラックは円形に再生され、false - 1 回だけ再生されます。

2番目の方法。非常に古いですが、実用的です) ファイルが置かれているのと同じフォルダー (ディレクトリ) にメロディーを追加し、本文に次のコードを記述します。

その結果、ページを読み込んだ後、bgsoundタグで指定したメロディーが鳴ります。次に、タグの属性を詳しく見てみましょう。

src - オーディオファイルへのパス
ループ - メロディーを何回繰り返すか (-1 の場合、無限に繰り返します)
バランス - ステレオバランス値 (-10000 から 10000)
volume - メロディーの再生音量。0 が最大値、-10000 が最小値です。

ただし、プレーヤーを制御する方法はまったくありません。ページが更新されるたびに、トラックが再度再生されます。

BGM を挿入する方法を説明した後で、これをやめさせたいと思います。なぜなら、ほとんどのユーザーは、原則として、さまざまなサイトにアクセスするときにすでに音楽を聴いているからです。したがって、音楽を伴う音楽は、サイトのタブを強制的に閉じることしかできません。

HTML5 にオーディオと音楽を挿入する - audio タグ
audio - サイト上の背景音、音楽、またはその他のオーディオストリームを定義するペアのタグ。

オーディオタグの属性

自動再生 - ページがロードされるとすぐにファイルが再生されます (bgsound のバックグラウンドミュージックと同様)
コントロール - ブラウザにプレーヤーのコントロールパネルを表示します。
ループ - 終了後にファイルを再度再生します
preload - ページの読み込みとともに音声ファイルが読み込まれます。
src - オーディオファイル (mp3 または ogg) へのパス

audioタグを使用したサンプルコード

オーディオタグ

HTML 5 のオーディオ

audio タグは、お使いのブラウザではサポートされていません。
音楽のダウンロード。

タグ、属性、値

- サイトの背景の HTML サウンドと音楽を決定します。セクター内にあります。
- Wav または Mp3 形式のサウンドファイルの URL を定義します。
loop="" - 再生回数を決定します。
volume="-1000" - 音量を調整します。この場合、ユーザーのコンピュータに設定されている現在の音量レベルから、指定された値が減算されます。
Balance="0" - サウンドバランスを調整します。

注意！背景サウンドを HTML ページに導入するための上記の方法は、Internet Explorer および Opera ブラウザの初期リリースにのみ適しています。最新のブラウザには対応していません ⇒ サイトページの音楽や音声が再生されません。したがって、以下を参照してください。ここでは、すべてのブラウザ (Opera、Firefox、Internet Explorer、Chrome) でサウンドと音楽を Web サイトに挿入するクロスブラウザの方法が詳細に説明されています。

すべてのブラウザのサイト上の HTML または音楽のサウンド

Opera、Firefox、Internet Explorer、Chrome のバックグラウンド HTML サウンド:

コードはセクター内にあります。

属性と値

autostart="" - インターネットページを開いたときに音楽を自動的に再生するかどうかを決定します。可能な値: true - はい、または false - いいえ。
loop="" - 再生を繰り返すかどうかを決定します。可能な値: true - はい、または false - いいえ。
hidden="" - プレーヤーのコントロールパネルを非表示にするかどうかを決定します。可能な値: true - はい、または false - いいえ。そうでない場合は、パネルの寸法が表示されます: width="" height="" 。

アドバイス自体が示唆的です！本当に正当な場合にのみ、サイトのバックグラウンド HTML サウンドまたは音楽を使用してください。

HTML5 オーディオでは、オーディオコンテンツを操作するための機能が向上しています。最近まで、Web ページにサウンドファイルを追加する唯一の方法は、ユーザーがページを閲覧している間に再生されるタグを使用してバックグラウンドサウンドを統合することであり、バックグラウンドサウンドをオフにするオプションはありませんでした。

HTML5 仕様に新しい要素が追加されたことにより、プラグインを必要とせずに、組み込みのプログラミングインターフェイスを使用してオーディオコンテンツを追加できるようになりました。

HTML5 オーディオを Web ページに追加する方法 1. エレメントブラウザのサポート

IE：9.0
Firefox: 3.5 基本サポート、15.0 完全サポート
クロム: 3.0
サファリ：3.1
オペラ：10.5
iOSサファリ：7.1
Opera Miniは： -
アンドロイドブラウザ：4.1
Android 版 Chrome: 44

HTML5 要素は、Web ページにオーディオコンテンツを埋め込むために使用されます。一般に、HTML マークアップは次のようになります。

control 属性は、オーディオプレーヤーのコントロールインターフェイス (再生、一時停止、音量ボタン) を表示するブラウザを追加します。

米。 1. さまざまなブラウザでのオーディオプレーヤーの外観

現在、すべてのブラウザで機能するオーディオ形式は存在しないため、可能な限り幅広い視聴者がコンテンツにアクセスできるようにするには、要素の src 属性を使用して表される複数のオーディオソースを含めることをお勧めします。同時に、要素をサポートしていないブラウザー用のフォールバックコンテンツを追加できます。

名前.mp3 をダウンロード

表 1. タグの属性属性

自動再生	ページが読み込まれた直後に音声ファイルを自動再生します。
コントロール	基本的な再生コントロール (再生の開始と停止、録音内の別の場所へのスキップ、音量の調整) を表示するようにブラウザーに指示します。
ループ	オーディオファイルのループ再生。
ミュートされた	オーディオファイルの再生時にサウンドをオフにします。
プリロード	オーディオコンテンツのプリロードを担当する属性。オプションですが、一部のブラウザはこれを無視します。可能な値: auto - ブラウザはオーディオファイル全体をダウンロードし、ユーザーが再生を開始したときに利用できるようにします。メタデータ - ブラウザはオーディオファイルの最初の小さな部分をダウンロードして、その基本的な特性を判断します。 none - 音声ファイルの自動ダウンロードは行いません。
送信元	オーディオファイルの絶対 URL または相対 URL が含まれます。

2. オーディオコーデック

オーディオコーデック (デコーダ) は、デジタルデータをオーディオファイルまたはオーディオストリーム形式に変換するプログラムです。一般的なオーディオ形式は次のとおりです。

MP3 は非可逆圧縮を使用する最も一般的なオーディオ形式であり、ファイルサイズを数倍削減できます。ライセンス料金のため、Firefox と Opera はサポートされていません。

A.A.C. (高度なオーディオコーデック)- MP3 に似たクローズドコーデックですが、後者と比較して、同様のファイルサイズでより高い音質をサポートします。

Ogg Vorbis は、Firefox、Opera、Chrome でサポートされている無料のオープンソース形式です。優れた音質を提供しますが、ハードウェアプレーヤーではあまりサポートされていません。

3. 代替メディアリソース

この要素は、およびに複数のメディアリソースを追加するために使用されます。サポートされているメディアタイプまたはコーデックに基づいてブラウザが選択できる代替ビデオ/オーディオファイルを示します。

4. 字幕とタイトルの追加

要素は子要素として使用され、となります。オーディオまたはビデオファイルの再生中に表示される字幕、メディアタイトル、またはその他のテキスト情報のテキストトラックを追加します。

表 3. タグの属性属性の説明、受け入れられる値

デフォルト	このトラックがデフォルトで再生されることを示します。特定の属性を含めることができる要素は 1 つだけです。
親切	デフォルトで表示されるテキストトラックのタイプを指定します。受け入れられる値: キャプション - ダイアログと効果音の翻訳。ビデオ上にテキストとして表示されます (聴覚障害者向け)。 Chapters - メディアファイル内を移動するためのリストとして章タイトルを追加します。説明 - ビデオ内で起こっていることの音声説明を追加します (視覚障害のあるユーザー向け)。メタデータ - スクリプトで使用されるメタデータはユーザーには表示されません。字幕 - ビデオの字幕として表示される、ビデオオーディオトラックのテキストの複製。
ラベル	トラックタイトルを追加します。この属性が設定されていない場合、ブラウザはデフォルト値を適用します。
送信元	テキストトラックデータへの絶対または相対 URL が含まれます。
srclang	再生されているトラックの言語。

5. オーディオプレーヤーの様式化された例

CSS スタイルを使用すると、オーディオプレーヤーに珍しい外観を与えることができます。再生は小さなスクリプト (jQuery ライブラリを使用) を使用して制御され、レコードの上にマウスを置くとサウンドが表示されます。

オーディオクリップを Web ページに挿入するために、HTML 5 はペアのタグを提供します。このオーディオクリップが保存されているファイルのインターネットアドレスは、このタグの SRC 属性を使用して示されます。

Web ブラウザがタグを検出すると、オーディオファイルをすぐにダウンロードして再生することも、再生せずにダウンロードすることも、まったく何もしないこともできます。 (後者の場合、Web スクリプトから再生を開始できます。Web スクリプトについてはパート III で説明します。) また、訪問者がオーディオを再生、一時停止、早送りまたは巻き戻しできるコントロールを Web ページ上に提供することもできます。ファイルを開き、音量を調整します。これはすべて、さまざまなタグ属性を使用してカスタマイズできます。これについては後ほど説明します。

このタグは、Web ページのブロック要素を作成します。したがって、オーディオクリップを段落の一部として Web ページに挿入することはできません。ただし、別の段落に配置するために、(画像とは異なり) 追加のアクションを実行する必要はありません。

デフォルトでは、Web ブラウザはオーディオクリップを再生しません。これを行うには、タグに特別な AUTOPLAY 属性を指定する必要があります。これは本当に特別な属性です。意味はありません。タグ内に存在するだけで有効になります (意味のないタグ属性)。

これで音が聞こえます！

デフォルトでは、オーディオクリップは Web ページ上にまったく表示されません (ただし、これは理解できます。オーディオは見るものではなく聞くものです)。ただし、CONTROLS 値を指定せずにタグに属性を配置すると、Web ブラウザは、Web ページ上のタグが配置された場所にオーディオ再生コントロールを表示します。これらには、再生/一時停止ボタン、再生バー、音量コントロールが含まれます。

再生ボタンを押すと音声が聞こえます。

タグ内に AUTOBUFFER 値を指定せずに属性を指定するのは、そこに AUTOPLAY 属性がない場合にのみ意味があります。これが指定されている場合、Web ブラウザは Web ページをロードした直後にオーディオファイルのダウンロードを開始します。これにより、ファイルの再生が開始されるまでの遅延がなくなります。

取得した知識を実際にテストするには、Web ブラウザでサポートされている形式のオーディオクリップが必要です。著者は、WAV-PCM 形式の小さなオーディオクリップを見つけ、それに sound.wav という名前を付けました。他のオーディオクリップを使用することもできますが、当然のことながら、リスト 4.2 の HTML コードでそれを保存するファイルの名前を指定する必要があります。

。このタグを説明する Web ページを作成してみましょう。その HTML コードをリスト 4.2 に示します。

Web ページを t_audio.htm というファイルに保存しましょう。選択したオーディオファイル (作成者からの sound.wav) を、Web サイトのすべてのファイル (t_audio.htm を含む) が配置されているフォルダーに配置しましょう。そして、すぐに Web ブラウザで新しく作成した Web ページを開きます (図 4.2)。

コード例とその実行結果を以下に示します。これは、オーディオクリップの再生を制御するための優れた要素です。再生ボタンを押して聞いてみましょう。

ビデオの挿入

ペアのタグは、Web ページにビデオを挿入するために使用されます。ビデオファイルのインターネットアドレスは、このタグのよく知られた SRC 属性を使用して示されます。

このタグに遭遇すると、Web ブラウザは、Web ページ上のこのタグが配置されている場所にビデオコンテンツ表示パネルを表示します。タグで指定した属性に応じて、オーディオファイルをすぐにダウンロードして再生することも、再生せずにダウンロードのみを行うことも、まったく何もしないこともできます。 Web ページ上にビデオ再生コントロールを表示することもできます。

タグと同様に、このタグは Web ページのブロック要素を作成し、AUTOPLAY、CONTROLS、および AUTOBUFFER 属性をサポートします。

ビデオの再生がまだ開始されていない場合、プレビューペインにはビデオの最初のフレームが表示されるか、何も表示されません (正確な動作は Web ブラウザによって異なります)。ただし、スプラッシュスクリーンとして表示されるグラフィックイメージを指定することはできます。これは、タグの POSTER 属性を使用して行われます。その値は、目的のグラフィックファイルのインターネットアドレスを示します。

ここでは、ビデオのスプラッシュ画像を指定しました。この画像は再生開始前に表示パネルに表示され、filmposter.jpg ファイルに保存されます。

さて、練習しましょうか？まず、適切な形式のビデオファイルを探しましょう。著者は OGG 形式の小さなビデオを見つけ、それに film.ogg という名前を付けました。他のビデオを選択することもできますが、もちろん、以下の HTML コードでそのファイル名を指定する必要があります。

メモについて

適切な形式のビデオが見つからない場合は、別の形式で保存されたビデオをトランスコードして自分でビデオを作成できます。これには、インターネットアドレス http://www.erightsoft.com/SUPER.html にある SUPER © ユーティリティが適しています。 OGG を含む多くのマルチメディア形式をサポートしています。

Web ページのindex.htm を開いて、タグセクションにタグを入力してみましょう。このタグを説明する Web ページを作成してみましょう。その HTML コードをリスト 4.3 に示します。

Web ページを t_video.htm という名前のファイルに保存しましょう。選択したビデオファイル (作成者からの film.ogg) を、Web サイトのすべてのファイル (t_video.htm を含む) が配置されているフォルダーに配置しましょう。そして、完成した Web ページ t_video.htm を Web ブラウザで開きます (図 4.3)。

コード例の下には、その実行結果、つまり再生を制御するための表示パネルと要素が表示されます。再生ボタンを押して動画を見てみましょう。再生が始まるとコントロールが消えることに注意してください。これらにアクセスするには、ビューパネル上にマウスカーソルを置く必要があります。ビデオの再生が終了すると、これらのコントロールが画面に再び表示されます。

追加のタグ機能と

ちょっと待って！以前に、サポートされているマルチメディア形式のセットが Web ブラウザごとに異なることを学びました。また、Web ページに配置した音声やビデオが、一部の Web ブラウザにとっては厳しすぎる場合もあります。どうすればいいですか？

特にそのような場合のために、HTML 5 は複数のマルチメディアファイルを 1 つのタグで、または一度に示す機能を提供します。 Web ブラウザ自体がサポートする形式を選択します。

複数のメディアファイルを 1 つのタグまたはタグにリストする場合は、2 つのことを行う必要があります。

1. マルチメディアファイルのタグまたは参照、つまり SRC 属性とその値から削除します。

2. タグまたはタグのセット内に配置します。各タグは 1 つのマルチメディアファイルのインターネットアドレスを決定します。

単一のタグで、メディアファイルのインターネットアドレスとその MIME タイプの両方を指定します。このタグの SRC 属性と TYPE 属性は、それぞれ次の目的で使用されます。

このタグは、同じムービーを保存している 2 つのビデオファイル (1 つは OGG 形式、もう 1 つは QuickTime 形式) を識別します。 OGG 形式をサポートする Web ブラウザは最初のファイルをダウンロードして再生し、QuickTime をサポートする Web ブラウザは 2 番目のファイルをロードして再生します。

ビデオファイルの MIME タイプ (およびそれに応じてタグの TYPE 属性) は省略できることに注意してください。ただし、Web ブラウザはファイルの先頭を読み込んで、そのファイル形式をサポートしているかどうかを確認する必要があります。そして、これはネットワークにまったく不必要な余分な負荷を与えます。したがって、常に MIME タイプを指定することをお勧めします。

Web ブラウザがとタグをまったくサポートしていない場合はどうすればよいでしょうか? この場合、それらは無視され、Web ページには何も表示されません。ただし、発生した問題を説明し、それを解決するための何らかの方法 (Web ブラウザの変更など) を提案する代替テキストを提供することはできます。この置換テキストは、たとえばリスト 4.4 のように、タグ内またはすべてのタグ (存在する場合) の後に配置されます。