[JS]旧ブラウザにも対応、簡単な記述でMP3ファイルプレーヤーを設置できるスクリプト -Audio5js

mp3, mp4, vorbis などのオーディオファイルを再生するプレーヤーを簡単な記述で設置できる単体のスクリプトを紹介します。

Audio5js

• Audio5jsのデモ
• Audio5jsの使い方

Audio5jsのデモ

デモでは、PlayとPauseボタンを備えたプレーヤーでMP3ファイルを再生できます。

Audio5jsのデモ

再生はHTML5でしており、非対応ブラウザではFlashプレーヤーで再生します。

Audio5jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="/js/audio5.js"></script>

Step 2: Flashプレーヤーの設置

HTML5非対応ブラウザ用にFlashプレーヤーを設置します。ファイルの設置場所は下記の通りです。

  /
  -/public
  --/js
  --- audio5.js
  --/swf
  --- audio5js.swf

デフォルトで「/swf/audio5js.swf」を探します。

Step 3: HTML

再生はボタン要素だけです。

<button type="button" id="play" class="button round">Load Audio</button>

Step 4: JavaScript

スクリプトで再生するMP3ファイルを指定します。

  
    function initAudio () {
      var audio5js = new Audio5js({
        ready: function () {
          this.load('/someaudio.mp3');
          this.play();
        }
      });
    }
    initAudio();
  

オーディオの操作

再生・一時停止の他にも下記の操作ができます。

load

オーディオファイルのロード

play

オーディオファイルの再生

pause

一時停止

playPause

再生と一時停止の切り替え

volume

ボリューム

seek

再生時間

各機能は下記のように実装します。

  <a id="play">Play / Pause</a>
  <a id="seek">Move to Start</a>
  
    var play = document.getElementById('play');
    var seek = document.getElementById('seek');

    var playPause = function () {
      this[this.playing ? 'pause' : 'play']();
      // or simply call this.playPause();
    }

    var moveToStart = function () {
      this.seek(0);
      this.volume(1);
    }

    var audio5js = new Audio5js({
      ready: function () {
        this.load('/audio/song.mp3');
        play.addEventListener('click',
          playPause.bind(this));
        seek.addEventListener('click',
          moveToStart.bind(this));
      }
    });