JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでマルチメディアファイルを再生する方法｜基本のAPIとサンプルコード解説

JavaScriptを使えば、ブラウザ上で音声・動画などのマルチメディアファイルを自在に制御できます。HTML5の <audio> 要素や <video> 要素と組み合わせることで、再生・一時停止・音量調整といった操作をすべてスクリプトから行えるのです。

音声・動画を再生する基本の書き方

最もシンプルな方法は、メディア要素を取得して play() メソッドを呼び出すことです。以下のように、ボタンのクリックイベントと組み合わせるだけで簡単なプレーヤーが作れます。

<audio id="myAudio" src="sample.mp3"></audio>

<button onclick="document.getElementById('myAudio').play()">再生</button>
<button onclick="document.getElementById('myAudio').pause()">一時停止</button>

動画の場合も同様に、<video> 要素に対して同じメソッドを使用します。controls 属性を付ければ、ユーザーが標準のコントロールバーで直接操作することも可能です。

サンプルコード：クリックで画像を右へ動かす

続いて、DOM操作の基礎が学べる定番サンプルとして、「ボタンをクリックすると画像が少しずつ右へ移動する」処理を紹介します。このテクニックは、オリジナルのメディアプレーヤーUIを作る際などにも応用できます。

<html>
  <head>
    <title>JavaScript Animation</title>
    <script>
      var imgObj = null;
      function init(){
        imgObj = document.getElementById('myImage');
        imgObj.style.position = 'relative';
        imgObj.style.left = '0px';
      }
      function moveRight(){
        imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
      }
      window.onload = init;
    </script>
  </head>
  <body>
    <form>
      <img id="myImage" src="/images/html.gif" />
      <p>下のボタンをクリックすると、画像が右へ移動します</p>
      <input type="button" value="クリック" onclick="moveRight();" />
    </form>
  </body>
</html>

コードのポイント解説

  • init() 関数：ページ読み込み時に画像要素を取得し、position を relative に、left を 0px に初期化します。
  • moveRight() 関数：現在の left の値を parseInt() で数値化し、10px ずつ加算することで、クリックのたびに画像を段階的に右へ移動させます。
  • window.onload = init;：ページの読み込みが完了したタイミングで init() が自動的に実行されるよう設定しています。

まとめ

JavaScriptでのマルチメディア再生は、play() / pause() といった直感的なAPIを使えば非常に簡単に実装できます。さらに、今回のようなDOM操作を組み合わせれば、再生位置に合わせて画像や字幕を動かすなど、表現力豊かなWebコンテンツを作ることも可能です。まずは小さなサンプルから実際に手を動かして試してみてください。

  1. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="

  2. 【サンプルコード付き】JavaScriptファイルを動的に読み込む方法を解説

    JavaScriptファイルを動的に読み込むことで、ページの初期表示を高速化したり、必要なタイミングで必要なスクリプトだけを取得したりできます。ここでは、ボタンをクリックしたときに外部のJavaScriptファイルを読み込むサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <tit