===jQuery:jPlayerのplaylist mp3プレーヤーをカスタマイズしてみる===

注意!!今現在のjPlayerは、Ver.2.0.0がリリースされており、メディアプレーヤーになっています。mp3プレーヤーは、Ver.1.2.0までです。そして
この頁のjPlayerは、Ver.1.1.0です。ブラウザの更新で、オペラVer.10.63、ファイヤーフォックスVer.3.6に更新すると、動かなくなります。IEとサファリは動きます。
Ver.1.2.0とは、仕様が違っていますので、お気をつけください。
Ver.1.2.0のサンプルはこちら(オペラVer.10.63、ファイヤーフォックスVer.3.6でも動きます)
↓Ver.1.10 のsample↓  
歴代オープニング&エンディング・テーマを網羅した主題歌集第2弾。
 BEST OF INUYASHA 清風明月-犬夜叉テーマ全集- 弐
jPlayerとは、一部FLASHを使い、HTMLとCSSで作成されており、
オープンソースはこんな↓感じです。
静止画

●参照サイト・デモサイトは以下↓
[JS]簡単に設置ができるmp3プレイヤーのスクリプト -jPlayer
Demo jPlayer *.*.* : jQuery audio player plugin(常に最新版が表示)

●プレイリスト付きのプレーヤーは他にもたくさんありますが、
この「jPlayer」は、日本語表示が可能なリストプレーヤーです。それを
←こんな風にカスタマイズしてみました。
●上のプラグインサイトの下の方にある、「jPlayer 1.1.0」の( demos ZIP )を
クリックし、ダウンロードして、解凍します。
その中の「demo-02-withDownloadMP3.htm」をカスタマイズします。
そのソースを見てみると、
"http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
も必要なので、ダウンロードしておきます。
フォルダ構造 ↓ オープンソースのフォルダ。    
フォルダ


●最終的にはこんな↓フォルダ構造に。    

ライブラリー

●まず、再生ボタンなどの元になっている
     "jplayer.blue.monnday.jpg"を作り変えます。

ボタン編集ボタン編集

 ←マウスオーバーすると元の大きさの画像になります。
 こちらがデフォルトの部品JPGです。
 "skin/jplayer.blue.monnday.jpg"

ボタン編集ボタン編集
 ←こちらが新しく作った部品です。
 ←マウスオーバーすると元の大きさの画像になります。
 ←クリックすると大きい画像が開きます。
 大きさや座標はそのままですが、各部品を小さくして、
 透明部分を保持したい為、PNGファイルで保存しました。
 ファイル名は、"jplayer.png"です。

●次に、部品を配置する背景を作り、skinフォルダに保存します。
これも透明部分を保持したいので、"jplayer_bg.png"として保存。
(↓クリックすると開きます) 222×63ピクセル
部品ホルダー部品ホルダー



●その他に用意した画像は、以下の8つ。

歌詞カード←歌詞カード用 "kasi.jpg"

ヘッドホン←リスト用 "headphone.gif" GIFファイルです。

ボリューム←リスト用 "volume.gif" アニメーションGIFファイルです。

リスト背景←リスト背景用 "volumebg.gif" 上に同じ。

背景用背景用


 ↑マウスオーバーすると元の大きさの画像になります。
 ボックス背景用の画像。"bgup.png"

背景用背景用

 ↑マウスオーバーすると元の大きさの画像になります。
 ボックス背景用の画像。"bgcenter.png"

背景用背景用

 ↑マウスオーバーすると元の大きさの画像になります。
 ボックス背景用の画像。"bgbottom.png"

上の7つは、skinフォルダに保存します。

ジャケットジャケット

 ←マウスオーバーすると元の大きさの画像になります。
 ジャケット用の画像。"AVCA-29654.jpg"
 このファイルは、CDフォルダに保存します。



●mp3.ファイルや、歌詞カードのhtml.ファイルも用意します。

各mp3.ファイルは、約1秒の無音になってます。CDフォルダに保存。
(音がならない!とビックリしないでください。笑)

各html.ファイルは、サイト"うたまっぷ.com"にリンク。
このサイトは、印刷はダメですが、リンクはいいみたいです。
subフォルダに保存。

