HTMLのaudioタグの使い方を完全ガイド！初心者でもわかる音声再生の基本
生徒
「Webサイトに音楽や音声を流したいんですけど、HTMLだけでできますか？」
先生
「できますよ。HTMLのaudioタグを使えば、特別なソフトがなくても音声を再生できます。」
生徒
「再生ボタンとかは自分で作らないといけないんですか？」
先生
「controls属性を付けるだけで、再生や停止ができる操作パネルが表示されます。」
1. HTMLのaudioタグとは？
audioタグは、Webページに音声ファイルを埋め込んで再生するためのHTMLタグです。音楽、ナレーション、効果音などを簡単にページ内で再生できます。
以前は音声再生に特別な仕組みが必要でしたが、現在はHTMLだけで音声プレイヤーを表示できます。ラジオプレイヤーをページの中に置くようなイメージです。
2. audioタグの基本的な書き方
audioタグの基本構造はとてもシンプルです。src属性で音声ファイルの場所を指定します。音声ファイルとは、mp3やwavなどの拡張子を持つファイルのことです。
<audio src="sample.mp3"></audio>
このままでは再生操作ができないため、次に紹介するcontrols属性がほぼ必須になります。
3. controls属性で音声操作を可能にする
controls属性を指定すると、再生・停止・音量調整ができる操作パネルが表示されます。初心者の方は、audioタグと一緒に必ず使うと覚えておくと安心です。
<audio src="sample.mp3" controls></audio>
controlsを付けるだけで、誰でも直感的に操作できる音声プレイヤーになります。
4. autoplay属性で音声を自動再生する
autoplay属性を指定すると、ページを開いたときに音声が自動で再生されます。店内BGMや自動ナレーションなどで使われることがあります。
<audio src="sample.mp3" controls autoplay></audio>
ただし、突然音が出ると驚かれることもあるため、使用する場面には注意が必要です。
5. muted属性で音を消した状態にする
muted属性を指定すると、最初から音量がゼロの状態で再生されます。音声が勝手に流れないようにしたい場合に便利です。
<audio src="sample.mp3" controls autoplay muted></audio>
スマートフォン利用者への配慮としても重要な設定です。
6. loop属性で音声を繰り返し再生する
loop属性を指定すると、音声が最後まで再生されたあと、自動的に最初から繰り返し再生されます。短いBGMなどに向いています。
<audio src="sample.mp3" controls loop></audio>
一度設定すれば、自動で繰り返されるため便利です。
7. sourceタグを使った音声形式の指定
ブラウザによって対応している音声形式が異なる場合があります。その場合は、audioタグの中にsourceタグを複数書くことで、再生可能な形式を自動で選択してくれます。
<audio controls>
<source src="sample.mp3" type="audio/mpeg">
<source src="sample.wav" type="audio/wav">
</audio>
この書き方を覚えておくと、多くの環境で音声を再生できます。
8. audioタグを使うときの注意点
音声ファイルは容量が大きくなると、ページの読み込みが遅くなることがあります。そのため、必要以上に長い音声は避けることが大切です。
また、音が出るコンテンツは利用者の環境に影響を与えるため、controlsを付けて利用者が自由に操作できる形にするのが基本です。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
