audio要素のsrc controls loop autoplay

HTML5 のネイティブオーディオ

<audio src="podcast.mp3" controls>
  Your browser does not support audio.
</audio>
<!-- controls: show the default player UI (play, pause, volume) -->
<!-- Fallback text is shown to browsers that don't support audio -->

controls 属性

<!-- Without controls: audio plays but no UI is visible -->
<audio src="bg-music.mp3"></audio>

<!-- With controls: browser shows play/pause, volume, scrubber -->
<audio src="podcast.mp3" controls></audio>

<!-- Always include controls for user-accessible audio
     Unless it is a background ambient sound (use controls anyway for accessibility) -->

loop 属性

<audio src="bg-music.ogg" controls loop></audio>
<!-- loop is a boolean attribute -->
<!-- Good for: background music, demo soundscapes -->
<!-- Bad UX: loops without user consent are annoying -->

autoplay 属性

<audio src="alert.mp3" autoplay></audio>
<!-- Most modern browsers BLOCK autoplay for audio by default -->
<!-- Exception: autoplay + muted is allowed -->
<!-- Browsers allow autoplay if the user has interacted with the page -->

<!-- The muted workaround: -->
<audio src="bg.mp3" autoplay muted loop></audio>

muted 属性

<!-- Muted audio can autoplay in most browsers: -->
<audio src="ambient.mp3" autoplay muted loop></audio>

<!-- User can unmute with the controls -->
<audio src="ambient.mp3" autoplay muted loop controls></audio>

preload 属性

<audio src="podcast.mp3" controls preload="none">...</audio>
<!-- none: don't preload anything (saves bandwidth on mobile) -->

<audio src="short-clip.mp3" controls preload="auto">...</audio>
<!-- auto: preload the entire file (browser decides) -->

<audio src="song.mp3" controls preload="metadata">...</audio>
<!-- metadata: preload only duration and basic info (good default) -->

JavaScript によるオーディオ制御

const audio = document.getElementById('my-audio');

// Play:
audio.play();

// Pause:
audio.pause();

// Current time (seconds):
audio.currentTime = 30;  // jump to 30 seconds

// Volume (0 to 1):
audio.volume = 0.5;

// Duration:
console.log(audio.duration);

オーディオイベント

audio.addEventListener('play', () => console.log('Playing'));
audio.addEventListener('pause', () => console.log('Paused'));
audio.addEventListener('ended', () => console.log('Finished'));
audio.addEventListener('timeupdate', () => {
  console.log('Position:', audio.currentTime);
});
audio.addEventListener('error', () => console.log('Error loading audio'));

カスタムオーディオプレーヤー

<div class="audio-player">
  <audio id="player" src="podcast.mp3" preload="metadata"></audio>
  <button id="play-btn" aria-label="Play">▶</button>
  <input type="range" id="scrubber" value="0" min="0" max="100">
  <span id="time">0:00</span>
</div>
<script>
const audio = document.getElementById('player');
document.getElementById('play-btn').addEventListener('click', () => {
  audio.paused ? audio.play() : audio.pause();
});
</script>

アクセシブルなオーディオ

src と source 要素

<!-- Single format: -->
<audio controls src="podcast.mp3">...</audio>

<!-- Multiple formats: -->
<audio controls>
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

クイックチェック

復習：audio 要素