yas.muトップ > XSPF Web Music Player(xspf_player)で日本語を表示

XSPF Web Music Player(xspf_player)で日本語を表示+α
(yas.mu版xspf_player)

2011-07-27初版
2011-09-26応用サイトとその他の追加機能についての記述
2011-10-20デバイスフォントのマスクに関する記述を追加
2012-08-2「4. yas.mu版xspf_playerの使い方」を追加

h@yas.mu (Yas)
本ドキュメントはリンクフリー・無保証です。 内容についての間違いのご指摘やサジェッションは h@yas.mu まで。
XSPF Web Music Player (xspf_player)はflashベースのmp3プレイヤーです. このページでは,xspf_playerで日本語を表示できるようにする修正ほか 何点かの変更を加えたyas.mu版xspf_playerについて説明しています.

1. XSPF Web Music Player (xspf_player)について

XSPF Web Music Player (xspf_player)はその配布物に含まれるlicense.txtによると 2005年頃にFabricio Zuardiによって開発されたもののようです. XMLベースのXSPF形式で 記述されたプレイリストにより連続再生できるmp3プレイヤーです. ActionScript2で書かれています. 配布サイトからダウンロードして利用することができます. スリムでシンプルなデザインのMusic Player Slim, プレイリスト一覧と画像も表示できる Music Player Extended, ボタンだけのとてもシンプルなMusic Player Buttonがあります. オリジナルの配布物では前2者の曲名表示で日本語が使えません.
そこで日本語を表示出るようにしたほか, 自分のサイトで利用しやすいように何点か変更を加えました. 以下これを「yas.mu版xspf_player」と呼ぶことにします.

2. yas.mu版xspf_playerのデモと変更内容

日本語を表示できる yas.mu版Music Player Extended
日本語を表示できる yas.mu版Music Player Slim

(演奏: Yas)

yas.mu版xspf_playerは日本語表示出来るようにした他いくつか手が入っています.
  1. 時間表示(00:00/00:00)
  2. ダウンロードバー,プログレスバーの表示とクリックによる途中移動
  3. 演奏中の曲を常におもてとするプレイリスト(上下窓から外れません)
  4. 連続したタイトルスクロール(末尾と先頭が接続しています)
  5. ボリュームの特性をカーブA的に(真ん中で24%程度)
  6. BGM的再生機能(BGMモード: <SEQ></SEQ>を使った連続再生) 具体例http://papalin.yas.mu/bgm/参照.
BGM的再生機能について:
yas.mu版独自の機能です. 次々とプレイリストを更新することにより,終わりなく曲の再生を続けることができます. 曲の順序番号をプレイリスト中ので指定します. 再生開始時にはで指定した順序番号から再生を始めます. 曲の再生時間とタイミングを取りながら,プレイリストを次々と更新していきます. そうすることで,永遠にプレイリストの曲を再生し続けるのがBGM的再生機能です.

3. ActionScriptファイルの書き換え内容

元の配布物のうち,ActionScriptファイルを書き換えました. なお,yas,mu版のswfファイルをそのまま使用する場合は,この章は読み飛ばして結構です. 書き換え内容は概要のみを紹介します.元ファイルとの差分が必要な方はお問い合わせください.
xspf_playerはActionScript2.0で書かれています. ここでは,シンプルなMusic Player Slimを例にとって説明します. 日本語のフォントを埋め込むと表示が確実ですが,swfファイルのサイズが 1.4MB程度にもなってしまい,実用的ではありません. そこで,フォントを埋め込まずにデバイスフォントを利用することにします.
track_display_mc.display_txt.embedFonts = false;
tf_fmt = new TextFormat();
tf_fmt.font = "_ゴシック";
tf_fmt.size = 11;
tf_fmt.color = 0x0000ff;
track_display_mc.display_txt.setNewTextFormat(tf_fmt);
図1. mainの冒頭部分に追加する内容

track_display_mc.display_txt.embedFonts = false; で 埋め込みフォントを使わない指定をします.

なお,CS5.5のAdobe Flash Proでswf生成時, プロパティのパブリッシュが Flash Player 10&10.1以上でないと日本語が表示されないようです. デフォルトではFlash Player 7になっていますが,このままswfを生成すると まったく何も文字が表示されません. このことに気付かずに悩みました.

