驚愕！durationで音声・動画を自在に操る10の裏技

●durationプロパティとは？

JavaScriptを使ってWebアプリケーションを開発していると、音声や動画を扱う機会が出てくると思います。

そんなときに重要になるのが、durationプロパティです。

durationプロパティは、音声や動画の再生時間を取得したり、操作したりするために使用されます。

これを使いこなすことで、より高度な機能を持ったWebアプリケーションを開発することができるんです。

○durationの基本的な使い方

では、durationプロパティの基本的な使い方について見ていきましょう。

durationプロパティは、音声や動画の再生時間を秒単位で返します。

例えば、再生時間が1分30秒の音声の場合、durationプロパティは90を返します。

durationプロパティを使用するには、まず音声や動画の要素を取得する必要があります。

そして、その要素のdurationプロパティにアクセスすることで、再生時間を取得できます。

○サンプルコード1：音声の再生時間を取得する

それでは、実際にサンプルコードを見ていきましょう。

まずは、音声の再生時間を取得する方法です。

// 音声要素を取得
const audio = document.querySelector('audio');

// 音声の再生時間を取得
const duration = audio.duration;

console.log(`音声の再生時間は${duration}秒です。`);

このコードでは、まずquerySelectorメソッドを使用して音声要素を取得しています。

そして、その音声要素のdurationプロパティにアクセスすることで、再生時間を取得しています。

実行結果は次のようになります。

音声の再生時間は90秒です。

このように、durationプロパティを使用することで、簡単に音声の再生時間を取得することができます。

○サンプルコード2：動画の再生時間を取得する

次に、動画の再生時間を取得する方法を見ていきましょう。

基本的な使い方は音声の場合と同じです。

// 動画要素を取得
const video = document.querySelector('video');

// 動画の再生時間を取得
const duration = video.duration;

console.log(`動画の再生時間は${duration}秒です。`);

このコードでは、音声の場合と同様に、querySelectorメソッドを使用して動画要素を取得しています。

そして、その動画要素のdurationプロパティにアクセスすることで、再生時間を取得しています。

実行結果は次のようになります。

動画の再生時間は180秒です。

このように、durationプロパティを使用することで、動画の再生時間も簡単に取得することができます。

●再生位置の取得と設定

音声や動画の再生時間を取得できるようになったら、次は再生位置の取得と設定について学んでいきましょう。

再生位置を取得することで、現在どの部分を再生しているのかを知ることができます。

また、再生位置を設定することで、任意の位置から再生を開始することができます。

再生位置の取得と設定は、currentTimeプロパティを使用します。

currentTimeプロパティは、現在の再生位置を秒単位で返します。

また、currentTimeプロパティに値を設定することで、再生位置を変更することができます。

それでは、実際にサンプルコードを見ていきましょう。

○サンプルコード3：音声の再生位置を取得する

まずは、音声の再生位置を取得する方法です。

// 音声要素を取得
const audio = document.querySelector('audio');

// 再生ボタンをクリックしたときの処理
document.querySelector('#play').addEventListener('click', function() {
  // 再生を開始
  audio.play();

  // 1秒ごとに再生位置を取得
  setInterval(function() {
    const currentTime = audio.currentTime;
    console.log(`現在の再生位置は${currentTime}秒です。`);
  }, 1000);
});

このコードでは、再生ボタンをクリックしたときに、音声の再生を開始しています。

そして、setIntervalメソッドを使用して、1秒ごとに再生位置を取得しています。

実行結果は次のようになります。

現在の再生位置は5秒です。
現在の再生位置は6秒です。
現在の再生位置は7秒です。
...

このように、currentTimeプロパティを使用することで、音声の再生位置を取得することができます。

○サンプルコード4：動画の再生位置を取得する

次に、動画の再生位置を取得する方法を見ていきましょう。

基本的な使い方は音声の場合と同じです。

// 動画要素を取得
const video = document.querySelector('video');

// 再生ボタンをクリックしたときの処理
document.querySelector('#play').addEventListener('click', function() {
  // 再生を開始
  video.play();

  // 1秒ごとに再生位置を取得
  setInterval(function() {
    const currentTime = video.currentTime;
    console.log(`現在の再生位置は${currentTime}秒です。`);
  }, 1000);
});

このコードでは、再生ボタンをクリックしたときに、動画の再生を開始しています。

そして、setIntervalメソッドを使用して、1秒ごとに再生位置を取得しています。

実行結果は次のようになります。

現在の再生位置は10秒です。
現在の再生位置は11秒です。
現在の再生位置は12秒です。
...

このように、currentTimeプロパティを使用することで、動画の再生位置も簡単に取得することができます。

○サンプルコード5：音声の再生位置を設定する

再生位置を取得できるようになったら、次は再生位置を設定してみましょう。

まずは、音声の再生位置を設定する方法です。

// 音声要素を取得
const audio = document.querySelector('audio');

// 再生位置を設定するボタンをクリックしたときの処理
document.querySelector('#set').addEventListener('click', function() {
  // 再生位置を10秒に設定
  audio.currentTime = 10;

  // 再生を開始
  audio.play();
});