●触らないフォルダは、「js」フォルダと「libs」フォルダのみ。

●表示用html.や、カスケーディングスタイルシートのカスタマイズをします。表示用html.は「song.html」と命名してパブリックフォルダ(一番上のフォルダ)に保存。
カスケーディングスタイルシートは「jplayer.css」と命名してskinフォルダに保存。

●mp3ファイルは、次々に連続再生され、永遠にループします。 もし、ディスク名や次のジャケット名で止めておきたい時は、ないファイルにリンクさせておくと良いかも。
例えば、"CD/00.mp3"としておくと「早送りボタン」を押すまで止まります。
私は連続再生させたい派なので、デフォルトのスクリプト部分は触りませんが、もし、全ての曲が、クリックしないと再生しない様にしたい時は、スクリプトを触る?のかな?
例えば、「$("#jquery_jplayer").jPlayer("play");」部分を「$("#jquery_jplayer").jPlayer("stop");」に変更?。試してませんし、動くかは保証しません。

●表示用html.のカスタマイズ(Ver.1.1.0 です)    Ver.1.2.0のサンプルはコチラ  
"demo-02-withDownloadMP3.htm"を"song.html"として保存。

song.html  (以下はソースです。) リストの数に制限がなく、何曲でも登録が可能。
{name:"プレイリストの表示文字。日本語可能。タグ可能 ",mp3:".mp3ファイルへのパス",ogg:".oggファイルへのパス"},
ただし、一番最後の曲は、「, (カンマ)」をつけない事。{name:"○○○ ",mp3:"○○○",ogg:○○""}
------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">//変更箇所 "en"から"ja"へ※日本語可能にする為
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />//変更箇所 "iso-8859-1"から"utf-8"へ※日本語可能にする為
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>inuyasha-vod.com | 『犬夜叉』配信ナビ</title>
<link href="skin/jplayer.css" rel="stylesheet" type="text/css" />//ファイル名が変わった。
<script type="text/javascript" src="libs/jquery/1.4/jquery.min.js"></script>//変更箇所 参照フォルダの場所の変更
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script>
$(document).ready(function(){
var playItem = 0;
var myPlayList = [//表示リストの入力部分 ここから
{name:"<span class='darkgreen2'>DISC:1<b> 犬夜叉ベストソングヒストリー</b></span>",mp3:"00.mp3",ogg:""},
{name:"01. ♬ <a href='sub/kasi01.html' target='_blank' title='歌詞'><img src='skin/kasi.jpg' alt='歌詞' align='absmiddle' border='0'></a>",mp3:"cd/01.mp3",ogg:""},
{name:"02. ♬ ",mp3:"cd/02.mp3",ogg:""},
{name:"03. ♬ <a href='sub/kasi02.html' target='_blank' title='歌詞'><img src='skin/kasi.jpg' alt='歌詞' align='absmiddle' border='0'></a>",mp3:"cd/03.mp3",ogg:""},
{name:"04. ♬ ",mp3:"cd/04.mp3",ogg:""},
{name:"05. ♬ <a href='sub/kasi03.html' target='_blank' title='歌詞'><img src='skin/kasi.jpg' alt='歌詞' align='absmiddle' border='0'></a>",mp3:"cd/05.mp3",ogg:""},
{name:"06. ♬ ",mp3:"cd/01.mp3",ogg:""},
{name:"07. ♬ <a href='sub/kasi04.html' target='_blank' title='歌詞'><img src='skin/kasi.jpg' alt='歌詞' align='absmiddle' border='0'></a>",mp3:"cd/02.mp3",ogg:""},
{name:"08. ♬ ",mp3:"cd/03.mp3",ogg:""},
{name:"09. ♬ <a href='sub/kasi05.html' target='_blank' title='歌詞'><img src='skin/kasi.jpg' alt='歌詞' align='absmiddle' border='0'></a>",mp3:"cd/04.mp3",ogg:""},
{name:"10. ♬ ",mp3:"cd/05.mp3",ogg:""},
{name:"<span class='darkgreen2'>DISC:2<b> BEST OF INUYASHA 百花繚乱 -犬夜叉テーマ全集-  </b></span><br><div id='imgHover'><a href='#'><img class='thumbnail' src='cd/AVCA-29654.jpg' alt='AVCA-14723' height='77' width='77'border='0' align='left'><img class='mainImage' src='cd/AVCA-29654.jpg' alt='AVCA-14723'></a></div><br>TVアニメ108話までの オープニング&エンディングを網羅した主題歌集。<br>  AVCA-14723(avex mode)<br>  2003/03/26発売<br>",mp3:"00.mp3",ogg:""},
{name:"01.オープニング : MC 山口勝平、雪野五月、渡辺久美子 ♬ 3:56 ",mp3:"cd/01.mp3",ogg:""},
//↑本来は折り返さない
{name:"02.ゲスト : Do As Infinity 「君がいない未来」 ♬ 20:08 ",mp3:"cd/02.mp3",ogg:""},
{name:"03.裏話No.1 : 成田剣、チョー、能登真美子、他 ♬ 26:09 ",mp3:"cd/03.mp3",ogg:""},
{name:"04.もうひとつの完結編 ♬ 10:00 ",mp3:"cd/04.mp3",ogg:""},
{name:"05.完結編の予告編 ♬ 2:49 ",mp3:"cd/05.mp3",ogg:""},
{name:"06.エンディング : 声優コメント ♬ 6:49 ",mp3:"cd/01.mp3",ogg:""}
//表示リストの入力部分 ここまで
];
var jpPlayTime = $("#jplayer_play_time");
var jpTotalTime = $("#jplayer_total_time");
$("#jquery_jplayer").jPlayer({
ready: function() {
displayPlayList();
playListInit(true); // Parameter is a boolean for autoplay.
},
oggSupport: true
})
.jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
jpPlayTime.text($.jPlayer.convertTime(playedTime));
jpTotalTime.text($.jPlayer.convertTime(totalTime));
})
.jPlayer("onSoundComplete", function() {
playListNext();
});
$("#jplayer_previous").click( function() {
playListPrev();
return false;
});
$("#jplayer_next").click( function() {
playListNext();
return false;
});
function displayPlayList() {
for (i=0; i < myPlayList.length; i++) {
$("#jplayer_playlist ul").append("<li id='jplayer_playlist_item_"+i+"'>"+ myPlayList[i].name +"</li>");
$("#jplayer_playlist_item_"+i).data( "index", i ).click( function() {
var index = $(this).data("index");
if (playItem != index) {
playListChange( index );
} else {
$("#jquery_jplayer").jPlayer("play");
}
});
}
}
function playListInit(autoplay) {
if(autoplay) {
playListChange( playItem );
} else {
playListConfig( playItem );
}
}
function playListConfig( index ) {
$("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current");
$("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current");
playItem = index;
$("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3, myPlayList[playItem].ogg);
}
function playListChange( index ) {
playListConfig( index );
$("#jquery_jplayer").jPlayer("play");
}
function playListNext() {
var index = (playItem+1 < myPlayList.length) ? playItem+1 : 0;
playListChange( index );
}
function playListPrev() {
var index = (playItem-1 >= 0) ? playItem-1 : myPlayList.length-1;
playListChange( index );
}
});
</script>
</head>