その後,この問題の本質が 『デバイスフォントのマスクがうまくいかない』 というところにあることにに気付きました. なぜか,Flash Player10.xでは上記の方法で表示できますが, Flash Player 11で表示されなくなったことから気付きました. 正しくは,.flaのマスク(mask_mc)について,「マスク」属性を外し, ActionScript側で setMask()を使ってマスクを設定することで解決できました.
参考: デバイスフォントのマスク

4. yas.mu版xspf_playerの使い方

(1) swfファイルとHTML埋め込みコード

swfファイルを右クリックで保存. 注意:これらのswfファイルの利用については無保証です.
<object type="application/x-shockwave-flash" width="400" height="170"
data="xspf_player_jp.swf?playlist_url=sample.xspf&autoload=true">
<param name="movie" 
value="xspf_player_jp.swf?playlist_url=sample.xspf&autoload=true" />
</object>
図2. xspf_player_jp.swfのHTML埋め込みコード

<object type="application/x-shockwave-flash" width="400" height="17"
data="xspf_player_slim_jp.swf?playlist_url=sample.xspf&autoload=true">
<param name="movie" 
value="xspf_player_slim_jp.swf?playlist_url=sample.xspf&autoload=true" />
</object>
図3. xspf_player_slim_jp.swfのHTML埋め込みコード

(2) xspfファイル

sample.xspf: 右クリックして保存
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="0" xmlns = "http://xspf.org/ns/0/">
  <title>スザート舞曲集</title>
  <trackList>
   <track>
    <location>02.mp3</location>
    <image>02.jpg</image>
    <album>スザート舞曲集 Danserye 1551 by TIELMAN SUSATO</album>
    <title>愉快なとき</title>
    <info>http://yas.mu/</info>
   </track>
   <track>
    <location>03.mp3</location>
    <image>03.jpg</image>
    <album>スザート舞曲集</album>
    <title>なぜ</title>
    <info>http://yas.mu/</info>
   </track>
   <track>
    <location>04.mp3</location>
    <image>04.jpg</image>
    <album>スザート舞曲集</album>
    <title>郵便</title>
    <info>http://yas.mu/</info>
   </track>
  </trackList>
</playlist>
図4. sample.xspf
title
load後にこの内容が表示されます.
location
mp3ファイルの場所(URL)を指定します.
image
Extendedタイプで表示する画像ファイルを指定します.
album
アルバム名を指定します.省略可能です.
title
曲名を指定します.
info
クリックしたときの飛び先URLを指定します. Extendedの場合は写真の下のtrack infoを, slimの場合はボリュームの右の記号をクリックするとこの飛び先が表示されます.
currseq
BGMモードのときの現在の順序番号を指定します.BGMモードのときのみ必要. seqの最後の値と同じです. http://papalin.yas.mu/bgm/playlist/GEN/nbr.xspf参照.
seq
BGMモードのときに順序番号を指定します.BGMモードのときのみ必要. 演奏順に連続した整数である必要があります. http://papalin.yas.mu/bgm/playlist/GEN/nbr.xspf参照.

(3) パラメータ

playlist_url
xspfファイルの場所(URL)を指定する.
autoload
trueのとき,自動的にxspfファイルをロードする.
autoplay
自動的に再生を開始する.
noitemnumber
trueのとき曲のタイトルに自動的に項目番号を振らない.(yas.mu版独自)
usetitleaslist(Extendedのみ)
写真横のプレイリストとして曲名(title)のみを用いる.(yas.mu版独自)
track_index=n
リストのn番めの曲から再生する.
bgmmode
trueのときBGMモードとなる.(yas.mu版独自)

関連リンク

応用サイト

ここで説明したXSPF Web Music Playerを利用して構築したサイトです. プレイヤー選択でFlashを指定した場合にここに示したyas.mu版xspf_playerが使用されます. 具体的使用例としてご覧ください.
IL DIVO "Papalin" --- パパリンの音楽の全て
[yas.muトップページへ]

#14267, last modified: Sunday, 18-Jan-2015 14:55:15 JST, w@yas.mu