スポンサーサイト

--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

◆ WEBサイト上のMP3プレイヤー by HTML5(+jPlayer)

2011年11月22日 23:48

WEBトレンド的やはりFLASHは微妙に衰退する方向にて、HTML5でのMP3 Player実装を模索。
ポイントはiPhoneなどのデバイスや乱立するブラウザ群に左右されずに同じ見栄えと機能を保持すること。
勿論一から自分で作るなんてできないので、公開ソースで実装実験です。

■難しいのはヤダ!な人(FLASH版で対応)


難しいのはヤダ!そんな人はHTML5+jPlayerではなく、上記サンプルのFLASHでの実装がお薦め。
こちらのようなFLASH Playerが比較的に簡単に設置できます。
FLASH Playerでの実装についてはこちらを参考に!

↓↓↓以下よりHTML5(+jPlayer)の説明です。-----------

■jPlayer
http://jplayer.org/download/
ここの「demos (Get the demos ZIP file)」でデモをDLするとズラズラとデモ用HTML各種が格納されてるけど、「pf(pink.flag)」が一番好みのルックスなんで、こいつで実装GO!
曲ごとに複数のプレイヤーを表示させたいので、デフォルトで3曲表示の「demo-03-pf.htm」を選択。
これ以外にもジャケ写掲載、複数楽曲一括、映像プレイヤーなど結構なパターンの優秀デモあり。

■jskcデモサイト
・HTML含めの複数曲サンプルサイトはこちら→ jskc daw workspace


■プチ改修1(charset)
デモHTMLのcharsetが「iso-8859-1」になってるけど「UTF-8」に修正。
UTF-8にすると曲名に日本語が使えるようになる。
まあこれは実際に実装するサイトのcharsetに合わせないとしょうがないけど。


■プチ改修2(ボリューム)
デフォルトではボリュームが80%状態なんで、100%フルボリュームに変更した場合は下記。
「pf(pink.flag)」が読み込むJSフォルダの「jquery.jplayer.min.js」22行目のvolume:0.8をvolume:1.0に書き換えればOK。


■プチ改修3(曲数を増やす)
「demo-03-pf.htm」はデフォルトで3曲だけど、曲を無限に増やすことは可能。
ちょっと面倒だけど下記にて・・・。

