HTML5でオーディオが再生中かどうかを確認する方法

Webアプリケーションを開発していると、オーディオが現在再生中かどうかを判定したい場面があります。HTML5では、<audio>要素が持つプロパティを活用することで、簡単にこの状態を確認できます。

isPlaying関数で再生状態を判定する

以下の関数を使用すると、オーディオが再生中かどうかをチェックできます。

function isPlaying(audelem) {
    return !audelem.paused;
}

pausedプロパティの仕組み

上記のコードは、オーディオの再生状況を判定するために利用できます。<audio>タグにはpausedプロパティが用意されており、このプロパティはオーディオや動画が一時停止中であるかどうかを真偽値（true / false）で返します。

• true：オーディオが一時停止中（またはまだ再生が開始されていない）
• false：オーディオが再生中

つまり、pausedプロパティの否定を返すことで、「現在再生中かどうか」を判定できるわけです。

再生と一時停止を切り替えるtogglePause関数

さらに、再生と一時停止をトグルで切り替えたい場合は、以下のような関数が便利です。

function togglePause() {
    if (newAudio.paused && newAudio.currentTime > 0 && !newAudio.ended) {
        newAudio.play();
    } else {
        newAudio.pause();
    }
}

コードの解説

この関数では、次の3つの条件をすべて満たした場合に再生を再開します。

1. newAudio.paused — オーディオが一時停止中であること
2. newAudio.currentTime > 0 — 再生位置が先頭ではないこと（一度再生が始まっていること）
3. !newAudio.ended — オーディオが最後まで再生されていないこと

これらの条件を満たす場合はplay()メソッドで再生を再開し、それ以外の場合はpause()メソッドで一時停止します。

まとめ

HTML5の<audio>要素に用意されたpaused、currentTime、endedなどのプロパティを組み合わせることで、オーディオの再生状態を柔軟に制御できます。プレイヤーUIの再生ボタンの表示切り替えなどにも応用できるので、ぜひ活用してみてください。