インターネット FC2 ブログ FC2 ブログで埋め込みプレイヤーで MP3 を再生できるようにしたメモ + SyntaxHighlighter 導入簡易メモ

FC2 ブログで埋め込みプレイヤーで MP3 を再生できるようにしたメモ + SyntaxHighlighter 導入簡易メモ

FC2 ブログの記事内で MP3 ファイルを再生できるように埋め込みプレイヤーを設置したのですが、そのファイルを再生できるまでに少々躓いた(?)ところがありました。

結果的に大した問題ではありませんでしたが、ちょっとした制限みたいなものがあるようなので、備忘録としてファイル再生までにいろいろ試行錯誤した内容を残しておきます。

またいくつか埋め込みプレイヤーのソースコードについて設定メモを残しておきたいのでついでに、ソースコードが読みやすくなる JavaScript ライブラリ 「SyntaxHighlighter」 を使えるように導入してみました。

by カエレバ
スポンサードリンク
参考 URL
・ Flash mp3 players | HotPotatoes Tutorials
http://www.ewbooks.info/hotpot/flash-mp3-players

・ JW FLV Media Player のオプションの一覧 (備忘録) | 「知ったかブログ」
http://kenknown.blog42.fc2.com/blog-entry-54.html

・ Chrome FC2 ブログ等のプレビューで JavaScript が機能しない
拡張機能「X-XSS-Protection ZERO」で有効にする方法 | FC2 ブログテンプレート改造圏
http://fc2blogtemplate.com/blog-entry-4.html

・ FC2 ブログで JavaScript が動作しない件について | Sun Etenity
http://annkokunokizinn.blog116.fc2.com/blog-entry-216.html

・ SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

・ FC2 ブログで SyntaxHighlighter を使ってソースコードを表示する
| インターネットとかシロクマとか
http://white-bear.info/archives/85

・ WEB サイト・ブログの為の HTML ソースコード変換 | ホームページ 作成、運営、管理ガイド
http://www.netyasun.com/syntaxhighlighter/source-escape.html

・ SyntaxHighlighter 3.0.83 | Programmer's Side
http://programmersside.blog.fc2.com/blog-entry-4.html

・ ブロガー必見!SyntaxHighlighterを使ってソースコードを読みやすく表示する方法
| ホームページ制作なら渋谷のウェブ制作会社【スタイル】
http://05step.com/2012/07/28/syntaxhighlighter-highlight/

・ ソースコードを美しく公開する方法 - 「SyntaxHighlighter」の使い方 | Stainless Note
http://stainless-note.tumblr.com/post/37861044002/syntaxhighlighter

・ Q.画像やファイルがアップロードできません。 | FC2ブログ Q&A
http://help.fc2.com/blog/qa/group13/60/

・ サーバにアップロードしよう | FC2ブログ マニュアル
http://help.fc2.com/blog/manual/Home/toukou/gazou.html#4

目次

by カエレバ


・ 1. FC2 ブログ 音声ファイル 対応拡張子の確認

まずは FC2 ブログにアップロードできるファイルの拡張子を確認します。

Q.画像やファイルがアップロードできません。 | FC2ブログ Q&A
http://help.fc2.com/blog/qa/group13/60/

より

Q.画像やファイルがアップロードできません。

A.アップロードできる画像やファイルは、サイズが 2 MB までです。
* 拡張子 jpg , gif , png , mid , swf , ico , mp3 , html , txt , css , js , rdf です。


以上、Q&A の内容から 音声用ファイルの拡張子は midmp32 MB までアップロード対応していることがわかりました。

また、後で説明に出てくる埋め込みプレイヤーのファイルの拡張子 swfjs、ソースコード強調表示用に cssjs が必要ですが、FC2 ブログでアップロードできる対応拡張子に含まれています。

ここでは mp3 ファイルを使って埋め込みプレイヤーで再生できるようにしてみます。



・ 2. 埋め込みプレイヤーの選択

埋め込みプレイヤーには再生と停止ボタン、ボリューム調整、再生時間がわかるものを探しました。

・ Flash mp3 players | HotPotatoes Tutorials
http://www.ewbooks.info/hotpot/flash-mp3-players

上記リンク先の一番上にある 「JW Player」 が求める機能全部入っていたので、この埋め込みプレイヤーをブログ内に設置できるようにしてみます。



・ 3. SyntaxHighlighter の導入