<body bgcolor="white" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<table border="0" cellspacing="0" cellpadding="10" align="center" bgcolor="white">//テーブルにしてセンターにフロー
<tr>
<td>

<div class="album">//追加箇所 ここから //↓アルバムの題名
<div class="darkgreen">歴代オープニング&エンディング・テーマを網羅した主題歌集第2弾。<br><b> BEST OF INUYASHA 清風明月-犬夜叉テーマ全集- 弐</b></div>
<div class="player">
//追加箇所 ここまで
<div id="jquery_jplayer"></div>
<div class="jp-playlist-player">
<div class="jp-index"><!-- /#imgHover -->//追加箇所 ここから
<div id="imgHover"><a href="#"><img class="thumbnail" src="cd/AVCA-29654.jpg" alt="AVCA-29654" height="77" width="77" border="0" align="left"/><img class="mainImage" src="cd/AVCA-29654.jpg" alt="AVCA-29654"></a>
</div><br><br>  AVCA-29654(avex mode)<br><br>  2010/03/24発売
</div>
//追加箇所 ここまで ↑本来は折り返さない。<a href="#">部分にリンクを貼って別サイトを紹介する事も可能。
<div class="jp-interface">
<ul class="jp-controls">
<li id="jplayer_play" class="jp-play">play</li>
<li id="jplayer_pause" class="jp-pause">pause</li>
<li id="jplayer_stop" class="jp-stop">stop</li>
<li id="jplayer_volume_min" class="jp-volume-min">min volume</li>
<li id="jplayer_volume_max" class="jp-volume-max">max volume</li>
<li id="jplayer_previous" class="jp-previous">previous</li>
<li id="jplayer_next" class="jp-next">next</li>
</ul>
<div class="jp-progress">
<div id="jplayer_load_bar" class="jp-load-bar">
<div id="jplayer_play_bar" class="jp-play-bar"></div>
</div>
</div>
<div id="jplayer_volume_bar" class="jp-volume-bar">
<div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div>
</div>
<div id="jplayer_play_time" class="jp-play-time"></div>
<div id="jplayer_total_time" class="jp-total-time"></div>
</div>
<div id="jplayer_playlist" class="jp-playlist">
<ul>
<!-- The function displayPlayList() uses this unordered list -->
</ul>
</div>
</div>
</div>
<div class="footer"></div>
</div>
//追加箇所
</td>
</tr>
</table>

