X
pm studio world wide news pj club
pm studio world wide news pj club
news, tech, music, film, sports, cg, translation, photo uploader
  • 2015-11-30
  • PJ Club
  • HTML5オーディオ・プレイヤー用、jQueryプラグイン「PM Player」
  • PJ Clubは、PHPやJavaScriptを使ったプログラムのサンプルを紹介します。
    第1回目は、pm studioが制作したjQueryのプラグイン「PM Player」です。
    かつて、サウンドファイル、ビデオファイルを再生・表示するには、Flashがよく使われていましたが、HTML5の登場で、HTMLタグだけで簡単に表示できるようになりました。また、HTML5のVideo TagはJavaScriptで再生、停止、巻き戻し等を制御できます。それと、プレイヤーに付き物のスライダーですが、<input id="test" type="range"/>として標準で提供されており、とても便利です。
    ただ、表示されるプレイヤーデザインが各ブラウザーで違うのが難点ですね。
    プレイヤーデザインを気にしないのであれば、面倒なScriptも必要ありません。
    しかし、Web制作をやっていると、やはり、プレイヤーはデザンインを統一したいところです。
    プレイヤーデザインを統一するには、CSSでvideo tagをラップすることで可能です。
    サンプルのPM Playerをご覧頂くとわかり易いと思います。
    下記が「PM Player」のサンプルです。


    デザインはCSSでラップし、制御はJavaScriptで行っています。
    毎回、制御のためにJavaScriptを記述するのも面倒なので、jQueryのプラグインにしました。
    使用方法は簡単です。下記から「PM Player」一式をダウンロードします。

    PM Playerをダウンロードする。

    jQueryのプラグインですから、jQueryは必須です。
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    ダウンロードしたファイルから「pmplayer.js」と「pmplayer.css」を読み込みます。
    <link rel="stylesheet" href="pmplayer.css" />
    <script src="pmplayer.js" type="text/javascript"></script>
    この後、HTMLと簡単なJavaScriptを記述します。

    表示方法は2つです。
    1つ目は、JavaScriptで各パラメーターを設定する方法です。
    まず、HTMLl内にvideo tagを表示させるためのdiv tagを記述します。

    <div id="pmPlayer"></div>

    下記のJavaScriptをhead tag内に記述します。

    $(document).ready(function() {
         $("#pmPlayer").playerPM({
              song : "曲名",
              artist : "アーティスト名",
              soundurl : "MP3データのURL",
              posterurl : "MP3用画像のURL",
              playerid : "player1",
              skinid : "pmPlayer"
         });
    });

    サンプルはここをクリック

    2つ目は、HTMLのdiv tag内にパラメータ−を設定する方法です。
    下記のようにdiv tagを記述します。

    <div id="pmPlayer" song="曲名" artist="アーティスト名" playerid="player1" soundurl="MP3のURL" posterurl="MP3用画像のURL"></div>

    下記のJavaScriptをhead tag内に記述します。

    $(document).ready(function() {
         playerPM();
    });

    サンプルはここをクリック

    以上で、MP3のPM Playerが表示されます。
    多分、2つ目の方が分かりやすいと思います。
  • 2つ以上のPM Playerを使用するには

    それでは、2つ以上のPM Playerを使用する時ですが、JavaScriptでパラメータ設定する場合、まず、div tagのidに連番の番号を追加します。(数字は半角、スペースは入れないでください)
    <div id="pmPlayer1"></div>
    <div id="pmPlayer2"></div>

    続いてJavaScriptを下記のように記述します。基本、skinidとdiv tagのidは同じです。video tagのidも連番の数字を追加します。

    $(document).ready(function() {
         $("#pmPlayer1").playerPM({
              song : "曲名",
              artist : "アーティスト名",
              soundurl : "MP3データのURL",
              posterurl : "MP3用画像のURL",
              playerid : "player1",
              skinid : "pmPlayer1"
         });

         $("#pmPlayer2").playerPM({
              song : "曲名",
              artist : "アーティスト名",
              soundurl : "MP3データのURL",
              posterurl : "MP3用画像のURL",
              playerid : "player2",
              skinid : "pmPlayer2"
         });
    });

    もう一つの方法でも同様で、表示させるdiv tagのid、playeridに連番の番号を追加します。

    <div id="pmPlayer1" song="曲名" artist="アーティスト名" playerid="player1" soundurl="MP3のURL" posterurl="MP3用画像のURL"></div>
    <div id="pmPlayer2" song="曲名" artist="アーティスト名" playerid="player2" soundurl="MP3のURL" posterurl="MP3用画像のURL"></div>

    JavaScriptの関数に表示させるPM Playerの数値を記述します。今回の例ですと2個ですから2です。

    $(document).ready(function() {
         playerPM(2);
    });

    サンプルはここをクリック

    これで、複数のPM Playerが表示されます。いかがでしょうか。PM Playerはいたってシンプルです。
    ダウンロードファイルに見本のHTMLがありますので、そちらをお試しください。
  • source : pm studio world wide news
Recent Post
Latest News
Billboard Hot 100
Top 10
  • No.1
    In My Feelings
    Drake
  • No.2
    I Like It
    Cardi B, Bad Bunny & J Balvin
  • No.3
    Girls Like You
    Maroon 5 & Cardi B
  • No.4
    Nice For What
    Drake
  • No.5
    Boo'd Up
    Ella Mai
  • No.6
    God's Plan
    Drake
  • No.7
    Lucid Dreams
    Juice WRLD
  • No.8
    Don't Matter To Me
    Drake & Michael Jackson
  • No.9
    Psycho
    Post Malone & Ty Dolla $ign
  • No.10
    The Middle
    Zedd, Maren Morris & Grey
BBC Radio 1 Singles 40
Top 10
  • Don't Matter To Me (feat. Michael Jackson)
  • No.5
    "Don't Matter To Me (feat. Michael Jackson)"
    Drake
  • Editor: Toshio Maeoka / pm studio
    pm studio world wide news © 2014-2018 . All Rights Reserved
^
to TOP