ソースコードをブログに載せたいがコピペだけではダメっぽいので、ソースコードをきれいに表示できる JavaScript ライブラリ 「SyntaxHighlighter」 を導入します。

下記のリンク先のファイルをダウンロード。ダウンロードしたバージョンは 「3.0.83」 。

リンク先を参考に導入。詳細な導入手順は割愛します。
・ FC2 ブログで SyntaxHighlighter を使ってソースコードを表示する
| インターネットとかシロクマとか
http://white-bear.info/archives/85

FC2 ブログへのファイルのアップロード方法。
・ サーバにアップロードしよう | FC2ブログ マニュアル
http://help.fc2.com/blog/manual/Home/toukou/gazou.html#4

ソースコードは HTML ように変換する必要があります。
下記のリンク先でソースコードを変換します。
・ WEB サイト・ブログの為の HTML ソースコード変換 | ホームページ 作成、運営、管理ガイド
http://www.netyasun.com/syntaxhighlighter/source-escape.html

SyntaxHighlighter を使うにはソースコード部分を pre 要素で囲みます。
<pre class="brush: 言語名;">
  ソースコード
</pre>
ソースコードに応じて 「言語名」 を指定します。ここ の 「Brush aliases」 から選んで記述します。

ソースコード」 の部分に WEB サイト・ブログの為の HTML ソースコード変換 で変換したコードを貼り付けます。

ソースコードの行番号やハイライト表示の方法は下記のリンク先を参考にしました。
・ SyntaxHighlighter 3.0.83 | Programmer's Side
http://programmersside.blog.fc2.com/blog-entry-4.html

ソースコードの複数行ハイライト表示する方法は下記のリンク先を参考にしました。
・ ブロガー必見!SyntaxHighlighterを使ってソースコードを読みやすく表示する方法
| ホームページ制作なら渋谷のウェブ制作会社【スタイル】
http://05step.com/2012/07/28/syntaxhighlighter-highlight/

ソースコードをもう少し見やすくするように CSS ファイルを一部書き換えます。
・ ソースコードを美しく公開する方法 - 「SyntaxHighlighter」の使い方 | Stainless Note
http://stainless-note.tumblr.com/post/37861044002/syntaxhighlighter

上記リンク先の 「5.CSSを少しアレンジ」 を参考に 「styles」 フォルダ内にあった 「shCoreDefault.css」 を書き換えてアップロードします。

74 ~ 76 行目 書き換え前
.syntaxhighlighter table {
  width: 100% !important;
}
74 ~ 76 行目 書き換え後
.syntaxhighlighter table {
  margin:5px !important;
  border:solid 1px #EEE !important;
}
234 ~ 236 行目 書き換え前
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}
234 ~ 236 行目 書き換え後
.syntaxhighlighter .line.alt2 {
  background-color: #F8F8F8 !important;
}



・ 4. JW Player 埋め込みプレイヤーのソースコード

・ Flash mp3 players | HotPotatoes Tutorials
http://www.ewbooks.info/hotpot/flash-mp3-players

上記リンク先に行き、ブラウザページのソースから埋め込みプレイヤーのソースコードをコピーします。
<script type="text/javascript" src="http://ewbooks.info/hotpot/assets/flash/swfobject.js">
</script>

<div id="player"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this movie.
</div>

<script type="text/javascript">
<!--//--><![CDATA[// ><!--
<!--//--><![CDATA[// ><!--
  var s = new SWFObject("http://ewbooks.info/hotpot/assets/taxonomy/flvplayer_v5.6.swf","http://ewbooks.info/hotpot/assets/media/loch_lavan_castle.mp3","240","24","9");
  s.addParam("allowfullscreen","true");
  s.addVariable("file","http://ewbooks.info/hotpot/assets/media/loch_lavan_castle.mp3");
  s.addVariable("backcolor","0x111111");
  s.addVariable("frontcolor","0xdddddd");
  s.addVariable("lightcolor","0x99cc00");
  s.addVariable("width","240");
  s.addVariable("height","24");
  s.write("player");
//--><!]]]]><![CDATA[>
//--><!]]>
</script>
上記ソースコードは見やすいようにところどころ改行を加えています。



・ 5. JW Player 埋め込みプレイヤーのソースコード確認
<script type="text/javascript" src="http://ewbooks.info/hotpot/assets/flash/swfobject.js">
</script>

<div id="player"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this movie.
</div>

