.png)
.png)
English .png)
Français .png)
Deutsch .png)
Italiano .png)
Português 
Español 
简体中文 
HTMLを使ってウェブページに音声を追加するのは非常に簡単です。基本的なHTMLの知識があれば誰でもできます。
とはいえ、音質は機能性と同じくらい重要です。音声録音を追加する場合、高品質なマイクを使用することで大きな違いが生まれます。Hollyland LARK A1のような製品は非常に優れています。オートリミットクリップ保護、650フィートのワイヤレス範囲、3段階のインテリジェントノイズキャンセリングといった機能を備え、強力なパフォーマンスを発揮します。
Hollyland LARK A1 - Affordable Wireless Microphone
A perfect starter mic for creators on a budget. It’s simple to use and features effective noise cancellation.
Key Features: 48kHz/24-bit | 3-Level Noise Cancellation | 54-Hour Battery
HTML audioタグの仕組み
ウェブページで音声を再生するには、
ファイルをリンクするには、audioタグ内にsourceタグを配置します。これにより、ブラウザにどの音声を読み込み、どの形式を期待するかを伝えます。ブラウザがaudioタグをサポートしていない場合、短いメッセージを表示できます。そうすることで、ユーザーは音声機能が動作していないことを知ることができます。
いくつかの追加属性もあります：
- autoplay: ページが読み込まれたときに音声を再生します。
- muted: デフォルトで音声をミュートにします。
- loop: 音声を繰り返し再生します。
HTMLは以下の3つの音声形式をサポートしています：
- MP3（ブラウザ間のサポートが最も優れています）
- WAV
- OGG
MP3はほとんどの場所で動作するため、最も安全な選択肢です。
HTMLで音声を埋め込む方法：ステップバイステップの手順
HTMLページに音声を追加するには、以下の手順に従ってください：
1. 音声ファイルを準備する
- すべてのブラウザで最良の結果を得るにはMP3を使用してください。
- 音声ファイルをHTMLファイルと同じフォルダに配置してください。
- YouTubeオーディオライブラリから無料の音楽を入手できます。
ロイヤリティフリーのウェブサイトからトラックをダウンロードすることもできます。
2. HTML構造を作成する
- HTMLファイルを開きます。
- 内に、開始タグと終了タグの
<audio></audio>- HTMLファイルを保存し、ブラウザを更新します。
3. オーディオプレーヤーにコントロールを追加する
- 開始タグの
<audio controls></audio>- ページを保存して更新します。
- ブラウザページにオーディオプレーヤーが表示されるはずです。
しかし、現時点ではバーがグレー表示されており、さらに属性とタグを追加する必要があることを示しています。
4. 音声ファイルをリンクする
- 開始タグと終了タグのaudioタグの間に、
タグ。 を挿入します。 - ‘src’属性を使用して、音声ファイル名を指定します。
<audio controls>
<source src="bro_time.mp3" type="audio/mpeg">
</audio>- 保存して更新します。オーディオコントロールがアクティブになるはずです。
5. フォールバックメッセージを追加する
- ブラウザが音声をサポートしていない場合に備えて、簡単なメッセージを記述します。
<audio controls>
<source src="bro_time.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
6. ファイルパスを使用する（音声が別のフォルダにある場合）
- 音声ファイルが同じフォルダにない場合は、フルパスを含めます。
<source src="C:/Users/YourName/Desktop/bro_time.mp3" type="audio/mpeg">
7. 音声をループ再生する
- 音声を連続して繰り返すには、audioタグに「loop」を追加します。
<audio controls loop>
<source src="bro_time.mp3" type="audio/mpeg">
</audio>
8. 音声をミュートで開始する
- デフォルトで音声をミュートで再生するには、mutedを使用します。
<audio controls muted>
<source src="bro_time.mp3" type="audio/mpeg">
</audio>
9. 音声を自動再生する
- 音声を自動的に開始するには、autoplayを追加します。
<audio controls autoplay>
<source src="bro_time.mp3" type="audio/mpeg">
</audio>
重要: 自動再生は、特にChromeやモバイルなどのモダンブラウザではうまく機能しません。また、多くの専門家は、ユーザーのプライバシーを侵害する可能性があるため、autoplay audioタグを推奨していません。
10. バックグラウンドオーディオのコントロールを非表示にする
- プレーヤーを表示せずにバックグラウンドミュージックを再生するには、controls属性を削除します。
<audio autoplay>
<source src="bro_time.mp3" type="audio/mpeg">
</audio>
- これを賢く使用してください。自動再生される非表示の音声は、ユーザーを不快にさせる可能性があります。
ユースケース：複数の音声ファイルを含むウェブページの作成
実際の例を試してみませんか？基本的な音楽ページを作成してみましょう。これは楽しいプロジェクトになるでしょう。必要なのは、いくつかの音声ファイルと基本的なHTMLファイルだけです。
作成するには、以下の手順に従ってください：
音声ファイルを準備する
- 少なくとも4つのMP3曲またはサウンドクリップを選択します
- bro_time.mp3、block_party.mp3のように明確に名前を付けます
- すべての音声ファイルをHTMLファイルと同じフォルダに配置します
新しいHTMLドキュメントを開始する
- メモ帳やVS Codeなどのテキストエディタを開きます
- 空の.htmlファイルを作成します
- 音声ファイルと同じフォルダに保存します
ページタイトルを設定する
- セクション内に、メインの見出しを追加します
MeTunes
最初のオーディオトラックを追加する
タグを使用して曲名を入力します
- ソースファイル付きのオーディオプレーヤーを以下に追加します
<h3>Bro Time</h3>
<audio controls>
<source src="bro_time.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>他の曲についても繰り返す
- 同じ構造をコピー＆ペーストします
- 見出しとソースファイル名を変更します
<h3>Block Party</h3>
<audio controls>
<source src="block_party.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
<h3>City Night Lights</h3>
<audio controls>
<source src="city_night_lights.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
<h3>Beat Your Competition</h3>
<audio controls>
<source src="beat_your_competition.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>各トラックの間にスペースを追加する
タグを使用して余分なスペースを追加します- これにより、ページがすっきりと読みやすくなります
ブラウザでテストする
- HTMLファイルをダブルクリックして開きます
- すべての曲が正しく動作していることを確認します
- 再生されない場合は、ファイル名とパスを確認してください
これで、基本的なHTMLを使用した動作する音楽ページができました。各音声ファイルは独自のプレーヤーを表示し、すべてが問題なく再生されます。
ヒント: このプロジェクトの完全なコードはこちらです。コピー＆ペーストするだけです。ファイルパスと曲名を変更して、お気に入りの曲をHTMLサイトに追加する練習をしてください。
<!DOCTYPE html>
<html>
<head>
<title>MY PRACTICE AUDIO HTML SITE</title>
</head>
<body>
<h1>SongSite</h1>
<br>
Song One:
<br>
<audio controls>
<source src="song_one.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
<br>
Song Two:
<br>
<audio controls>
<source src="song_two.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
<br>
Song Three:
<br>
<audio controls>
<source src="song_three.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
<br>
Song Four:
<br>
<audio controls>
<source src="song_four.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
<br>
</body>
</html>正しく実行できていれば、HTMLページは次のように表示されるはずです：
まとめ
audioタグの基本を理解すれば、HTMLページに音楽を挿入するのは非常に簡単になります。この記事では、HTMLにオーディオトラックを追加するために必要なすべての手順を紹介しています。
しかし、ユーザーのプライバシーを確保するために正しい属性を使用することが重要です。同様に、著作権侵害を避けるため、常に無料で使用できる音楽またはライセンスされた音楽を使用することをお勧めします。
よくある質問
1. HTMLでオーディオプレーヤーを非表示にするにはどうすればよいですか？
オーディオプレーヤーを非表示にするには、タグ内の「controls」という単語を省略します。誰かがあなたのページを訪れると、何も表示されずに音声が再生されます。autoplayも使用すると、すぐに開始されます。ただし、注意が必要です。コントロールがない場合、一部のブラウザは音声をブロックする可能性があります。
2. HTMLのaudioタグとvideoタグは何をしますか？
audioタグとvideoタグを使用すると、音声や動画を追加できます。音楽やクリップをページに直接配置できます。これらのタグはHTML5の一部であり、今日のほとんどのブラウザで動作します。プレーヤーを画面に表示するには、bodyセクション内に追加します。また、ブラウザに応じて異なるファイルタイプをサポートしています。
3. 現代のウェブサイトでもHTMLはまだ使われていますか？
はい、HTMLはオンライン上のすべてのサイトを構築するために今でも使用されています。高度なページでさえ、構造とレイアウトのためにHTMLが必要です。SEO、読み込み速度、ページデザインに役立ちます。小さなページであろうと複雑なページであろうと、HTMLは依然として重要です。それがなければ、どのブラウザでもウェブサイトは正しく読み込まれません。