</body>
</html>




●カスケーディングスタイルシートのカスタマイズ(Ver.1.1.0 です)   Ver.1.2.0用のカスタマイズ.cssはコチラ

jplayer.css (以下はソースです。) playlist-playerのみにし、single-playerは全て削除しました。
赤字緑字変更箇所黄色背景追加箇所です。"jplayer.blue.monnday.css"を"jplayer.css"としてskinフォルダに保存。
------------------------------------------------------------------------------------------------------------------------------------------------------------------

td {
color: #000;
font-size: 9pt;
line-height:14pt;
}
.album {
position: relative;
width: 595px;
}
.darkgreen {
/*大きい文字でジャケット名を表示する。*/
font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
background: url("bgup.png") no-repeat;
text-align: center;
color: #663;
font-size: 11pt;
line-height: 18pt;
}
.footer {
position: absolute;
width: 595px;
height: 20px;
background : url("bgbottom.png") no-repeat;
}
#imgHover {
/*ジャケット画像にマウスオーバーすると、大きい画像でホバーする。*/
float: left;
margin-right: 5px;
}
#imgHover img {
border: none;
z-index: 2;
}
#imgHover a {
display: block;
}
#imgHover a:hover {
position: relative;
}
#imgHover a .mainImage {
display: none;
}
#imgHover a:hover .mainImage {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.darkgreen2 {
/*大きい文字で題名などを表示する。*/
background-color: #ddd;
font-size: 11pt;
font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
color: #663;
line-height: 16pt;
}
div.player {
background: url("bgcenter.png") repeat-y;
text-align : left;
position: relative;
margin: 0;
padding: 0px 10px;
}
div.jp-index {
/*ジャケット画像やジャケット内容を表示するブロックを作る。*/
top: -15px;
left: 20px;
position: absolute;
width: 300px;
height: 80px;
border: none;
color: #666;
font-size: 1em;
font-family: "HG丸ゴシックM-PRO", "MS Pゴシック", "Osaka";
line-height: 1.0;
}