<script type="text/javascript">
<!--//--><![CDATA[// ><!--
<!--//--><![CDATA[// ><!--
  var s = new SWFObject("http://ewbooks.info/hotpot/assets/taxonomy/flvplayer_v5.6.swf","http://ewbooks.info/hotpot/assets/media/loch_lavan_castle.mp3","240","24","9");
  s.addParam("allowfullscreen","true");
  s.addVariable("file","http://ewbooks.info/hotpot/assets/media/loch_lavan_castle.mp3");
  s.addVariable("backcolor","0x111111");
  s.addVariable("frontcolor","0xdddddd");
  s.addVariable("lightcolor","0x99cc00");
  s.addVariable("width","240");
  s.addVariable("height","24");
  s.write("player");
//--><!]]]]><![CDATA[>
//--><!]]>
</script>
ソースコードより 1 行目、10 行目、12 行目 の記述に注目します。



・ 6. JW Player 埋め込みプレイヤーの必要なファイル

JW Player 埋め込みプレイヤー設置に必要なファイルを確認します。
<script type="text/javascript" src="http://ewbooks.info/hotpot/assets/flash/swfobject.js">
1 行目 は、src に js ファイルを指定します。
ソース内の js ファイルをダウンロードして FC2 ブログにアップロードしておきます。
アップロード後に js ファイルの URL をメモしておきます。
  var s = new SWFObject("http://ewbooks.info/hotpot/assets/taxonomy/flvplayer_v5.6.swf","http://ewbooks.info/hotpot/assets/media/loch_lavan_castle.mp3","240","24","9");
10 行目 は 「SWFObject」 のカッコ内に
swf ファイルと mp3 ファイルの URL を指定しています。

swf ファイルは下記リンク先の JW Player の項目に
Download リンクがあるのでそこからダウンロードします。

・ Flash mp3 players | HotPotatoes Tutorials
http://www.ewbooks.info/hotpot/flash-mp3-players

swf ファイル は js ファイルと同様、FC2 ブログにアップロードして swf ファイルの URL をメモしておきます。

再生したい mp3 ファイルも同じく FC2 ブログにアップロードして、ファイルの URL をメモをしておく必要がありますが、今回は こちら で公開されている MP3 ファイルの URL を指定することにしてみます。
  s.addVariable("file","http://ewbooks.info/hotpot/assets/media/loch_lavan_castle.mp3");
12 行目10 行目mp3 ファイルの URL 指定と一緒となります。



・ 7. JW Player 埋め込みプレイヤー 音量調整オプション

音量は初期値で MAX[80] となっているので、これを半分(40)に指定します。

・ JW FLV Media Player のオプションの一覧 (備忘録) | 「知ったかブログ」
http://kenknown.blog42.fc2.com/blog-entry-54.html
<script type="text/javascript" src="http://ewbooks.info/hotpot/assets/flash/swfobject.js">
</script>

<div id="player"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this movie.
</div>

<script type="text/javascript">
<!--//--><![CDATA[// ><!--
<!--//--><![CDATA[// ><!--
  var s = new SWFObject("http://ewbooks.info/hotpot/assets/taxonomy/flvplayer_v5.6.swf","http://ewbooks.info/hotpot/assets/media/loch_lavan_castle.mp3","240","24","9");
  s.addParam("allowfullscreen","true");
  s.addVariable("file","http://ewbooks.info/hotpot/assets/media/loch_lavan_castle.mp3");
  s.addVariable("backcolor","0x111111");
  s.addVariable("frontcolor","0xdddddd");
  s.addVariable("lightcolor","0x99cc00");
  s.addVariable("width","240");
  s.addVariable("height","24");
  s.addVariable("volume","40");
  s.write("player");
//--><!]]]]><![CDATA[>
//--><!]]>
</script>
18 行目 に音量調整のオプションを追記します。



・ 8. JW Player 埋め込みプレイヤー 改造ソースコード
<script type="text/javascript" src=" 「jsファイルのURL」 ">
</script>

<div id="player"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this movie.
</div>

<script type="text/javascript">
<!--//--><![CDATA[// ><!--
<!--//--><![CDATA[// ><!--
  var s = new SWFObject(" 「swfファイルのURL」 "," 「mp3ファイルのURL」 ","240","24","9");
  s.addParam("allowfullscreen","true");
  s.addVariable("file"," 「mp3ファイルのURL」 ");
  s.addVariable("backcolor","0x111111");
  s.addVariable("frontcolor","0xdddddd");
  s.addVariable("lightcolor","0x99cc00");
  s.addVariable("width","240");
  s.addVariable("height","24");
  s.addVariable("volume","40");
  s.write("player");