--- Headタグ内のJS記述 ---
Headタグ内のJS記述がズラズラ書いてあるけど、基本的に1~3曲とブロックに分かれている。
このブロックを増やす曲数分だけコピペしていく。
コピペしたソースの中で修正するのは下記の部分↓
$("#jquery_jplayer_XXX").jPlayer({
cssSelectorAncestor: "#jp_container_XXX",

XXX部分は元々数字が入ってるけど、ここに別の数字もしくは文字を入れてやればOK!

--- HTML記述 ---
HTMLも基本的に1~3曲とブロックに分かれている。
このブロックを増やす曲数分だけコピペしていく。
コピペしたソースの中で修正するのは下記の部分↓
<div id="jquery_jplayer_XXX" class="jp-jplayer">
<div id="jp_container_XXX" class="jp-audio">

XXX部分は上記JSで上書きしたのと同じ文字列を入れてやればOK!


■プチ改修4(m4aとOggをMP3へ)
「demo-03-pf.htm」はデフォルトでm4aかOggファイルを呼び込む設定になってる。
基本のストリーミングはMP3ということで、MP3用に変更。

Headタグ内のJS記述で下記に再生する曲ファイルの記述がある。
m4a: "your_song_file.m4a",
oga: "your_song_file.ogg"
↓へ変更
mp3: "your_song_file.mp3"

supplied: "m4a, oga",
↓へ変更
supplied: "mp3",

逆に曲ファイルがMP3でない場合は、oggやm4aなどにしてやれば良い。


■プチ改修5(Headタグを外部ファイルに)
HTML内のHeadタグのJS記述は長くなるし、管理も面倒なんで、別ファイルとして管理。
まあこれは好みの問題だからどっちでもOK。
スポンサーサイト

◆ MP3格納サーバの引越し

2010年12月09日 01:48

いままでお世話になってたTOK2サーバ。
MP3格納庫として使える上、容量無制限だったから愛用してたんだけど、先週末からサーバが落ちまくりでMP3のWEBストリーミングに支障が・・・。
読み込みが激重でちょっと現実的な利用ができない感じになってきた。
そうなるとDTM野郎としては辛いところだ。

そこで格納サーバを引越しすることにした。

■サーバ候補
さくらインターネット:有料(容量1GB 月次125円)
Symphonic-net.Com:無料(容量1GB)

アカウントを申請して2つを試してみた。
さくらインターネットは有料だけあってMP3のWEB上の読み込みが結構速い。
Symphonic-netは比べると遅いけど、普通に再生は全く問題なし。

さくらの月次125円はタダみたいなもんだし、その分しっかり運用がされてれば安いもんだ。
タダほど高いものは無いという格言もあるしね。
ただ、Symphonic-netの無料もちゃんと動いてる。
さくらインターネットのお試し期間が2週間なんで、どちらにするかその間様子見だ。
[◆ MP3格納サーバの引越し]の続きを読む

◆ レスポンス向上?SoundCloud

2010年09月01日 01:04

結構前にSoundCloudを試してみたけど、その当時は余りに重くて断念したんだよね。
そんな中、最近はどうかな?と再度試したら、何か結構良いレスポンス感覚!

試しに楽曲MP3を上げてみたけど、結構すんなり上がった。
自分の使ってる無料のMP3用格納サーバ(TOK2)と同じぐらいのスピード感かな。
7MBで2分ぐらい。無料の範疇なら完全に合格ラインだ!

面白いのはストレージの容量の単位で、普通のWEBサービスでは○○GBとかだけど、SoundCloudはUPした楽曲の合計分数になるとこ。
無料アカウントだと上限が120分。
1曲4分とすると30曲分。まあ当分は埋る予定も無いから全然OKっす。
仮に120分フルになったら、有料会員になるか駄作UPを削除すれば良い。

改善要望点は楽曲名に日本語を入れたら曲をUPできなかったこと。
何か正常に進んでる感じがしながらも、2回連続でUPエラーが発生して、3度目に曲名から日本語を削ってみたらUPできた。
2010年な今、マルチ言語対応はしてもらいたいとこね(情報間違ってたらゴメンなさい)。

今どきなんで再生Playerが外部サイトに貼れるのは当り前として、Playerのサイズを任意変更できるのは何かと便利でグッドジョブ!

Liquid State(雨乞いの唄)

◆ ブログ上でMP3再生Player!(FC2ブログ)

2009年08月23日 00:42

当ブログはFC2社を使っており、サービス全般は非常に満足だが、唯一の不満がMP3なんかの楽曲再生用FLASH Playerが表示できなかったこと。
ただFC2フォーラムでは「可能」って書いてあるので、少々試行錯誤してみたらなんとかブログ記事内に貼り付けられた!

HTML的な話だけど、同じことを考えてるFC2ユーザがいたら、こちらの記事を参考(HTMLサンプル)にしてほしいが、「注意点」を要チェックで。

それではjskcソングをDig!!



■Host:Cubase AI4.5.2
■Voice:57 via Fw-1082
■Drums:Addictive Drums, Drumtic3
■Percussion:Audio data
■Bass:iblit
■Guitar:Fender Thinline via PODxt
■尺八:Audio data
■Synth:SQ8L, Arturia Analog Factory2.0, Lazysnake, EasySynth02

◆ サイト設置のMP3再生Flash Player

2009年05月07日 00:12

DAW野郎たるもの、日々コツコツと作成した自作曲を自サイトにUPしたりするわけだが、自サイトに設置するMP3再生のFlash Playerでどれが良いか色々探した結果、下記が現状ベストチョイス(3ッ星★★★)と認定!

★★★ Enrico Lai (FLASH MP3 PLAYER - FMP3) オリジナル・イタリア語サイト
★★★ Enrico Lai Google英訳サイト

■費用
・もちろん無料(Free)!!

■秀逸なデザインと豊富な機能
・背景、文字色、Playerサイズなどの任意変更も可能
・曲の秒・分数表示
・秒・分数スライダー
・音量スライダー
・リピート再生ボタン(もしくは自動リピート設定)
・その他、複数曲版やジャケ画像挿入版など色々あり

↓Enrico Lai単曲版サンプル(ルックスが素敵!)



■設置用HMLソースサンプル
Enrico Lai本家サイトにも設置用のHTMLサンプルが提供されるけど、使いやすいように多少編集してみた。
サーバ設定にも依存する部分があるけど、基本的には下記で問題ないと思う。
水色字の部分が各個人で任意設定できる部分です。

<object>
<embed wmode="transparent" src="XXXXXXXXXX/FMP3.swf
?mp3=XXXXXXXXXX.mp3
&title=●●●●●(楽曲タイトル:日本語可)
&color=000000&loop=no&lma=yes&textcolor=FFFFFF&action=stop" quality="high" bgcolor="#000000" width="260" height="60" name="FMP3" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>


■Playerファイル格納場所
XXXXXXXXXX/FMP3.swf ← DLしたFlash Player(FMP3.swf)ファイルの格納場所にてURLを記載。

■楽曲MP3ファイル格納場所
XXXXXXXXXX.mp3 ← 再生するMP3ファイルの格納場所にてURLを記載。

■楽曲タイトル
●●●●●(楽曲タイトル:日本語可) ← PLAYER上に表示される曲タイトル。サーバによっては日本語文字化けになるので、その場合は英語(半角)で。

■Playerの色
color=000000 ← Player自身の色設定。「000000」は黒だがRGB指定で変更可能。例えば赤ならcolor=FF0000、白ならcolor=FFFFFF。

■ループ再生
loop=no ← loop=yesにするとデフォルトでループ再生ON。

■ループボタン
lma=yes ← lma=noにするとループ再生ボタンが非表示になる。

■文字色
textcolor=FFFFFF ← PLAYER上の文字色。「FFFFFF」は白だがRGB指定で変更可能。

■自動再生
action=stop ← action=playにするとデフォルトで自動再生ON。

■四隅の色
bgcolor="#000000" ← 設置するサイトの背景色に合わせて、Playerの四隅の色をRGB指定。例えば赤ならbgcolor="#FF0000"。


ブログ設置の場合の注意点(重要)
上記サンプルHTMLはソース内で改行を挿入してます。
改行挿入の理由としては、MP3ファイル名や楽曲タイトル部分の編集を簡単にするためです。
しかしながらブログなど記事内にFlash Player埋め込む場合は「改行」挿入すると「文章の改行」とシステムが認識してしまいエラーになる可能性もあります。その場合は改行を削除してソースを繋げてください。
改行しないでソース繋げる場合は下記を参考に。

・コピペ用サンプル(改行コード削除)

<object><embed wmode="transparent" src="XXXXXXXXXX/FMP3.swf?mp3=XXXXXXXXXX.mp3&title=●●●●●(楽曲タイトル:日本語可)&color=000000&loop=no&lma=yes&textcolor=FFFFFF&action=stop" quality="high" bgcolor="#000000" width="260" height="60" name="FMP3" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>


>> 設置サンプルページ(jskc WEB)


最新の記事


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。