このコードでは、再生位置を設定するボタンをクリックしたときに、currentTimeプロパティを使用して再生位置を10秒に設定しています。

そして、再生を開始しています。

このように、currentTimeプロパティに値を設定することで、音声の再生位置を任意の位置に設定することができます。

○サンプルコード6：動画の再生位置を設定する

最後に、動画の再生位置を設定する方法を見ていきましょう。

基本的な使い方は音声の場合と同じです。

// 動画要素を取得
const video = document.querySelector('video');

// 再生位置を設定するボタンをクリックしたときの処理
document.querySelector('#set').addEventListener('click', function() {
  // 再生位置を30秒に設定
  video.currentTime = 30;

  // 再生を開始
  video.play();
});

このコードでは、再生位置を設定するボタンをクリックしたときに、currentTimeプロパティを使用して再生位置を30秒に設定しています。

そして、再生を開始しています。

●再生状態の判定

音声や動画の再生時間や再生位置を取得できるようになったら、次は再生状態の判定について学んでいきましょう。

再生状態を判定することで、現在再生中なのか、一時停止中なのか、停止中なのかを知ることができます。

再生状態の判定には、paused プロパティを使用します。

paused プロパティは、再生中かどうかを真偽値で返します。

再生中の場合は false、一時停止中または停止中の場合は true を返します。

それでは、実際にサンプルコードを見ていきましょう。

○サンプルコード7：音声の再生状態を判定する

まずは、音声の再生状態を判定する方法です。

// 音声要素を取得
const audio = document.querySelector('audio');

// 再生ボタンをクリックしたときの処理
document.querySelector('#play').addEventListener('click', function() {
  // 再生を開始
  audio.play();

  // 再生状態を判定
  if (audio.paused) {
    console.log('一時停止中または停止中です。');
  } else {
    console.log('再生中です。');
  }
});

// 一時停止ボタンをクリックしたときの処理
document.querySelector('#pause').addEventListener('click', function() {
  // 一時停止
  audio.pause();

  // 再生状態を判定
  if (audio.paused) {
    console.log('一時停止中または停止中です。');
  } else {
    console.log('再生中です。');
  }
});

このコードでは、再生ボタンと一時停止ボタンをクリックしたときに、音声の再生状態を判定しています。

再生ボタンをクリックすると、音声の再生が開始され、再生中であることが出力されます。

一時停止ボタンをクリックすると、音声の再生が一時停止され、一時停止中または停止中であることが出力されます。

実行結果は次のようになります。

再生中です。
一時停止中または停止中です。

このように、paused プロパティを使用することで、音声の再生状態を簡単に判定することができます。

○サンプルコード8：動画の再生状態を判定する

最後に、動画の再生状態を判定する方法を見ていきましょう。

基本的な使い方は音声の場合と同じです。

// 動画要素を取得
const video = document.querySelector('video');

// 再生ボタンをクリックしたときの処理
document.querySelector('#play').addEventListener('click', function() {
  // 再生を開始
  video.play();

  // 再生状態を判定
  if (video.paused) {
    console.log('一時停止中または停止中です。');
  } else {
    console.log('再生中です。');
  }
});

// 一時停止ボタンをクリックしたときの処理
document.querySelector('#pause').addEventListener('click', function() {
  // 一時停止
  video.pause();

  // 再生状態を判定
  if (video.paused) {
    console.log('一時停止中または停止中です。');
  } else {
    console.log('再生中です。');
  }
});

このコードでは、再生ボタンと一時停止ボタンをクリックしたときに、動画の再生状態を判定しています。

再生ボタンをクリックすると、動画の再生が開始され、再生中であることが出力されます。

一時停止ボタンをクリックすると、動画の再生が一時停止され、一時停止中または停止中であることが出力されます。

実行結果は次のようになります。

再生中です。
一時停止中または停止中です。

このように、paused プロパティを使用することで、動画の再生状態も簡単に判定することができます。

●よくあるエラーと対処法

音声や動画を扱うWebアプリケーションを開発していると、思わぬエラーに遭遇することがあると思います。

エラーに遭遇すると、開発が停滞してしまい、スケジュールに影響を与えてしまうこともあるでしょう。

そんなときに、よくあるエラーとその対処法を知っていれば、スムーズに開発を進めることができます。

ここでは、音声や動画を扱う際によく発生するエラーと、その対処法について見ていきましょう。

○Uncaught (in promise) DOMException：再生が許可されていない

このエラーは、ユーザーの操作なしに音声や動画を再生しようとした場合に発生します。

ブラウザのセキュリティ上の制限により、ユーザーの操作なしに音声や動画を再生することはできません。

対処法としては、ユーザーの操作をトリガーにして再生を開始するようにします。

例えば、ボタンをクリックしたときに再生を開始するようにします。

// 再生ボタンをクリックしたときの処理
document.querySelector('#play').addEventListener('click', function() {
  // 再生を開始
  audio.play();
});