/*↑ここまで追加部分*/
div.jp-playlist-player {
color: #666;
font-size: 1em;
font-family: "HG丸ゴシックM-PRO", "MS Pゴシック", "Osaka";/*フォント変更。元はVerdana, Arial, sans-serif*/
line-height: 1.6;
}
div.jp-interface {
top: 0px;
left: 340px;

background: url("jplayer_bg.png") no-repeat;/*色から画像に変更。元はbackground-color: #eee*/
position: relative;
width: 222px;
height: 88px;
border: 4px solid transparent;/*色と太さを変更。元はborder:1px solid #009be3*/
}
div.jp-interface ul.jp-controls {
list-style-type: none;
padding: 0;
margin: 0;
}
div.jp-interface ul.jp-controls li {
overflow: hidden;
text-indent: -9999px;
}
li.jp-play,
li.jp-pause {
display: block;
position: absolute;
top: 10px;
width: 26px;
height: 26px;
cursor: pointer;
}
div.jp-playlist-player li.jp-play,
div.jp-playlist-player li.jp-pause {
left: 35px;
}
li.jp-play {
background: url("jplayer.png") 0 0 no-repeat;
}
li.jp-play:hover {
background: url("jplayer.png") -41px 0 no-repeat;
}
li.jp-pause {
background: url("jplayer.png") 0 -42px no-repeat;
}
li.jp-pause:hover {
background: url("jplayer.png") -41px -42px no-repeat;
}
li.jp-stop {
position: absolute;
top: 12px;
background: url("jplayer.png") 0 -83px no-repeat;
width: 22px;
height: 22px;
cursor: pointer;
}
div.jp-playlist-player li.jp-stop {
left: 62px;
}
li.jp-stop:hover {
background: url("jplayer.png") -29px -83px no-repeat;
}
li.jp-previous {
position: absolute;
left: 10px;
top: 12px;
background: url("jplayer.png") 0 -112px no-repeat;
width: 22px;
height: 22px;
cursor: pointer;
}
li.jp-previous:hover {
background: url("jplayer.png") -29px -112px no-repeat;
}
li.jp-next {
position: absolute;
left: 88px;
top: 12px;
background: url("jplayer.png") 0 -141px no-repeat;
width: 22px;
height: 22px;
cursor: pointer;
}
li.jp-next:hover {
background: url("jplayer.png") -29px -141px no-repeat;
}
div.jp-progress {
position: absolute;
overflow: hidden;
top: 40px;
background-color: #ddd;
width: 175px;
height: 6px;
}
div.jp-playlist-player div.jp-progress {
left: 20px;
}
div.jp-load-bar {
background: url("jplayer.png") 0 -202px repeat-x;
width: 0px;
height: 15px;
cursor: pointer;
}
div.jp-play-bar {
background: url("jplayer.png") 0 -218px repeat-x;
width: 0px;
height: 15px;
}
li.jp-volume-min {
position: absolute;
top: 17px;
background: url("jplayer.png") 0 -170px no-repeat;
width: 14px;
height: 10px;
cursor: pointer;
}
div.jp-playlist-player li.jp-volume-min {
left: 120px;
}
li.jp-volume-min:hover {
background: url("jplayer.png") -19px -170px no-repeat;
}
li.jp-volume-max {
position: absolute;
top: 16px;
background: url("jplayer.png") 0 -186px no-repeat;
width: 16px;
height: 12px;
cursor: pointer;
}
div.jp-playlist-player li.jp-volume-max {
left: 190px;
}
li.jp-volume-max:hover {
background: url("jplayer.png") -19px -186px no-repeat;
}
div.jp-volume-bar {
position: absolute;
overflow: hidden;
top: 20px;
background: url("jplayer.png") 0 -250px repeat-x;
width: 56px;
height: 4px;
cursor: pointer;
}
div.jp-playlist-player div.jp-volume-bar {
left: 130px;
}
div.jp-volume-bar-value {
background: url("jplayer.png") 0 -256px repeat-x;
width: 0px;
height: 4px;
}
div.jp-play-time,
div.jp-total-time {
position: absolute;
top: 46px;
width: 200px;
font-size: 0.85em;
font-style: oblique;
}
div.jp-total-time {
text-align: right;
}
div.jp-playlist-player div.jp-play-time,
div.jp-playlist-player div.jp-total-time {
left: 10px;
}
div.jp-playlist {
width: 575px;
}
div.jp-playlist ul {
list-style-image: url("headphone.gif");/*リストスタイルに画像を使う。元はlist-style-type: none*/
list-style-position: inside;
margin: 0px 0px 0px 0px;
background-color: #f7f7f7;
border: 4px solid transparent;/*色と太さを変更。元はborder:1px solid #009be3*/
border-top: none;
width: 542px;
font-size: 1em;
}
div.jp-playlist-player div.jp-playlist ul {
padding: 10px 10px 10px 10px;
}
div.jp-playlist-player div.jp-playlist li {
padding: 2px 0px 0px 0px;
border-bottom: 1px solid #eee;
cursor: pointer;
}
div.jp-playlist-player div.jp-playlist li.jplayer_playlist_current {/*再生中の曲*/
position: absolute;/*再生中の曲をプレーヤーのすぐ下に表示する*/
top: 70px;
left: 26px;
width: 538px;
background: url("volumebg.gif") repeat-x;
/*一行のみ背景画像を使う*/
background-color: #ddd;/*二行目からは色を背景に使う*/
color: #0d88c1;
list-style-image: url("volume.gif");/*リストスタイルに画像を使う。元はlist-style-type: square; */
list-style-position: inside;
padding-left: 0px;
cursor: default;
}
div.jp-playlist-player div.jp-playlist li:hover {
color: #eb6100;
}