//--><!]]]]><![CDATA[>
//--><!]]>
</script>
js 、 swf 、 mp3 ファイルの URL を入れて、ソースコードをブログ内記事に貼り付ければ、埋め込みプレイヤーは完成となります。



・ 9. JavaScript が動作しない場合の確認方法

FC2 ブログの記事の設定で 「改行の扱い」 を 「自動改行」 と 「HTMLタグのみ」 のどちらかに設定できますが、この設定によって JavaScript が動作しないことがあるようです。

下記のリンク先に詳しい解説がありますので、もし動作しないようなら読んでおいたほうがいいかもしれません。
・ FC2 ブログで JavaScript が動作しない件について | Sun Etenity
http://annkokunokizinn.blog116.fc2.com/blog-entry-216.html



・ 10. プレビュー画面で JavaScript を動作する方法

FC2 ブログでは記事を作成中にリアルタイムプレビュー、プレビュー画面を表示することができますが、記述した JavaScript は動作しないようになっておりすぐに確認できない点をいつも不満に感じておりました。

JavaScript の動作確認をするには、すでに公開済みの記事に JavaScript を記述してみる等して確認していたのですが、その後、いろいろ調べたら下記のリンク先にて JavaScript プレビューの動作について詳しい解説がありました。

・ Chrome FC2 ブログ等のプレビューで JavaScript が機能しない
拡張機能「X-XSS-Protection ZERO」で有効にする方法 | FC2 ブログテンプレート改造圏
http://fc2blogtemplate.com/blog-entry-4.html

どうやら Chrome 系ブラウザがセキュリティ対策(XSSフィルタ)のため JavaScript が動作しないらしく、ちょうど 使用しているブラウザ X-Iron は Chromium 派生ブラウザ だったため、この影響を受けていたようです。

リンク先の 「X-XSS-Protection-ZERO」 のインストールと、記事内の 「FC2 ブログなどの登録URLサンプル」 を参考に対象ブログの URL を登録する対策を行ったことで、プレビュー画面でも JavaScript が動作するようになりました。



・ 11. JW Player 埋め込みプレイヤー 動作確認

Get the Flash Player to see this movie.



・ 12. JW Player 埋め込みプレイヤー 複数設置

埋め込みプレイヤーを複数設置したい場合はコード 4 行目19 行目 を他のコードと重複しないようにする必要があります。

下記のコードでは 「player1」 と 「player2」 に分けて記述しています。

<script type="text/javascript" src=" 「jsファイルのURL」 ">
</script>

<div id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this movie.
</div>

<script type="text/javascript">
<!--//--><![CDATA[// ><!--
<!--//--><![CDATA[// ><!--
  var s = new SWFObject(" 「swfファイルのURL」 "," 「mp3ファイルのURL」 ","240","24","9");
  s.addParam("allowfullscreen","true");
  s.addVariable("file"," 「mp3ファイルのURL」 ");
  s.addVariable("backcolor","0x111111");
  s.addVariable("frontcolor","0xdddddd");
  s.addVariable("lightcolor","0x99cc00");
  s.addVariable("width","240");
  s.addVariable("height","24");
  s.addVariable("volume","40");
  s.write("player1");
//--><!]]]]><![CDATA[>
//--><!]]>
</script>
<script type="text/javascript" src=" 「jsファイルのURL」 ">
</script>

<div id="player2"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this movie.
</div>

<script type="text/javascript">
<!--//--><![CDATA[// ><!--
<!--//--><![CDATA[// ><!--
  var s = new SWFObject(" 「swfファイルのURL」 "," 「mp3ファイルのURL」 ","240","24","9");
  s.addParam("allowfullscreen","true");
  s.addVariable("file"," 「mp3ファイルのURL」 ");
  s.addVariable("backcolor","0x111111");
  s.addVariable("frontcolor","0xdddddd");
  s.addVariable("lightcolor","0x99cc00");
  s.addVariable("width","240");
  s.addVariable("height","24");
  s.addVariable("volume","40");
  s.write("player2");
//--><!]]]]><![CDATA[>
//--><!]]>
</script>

実行結果:

player1
Get the Flash Player to see this movie.

player2
Get the Flash Player to see this movie.




by カエレバ

スポンサードリンク

トラックバック一覧

コメント一覧

コメントの投稿

名前

タイトル

メールアドレス

URL

本文

パスワード

非公開コメント

管理者にだけ表示を許可する