jPlayer

今回はサイト上で音楽や動画を再生できる『jPlayer』の設置方法をご紹介します。

ネット上に動画や音楽をアップするには、静止画像よりも複雑に著作権が絡みあってくるので、個人的にはなるべく避けたほうが良いかと思います。
使用許可のあるものを再生したり、ご自身で作詞・作曲・演奏などされる場合は参考にしてみてください。
著作物の無断使用は絶対にやめましょう!

毎度のことですが、この記事を参考になさる場合は、予めこちらの「ご利用規約」も確認してください。

 

Step.1 jPlayerファイルの設置

 

当記事掲載時の最新バーションは2.9.2です。

  • ダウンロードしたファイルを解凍して、/dist/jplayer/フォルダの中にある「jquery.jplayer.min.js」と「jquery.jplayer.swf」ファイルをサイトへアップします。

アップする場所は任意のフォルダでもOK。
こちらのサンプルでは「jplayer」フォルダを作って設置してみました。
コアとして必要なファイルはこのふたつです。

 

Step.2 jQueryとjPlayerコアの読込

 

  • <head>タグの中にjQueryとjPlayerコアファイルの読み込みを記述します。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/jplayer/jquery.min.js"></script>

サンプルでは「Google API」でjQueryを読み込んでいます。
こんな感じで・・・。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
 google.load("jquery", "1");
</script>
<script type="text/javascript" src="jplayer/jquery.jplayer.min.js"></script>

あとは、jQueryとHTML・CSSでオリジナルのプレイヤーを作ることができますが、面倒なので今回はダウンロードしたファイルに入っているスキン「pink.flag」を使ってみたいと思います。

 

Step.3 スキンの指定

 

  • ダウンロードしたファイル/dist/skin/に「blue.monday」と「pink.flag」2種類のスキンフォルダがあるので、使用するほうをサイトへ設置します。

サンプルでは「skin」フォルダごと両方設置しました。

  • 使用するスキンのCSSファイルを指定します。
<link href="skin/pink.flag/css/jplayer.pink.flag.css" rel="stylesheet" type="text/css">

サンプルではこんな感じに・・・。

<link href="skin/pink.flag/css/jplayer.pink.flag.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
 google.load("jquery", "1");
</script>
<script type="text/javascript" src="jplayer/jquery.jplayer.min.js"></script>

 

Step.4 プレイヤーを作る

 

  • <body>タグのプレイヤーを表示させたい場所へ下記のブロック要素を書きます。
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
  • 続いて、プレイヤーの内容(タイムライン・ボリュームやボタンなど)をブロック要素で書きます。

jPlayerサイトのクイックスタートガイドからコピペでOK。

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-controls-holder">
<div class="jp-controls">
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
<div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
</div>
</div>
</div>
<div class="jp-details">
<div class="jp-title" aria-label="title">&nbsp;</div>
</div>
<div class="jp-no-solution"> <span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. </div>
</div>
</div>

 

Step.5 再生する曲を指定

 

  • <head>タグの中に再生する曲や再生方法をjQuery(<script>タグ)で指定します。

下記サンプルコードの12行目「swfPath: “/jplayer”」が「jquery.jplayer.swf」を設置したフォルダの名前と一致してる必要があるので、別のフォルダ名で設置した場合は必ず書き換えます。

<script type="text/javascript">
 $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
   ready: function () {
    $(this).jPlayer("setMedia", {
     title: "Bubble",
     m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
     oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
    });
   },
   cssSelectorAncestor: "#jp_container_1",
   swfPath: "/jplayer",
   supplied: "m4a, oga",
   useStateClassSkin: true,
   autoBlur: false,
   smoothPlayBar: true,
   keyEnabled: true,
   remainingDuration: true,
   toggleDuration: true
  });
 });
</script>

【主な設定内容】
《6行目》プレーヤーに表示する曲名。
《7〜8行目》再生する曲のファイル指定。
※サイトに音源ファイルをアップした場合は相対パスでOK
《12行目》「jquery.jplayer.swf」を設置したフォルダ名。
《13行目》再生する曲のファイル形式。
上記サンプルコード(7〜8行目)では端末(ブラウザ)の違いに対応するため、同じ曲の「m4a」形式と「ogg」形式を指定していますがどちらかひとつでもOK。
ただし、再生する音源ファイルの形式に合わせて「supplied: “m4a, oga”」の指定も変更する必要があります。

再生音源はMP3形式も対応しています。
以下、サンプルページの完成ソースです。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>jPlayer.2.9.2</title>
<link href="skin/pink.flag/css/jplayer.pink.flag.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
 google.load("jquery", "1");
</script>
<script type="text/javascript" src="jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
   ready: function () {
   $(this).jPlayer("setMedia", {
    title: "風",
    mp3: "./m01.mp3"
   });
   },
   cssSelectorAncestor: "#jp_container_1",
   swfPath: "/jplayer",
   supplied: "mp3",
   useStateClassSkin: true,
   autoBlur: false,
   smoothPlayBar: true,
   keyEnabled: true,
   remainingDuration: true,
   toggleDuration: true
  });
 });
</script>
</head>
<body>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-controls-holder">
<div class="jp-controls">
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
<div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
</div>
</div>
</div>
<div class="jp-details">
<div class="jp-title" aria-label="title">&nbsp;</div>
</div>
<div class="jp-no-solution"> <span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. </div>
</div>
</div>
</body>
</html>

自動再生したい場合は、
音源ファイル指定の終了カッコ「});」(上記ソース19行目)のところに「.jPlayer(“play”)」と追記します。
※いきなり音楽が流れ出すと閲覧者が驚く場合もあるのでオススメしません。

   }).jPlayer("play");

現時点でのバージョン(2.9.2)では、初期設定で自動再生しないようになっています。
他のバージョンなどで自動再生されてしまう場合は、上記と同じところに「.jPlayer(“stop”)」を追加すると自動再生されなくなるようです。

   }).jPlayer("stop");

その他、オプション設定や動画再生などもできるので、詳しくは提供元のQuick Start Guideをご覧ください。
(提供元サイトはすべて英文ですが・・・^^;)

【おまけ】
さらにこちらのページでは、リスト表示で曲を切り替えようにしてみました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)