JavaScriptでメディア（音声や動画）を停止させる際に使用する`pause()`メソッドについて、具体的な使い方と実装例を解説します。

pause()メソッドとは

`pause()`メソッドは、HTMLの`

基本的な使い方

// HTML要素の取得
const audio = document.querySelector('audio');
const video = document.querySelector('video');

// 音声の停止
audio.pause();

// 動画の停止
video.pause();

実践的な実装例

音声プレーヤーの場合

<audio id="myAudio" src="sample.mp3"></audio>
<button onclick="stopAudio()">停止</button>

<script>
function stopAudio() {
    const audio = document.getElementById('myAudio');
    audio.pause();
}
</script>

動画プレーヤーの場合

<video id="myVideo" src="sample.mp4"></video>
<button onclick="stopVideo()">停止</button>

<script>
function stopVideo() {
    const video = document.getElementById('myVideo');
    video.pause();
}
</script>

よくある使用シーン

1. ページ遷移時のメディア停止

window.addEventListener('beforeunload', () => {
    const media = document.querySelector('audio, video');
    if (media) media.pause();
});

2. 複数メディアの同時停止

function stopAllMedia() {
    const allMedia = document.querySelectorAll('audio, video');
    allMedia.forEach(media => media.pause());
}

注意点

  • `pause()`メソッドは再生位置を保持したまま停止します
  • 完全に最初から再生し直す場合は、`currentTime = 0`の設定も必要です
  • メディアが存在しない場合のエラー処理を考慮することをお勧めします

エラー処理の例

function safelyPauseMedia(mediaElement) {
    try {
        if (mediaElement && typeof mediaElement.pause === 'function') {
            mediaElement.pause();
        }
    } catch (error) {
        console.error('メディアの停止に失敗しました:', error);
    }
}

まとめ

`pause()`メソッドは、JavaScriptでメディアを制御する際の基本的かつ重要なメソッドです。適切なエラー処理と組み合わせることで、より安全なメディア制御が可能になります。ユーザーインターフェースの実装や、ページ遷移時の処理など、様々なシーンで活用できます。