このように、ユーザーの操作をトリガーにすることで、エラーを回避することができます。

○HTMLMediaElement.play() was interrupted by a new load request.：再生が中断された

このエラーは、再生中の音声や動画を別の音声や動画に切り替えようとした場合に発生します。

再生中に別の音声や動画をロードすると、再生が中断されてしまいます。

対処法としては、再生中の音声や動画を停止してから、新しい音声や動画をロードするようにします。

// 再生中の音声を停止
audio.pause();
audio.currentTime = 0;

// 新しい音声をロード
audio.src = 'new.mp3';
audio.load();

// 再生を開始
audio.play();

このように、再生中の音声や動画を停止してから、新しい音声や動画をロードすることで、エラーを回避することができます。

○Uncaught (in promise) NotSupportedError：サポートされていないメディア形式

このエラーは、ブラウザがサポートしていない音声や動画の形式を再生しようとした場合に発生します。

すべてのブラウザが、すべての音声や動画の形式をサポートしているわけではありません。

対処法としては、ブラウザがサポートしている形式の音声や動画を使用するようにします。

また、複数の形式の音声や動画を用意しておき、ブラウザに合わせて適切な形式を選択するようにします。

<audio>
  <source src="audio.mp3" type="audio/mp3">
  <source src="audio.ogg" type="audio/ogg">
  お使いのブラウザではサポートされていません。
</audio>

このように、複数の形式の音声や動画を用意しておくことで、エラーを回避することができます。

●durationの応用例

ここまで、durationプロパティの基本的な使い方や、再生位置の取得と設定、再生状態の判定について学んできました。

これらの知識を活用することで、より高度な機能を持ったWebアプリケーションを開発することができます。

それでは、durationプロパティの応用例を見ていきましょう。

ここでは、再生時間に応じて広告を表示する方法と、再生時間に応じてイベントを発火させる方法について、サンプルコードを交えて解説します。

○サンプルコード9：再生時間に応じて広告を表示する

まずは、再生時間に応じて広告を表示する方法です。

例えば、動画の再生時間が30秒を超えたら、広告を表示するといったことができます。

// 動画要素を取得
const video = document.querySelector('video');

// 広告要素を取得
const ad = document.querySelector('#ad');

// 再生時間をチェックする関数
function checkCurrentTime() {
  if (video.currentTime >= 30) {
    // 広告を表示
    ad.style.display = 'block';
    // イベントリスナーを削除
    video.removeEventListener('timeupdate', checkCurrentTime);
  }
}

// 再生時間が更新されたときのイベントリスナーを追加
video.addEventListener('timeupdate', checkCurrentTime);

このコードでは、再生時間が30秒を超えたときに、広告要素のdisplayプロパティをblockに設定して表示しています。

また、一度広告を表示したら、timeupdate イベントのリスナーを削除して、重複して広告が表示されないようにしています。

実行結果は次のようになります。

（動画が30秒を超えると、広告が表示される）

このように、再生時間に応じて広告を表示することで、ユーザーにとって適切なタイミングで広告を見せることができます。

○サンプルコード10：再生時間に応じてイベントを発火させる

次に、再生時間に応じてイベントを発火させる方法を見ていきましょう。

例えば、動画の再生時間が1分を超えたら、何らかの処理を行うといったことができます。

// 動画要素を取得
const video = document.querySelector('video');

// 再生時間をチェックする関数
function checkCurrentTime() {
  if (video.currentTime >= 60) {
    // 何らかの処理を行う
    console.log('再生時間が1分を超えました！');
    // イベントリスナーを削除
    video.removeEventListener('timeupdate', checkCurrentTime);
  }
}

// 再生時間が更新されたときのイベントリスナーを追加
video.addEventListener('timeupdate', checkCurrentTime);

このコードでは、再生時間が1分を超えたときに、コンソールにメッセージを出力しています。

また、一度メッセージを出力したら、timeupdate イベントのリスナーを削除して、重複してメッセージが出力されないようにしています。

実行結果は次のようになります。

再生時間が1分を超えました！

このように、再生時間に応じてイベントを発火させることで、再生時間に応じた様々な処理を行うことができます。

例えば、再生時間に応じてクイズを表示したり、再生時間に応じてポイントを付与したりすることができるでしょう。

まとめ

本記事では、JavaScriptのdurationプロパティの基本的な使い方から応用例まで、実践的なサンプルコードを交えて解説してきました。

durationプロパティを使いこなすことで、音声や動画の再生時間の取得、再生位置の設定、再生状態の判定など、様々な機能を実現できます。

これらの知識を活かして、ぜひ自分なりにdurationプロパティを活用してみてください。

きっと、音声や動画を扱うWebアプリケーションの開発に自信を持てるようになり、ユーザーエクスペリエンスを考慮した高品質なWebアプリケーションを開発できるようになるでしょう。

それでは、JavaScriptのdurationプロパティを使って、素敵なWebアプリケーションを開発してみてくださいね。

応援しています！