ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
audio 要素の基本
HTML5 で導入。プラグイン不要で音声を Web ページに埋め込めます。
<!-- 最もシンプル: controls 付きで -->
<audio controls src="music.mp3"></audio>
<!-- 複数フォーマット対応(推奨) -->
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
<source src="music.wav" type="audio/wav">
<p>お使いのブラウザは audio タグに対応していません。
<a href="music.mp3">音声ファイル</a>をダウンロードしてください。
</p>
</audio>
<!-- 属性盛りだくさん -->
<audio
controls
autoplay
muted
loop
preload="metadata"
src="bgm.mp3"
id="bgm">
</audio>
属性一覧
| 属性 | 意味 |
|---|---|
src | 音声ファイル URL(<source> 無しのとき) |
controls | ブラウザ標準の再生 UI を表示 |
autoplay | 自動再生(多くのブラウザで制限あり) |
loop | 繰り返し再生 |
muted | ミュート初期状態 |
preload | none / metadata / auto |
crossorigin | CORS 用 (anonymous / use-credentials) |
主要フォーマットの対応状況
| 形式 | MIME | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|---|
| MP3 | audio/mpeg | ○ | ○ | ○ | ○ |
| AAC | audio/aac | ○ | △ | ○ | ○ |
| Ogg Vorbis | audio/ogg | ○ | ○ | × | ○ |
| Opus | audio/ogg; codecs=opus | ○ | ○ | ○ (14+) | ○ |
| WAV | audio/wav | ○ | ○ | ○ | ○ |
| FLAC | audio/flac | ○ | ○ | ○ | ○ |
| WebM (Vorbis/Opus) | audio/webm | ○ | ○ | △ | ○ |
最大公約数は MP3。容量効率を取るなら Opus(Safari 14+ 対応で可用に)。
autoplay の制限
ユーザの意図しない音声再生を防ぐため、ブラウザは autoplay を厳しく制限しています:
Chrome / Edge:
- muted 付き autoplay: OK
- 音声付き autoplay: ユーザがサイトを「よく訪問する」と判断されたときのみ
(Media Engagement Index による)
- iframe 内: allow="autoplay" 属性必要
Safari (macOS / iOS):
- 音声付き autoplay: 原則 NG
- muted autoplay: OK
- ユーザのクリック後なら可
Firefox:
- サイトごとに許可設定
- デフォルトは muted のみ許可<!-- ✅ どこでも動く: muted で起動、ボタンで unmute -->
<audio id="bgm" autoplay muted loop src="bgm.mp3"></audio>
<button id="unmute">音量オン</button>
<script>
document.getElementById('unmute').addEventListener('click', () => {
const a = document.getElementById('bgm');
a.muted = false;
});
</script>
JavaScript API
const audio = document.querySelector('#bgm');
// 再生 / 一時停止
audio.play(); // Promise を返す(autoplay 制限で reject の可能性)
audio.pause();
// シーク
audio.currentTime = 60; // 60 秒地点へ
console.log(audio.duration); // 総再生時間(秒)
// 音量 / 速度
audio.volume = 0.5; // 0.0 ~ 1.0
audio.playbackRate = 1.5; // 1.5 倍速
audio.muted = true;
// 状態
console.log(audio.paused); // 一時停止中か
console.log(audio.ended); // 再生終了したか
console.log(audio.readyState); // 0-4
// 再生 Promise を扱う
try {
await audio.play();
} catch (err) {
console.warn('再生失敗:', err);
// → 多くは autoplay policy 違反
}
イベント
const a = document.querySelector('audio');
a.addEventListener('loadedmetadata', () => console.log('長さ:', a.duration));
a.addEventListener('canplay', () => console.log('再生可能'));
a.addEventListener('play', () => console.log('再生開始'));
a.addEventListener('pause', () => console.log('一時停止'));
a.addEventListener('ended', () => console.log('再生終了'));
a.addEventListener('timeupdate', () => {
document.querySelector('#current').textContent = a.currentTime.toFixed(1);
});
a.addEventListener('error', () => console.error('エラー:', a.error));
a.addEventListener('waiting', () => console.log('バッファリング中'));
a.addEventListener('volumechange', () => console.log('音量:', a.volume));
カスタム UI を作る
<audio id="track" src="song.mp3"></audio>
<button id="playPause">▶</button>
<input type="range" id="seek" min="0" max="100" value="0">
<span id="time">0:00 / 0:00</span>
<script>
const track = document.getElementById('track');
const btn = document.getElementById('playPause');
const seek = document.getElementById('seek');
const time = document.getElementById('time');
btn.onclick = () => {
if (track.paused) {
track.play();
btn.textContent = '⏸';
} else {
track.pause();
btn.textContent = '▶';
}
};
track.ontimeupdate = () => {
seek.value = (track.currentTime / track.duration) * 100;
time.textContent = formatTime(track.currentTime) + ' / ' + formatTime(track.duration);
};
seek.oninput = () => {
track.currentTime = (seek.value / 100) * track.duration;
};
function formatTime(sec) {
const m = Math.floor(sec / 60);
const s = Math.floor(sec % 60).toString().padStart(2, '0');
return `${m}:${s}`;
}
</script>
Web Audio API でエフェクト
音量調整・イコライザ・解析など高度な処理は Web Audio API を使います:
const audioCtx = new AudioContext();
const audio = document.querySelector('audio');
const source = audioCtx.createMediaElementSource(audio);
// 音量を上げる
const gain = audioCtx.createGain();
gain.gain.value = 1.5;
// FFT 解析(ビジュアライザ用)
const analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
source.connect(gain).connect(analyser).connect(audioCtx.destination);
// 周波数データ取得
const buf = new Uint8Array(analyser.frequencyBinCount);
function draw() {
analyser.getByteFrequencyData(buf);
// buf を canvas に描画 → ビジュアライザ完成
requestAnimationFrame(draw);
}
draw();
// 再生開始(ユーザ操作後に呼ぶ)
audio.play();
audioCtx.resume(); // Safari 等で必要
ストリーミング(MSE)
Media Source Extensions を使うと、JS から音声チャンクを供給できます。HLS / DASH 配信に必須:
const mediaSource = new MediaSource();
const audio = document.querySelector('audio');
audio.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', async () => {
const sb = mediaSource.addSourceBuffer('audio/mpeg');
const chunks = await fetchChunks(); // 自前で取得
for (const chunk of chunks) {
sb.appendBuffer(chunk);
await new Promise(r => sb.addEventListener('updateend', r, {once:true}));
}
mediaSource.endOfStream();
});
// HLS は hls.js ライブラリ利用が一般的
// import Hls from 'hls.js';
// const hls = new Hls();
// hls.loadSource('stream.m3u8');
// hls.attachMedia(audio);
アクセシビリティ
- controls を出して、キーボード操作可能に
- 字幕付き音声なら
<track>(ただし audio 要素では公式サポート外、video のみ)→ 代替テキストを近くに置く - 背景音楽の自動再生は避ける(音響過敏症の方への配慮)
- テキスト書き起こしを併設すると検索性も a11y も向上
FAQ
Q: play() が rejected されるのはなぜ?
A: autoplay policy 違反です。ユーザのクリック等のジェスチャ後に呼ぶか、muted 状態で開始してください。
Q: ファイルが大きくて遅い
A: preload="metadata" でメタデータだけ先読み、Opus / AAC でサイズ削減、CDN を使う、Range リクエストで部分配信を有効化。
Q: iOS Safari で動かない
A: ① ユーザ操作後に play() ② muted 初期化 ③ preload="auto" 試行。それでもダメなら HLS でのストリーミング検討。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページ
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- Unreal Engine AI MoveTo 完全ガイド(NavMesh / AIController / Behavior Tree) 2026-06-11 07:10:02
- Laravel ルート認証化完全ガイド — middleware と Gate 2026-06-11 07:10:02
- EJB完全ガイド(Stateless/Stateful/Singleton/MDB/CDIとの違い/Spring代替) 2026-06-11 07:10:02
- CDI完全ガイド(Inject/Produces/Qualifier/Scope/Spring DIとの違い) 2026-06-11 07:10:02
- DI(依存性注入)完全ガイド(Dependency Injection / IoC / Spring / CDI / コンストラクタ・セッター注入) 2026-06-11 07:10:02
- TCP/IP リンク層 (ネットワークインターフェース層) 完全ガイド 2026-06-11 07:10:02
- Apache .htaccess でベーシック認証を設定する手順(.htpasswd / htpasswd / AuthType Basic / トラブルシュート) 2026-06-11 07:10:02
- Python アプリのローカル独立配布完全ガイド(PyInstaller / wheel / Docker) 2026-06-11 07:10:02
- git 用語一覧完全リファレンス(Repository / HEAD / Branch / Rebase / Stash 他) 2026-06-11 07:10:02
- EJS テンプレートの共通化 (include) 完全ガイド 2026-06-11 07:10:02
- JAX-RS 完全ガイド(Java EE で REST API 開発 / @Path / @GET / Jersey / RESTEasy) 2026-06-11 07:10:02
- shutdown コマンド完全ガイド(Linux / Windows / systemd の使い分け) 2026-06-11 07:10:02
- Laravel のインストール手順まとめ — composer / Sail / Valet / Herd と初期設定 2026-06-11 07:10:02
- Python set 入門 — 作成方法、frozenset、内包表記、リスト重複削除 2026-06-11 07:10:02
- git log コミット履歴確認完全ガイド — oneline/graph/stat/blame 2026-06-11 07:10:02
コメントを削除してもよろしいでしょうか?