●CSSのカスタマイズ 2   例えば下記のようにすると更にカスタマイズできます。(Ver.1.1.0 です)  Ver.1.2.0用のカスタマイズ.cssはコチラ


div.jp-playlist {
width: 575px;
}

------------------------------------------------------------------------------------------------------------------------------------------------------------------
上の部分に、下記のように追加したとします。
------------------------------------------------------------------------------------------------------------------------------------------------------------------


div.jp-playlist {
width: 575px;
height: 200px;/*リストの数に関係なくプレーヤーの高さを固定する*/
overflow-y: auto;/*プレーヤーの高さを越えるリスト数があった場合に縦スクロールバーを出現*/
overflow-x: hidden;/*横スクロールバーは出現させない*/

scrollbar-3dlight-color: #999; /*以下、スクロールバーの色の設定。※インターネットエクスプローラでしか表現できません。FirefoxやSafariでは×*/
scrollbar-arrow-color: #333;
scrollbar-darkshadow-color: #ddd;
scrollbar-face-color: #eee;
scrollbar-highlight-color: #ddd;
scrollbar-shadow-color: #666;
scrollbar-track-color: #ddd;

}

------------------------------------------------------------------------------------------------------------------------------------------------------------------
 jPlayer/Ver.1.2.0の.htmlサンプルはコチラ

              ●以上、わかりやすい様に見慣れた漢字&ひらがなを使ってみましたが、本来、音源本体や画像には、「著作権」というものがあります。
               紹介だからと、間違っても、WEBにアップしないように。著作権違反をしないよう、お気をつけください。

              ●参照サイト・デモサイトは以下↓
               ・Download jPlayer : the CSS styleable jQuery media player plugin(常に最新版が表示。下のほうに旧バージョンへのリンクがある。)
               ・Developer Guide jPlayer 1.1.0 : jQuery media player plugin(Ver.1.1.0用ガイド。対応ブラウザやサーバーの応答、.mp3のビットレートなどが記載されている。)
               ・Developer Guide jPlayer 1.2.0 : jQuery media player plugin(こちらはVer.1.2.0用ガイド。)
                自分のWEBサーバーにアップする場合、お使いのサーバーの仕様も確認する必要がある?!ビットレートが対応してないと再生できない?!
                ローカルではいいのに、サーバーにアップすると動かない原因はこのあたりにあるのかも。

              ●プレイヤーを使いまわししたい場合などは↓
               ・[JS]簡単に設置ができるmp3プレイヤーのスクリプト -jPlayer
                のサイトを参考にしてください。表示用.html がスマートになります。
                また、jsを外部にして呼び込むようにすれば、更にカスタマイズできると思います。

              ●今現在、jPlayerは、Ver2.0.0になってリリースされており、メディアプレーヤーになっています。mp3プレーヤーは、Ver.1.2.0までです。
               FLASHのアクションスクリプトはVer.3になり、ジャバスクリプト、CSS、SWFプレーヤー、HTML全てが変更されています。
               これは、ブラウザの、オペラVer.10.63、ファイヤーフォックスVer.3.6の更新にともなうものと思われます。(Ver.1.1.0 では動かない)
               コチラのサンプルも jPlayer/Ver.1.2.0用に変更しカスタマイズしましたが、今後もこんな変更があるかもしれません。
               動かないのでは仕方ないですが、その度のカスタマイズは、ちょっとつらいですね。


FLASH関連リンク