The Curse of Lag [●razy]

つかこのエントリ、プレイヤーぶち込みすぎたせいか重いわ・・・。
すみません_|￣|○
今日は少しだけためになるかもしれない内容かも？ｗ

あ、タイトルは別に内容と関係ないんだけどね。
印象に残ってるコピーなので使わせてもらっただけｗ
まぁオレの場合は『NO GAME NO LIFE』かな、なんて思ったり（ノ∀｀）
ちなみに高校の卒業文集に思いっきりその言葉書いたなオレ・・・。

まぁそんなことはどうでもよくて。
ロッサさんがブログ書きたいらしくて、どこがいいかなーとかイロイロ相談されたんでとりあえずNINJAブログ教えておいた（ ゜_ゝ゜）

で、ロッサさんはどうやらブログで音楽を鳴らしたいらしい。
オレも仕事でFLASHプレイヤー付きサイトを作ったことあるけど、普通に音楽の流れるサイトは作ったことないのよねー。
まぁ本音を言えば開いた途端にイキナリ音楽が流れるサイトはどうかと思う部分があるので推奨はしませんけど・・・（；´∀｀）
オレが思うに、基本的には音楽は鳴らないほうが見る側にとっては有難いです。
しかし、どうしても鳴らしたいなら最低でも以下の条件は絶対に守って欲しいと思います。

• プレイヤーを表示すること！
• プレイヤーはページを開いた時に視認できるように！
• 見る側によってPCの音量は変わるので、鳴らすなら音は小さめに！
• 停止または消音ボタンを必ず表示させること！
• 音楽ファイルは軽めに！

要するに、音量でか過ぎでびびってブラウザ閉じちゃうようなサイトや、プレイヤーが表示されてなくて止めたくても止められないようなサイトや、音楽ファイルの読み込みに時間かかりまくってCPUに負担かかるようなサイトはお断りってことです。
あとは個人の趣味だと思うのでお好きにどうぞ。

でもまぁ、ブログでの音楽再生について少し気になったのでチョット調べてみましたよっと。




【NINJAブログでの音楽再生方法】

1. まずは『ファイルアップロード』にて音楽ファイルをアップロードする。
   NINJAブログでは512KB以上のファイルはUPできないので、512KB以下の音楽ファイルに限ります。とりあえず今回はHDDに眠ってた 【ビッグブリッヂの死闘 by FF5】 のMIDIファイルをUPしてみました。
   著作権とかイロイロあるけど、公開してたサイトがなくなってしまったので見逃してくれと言うか・・・もにょもにょ・・・。
   好きなんですよ、この曲・・・。
   まぁメインは楽曲でなく、再生方法の紹介なんで・・・許してください_|￣|○
   


2. ファイル一覧からUPした音楽ファイルを選び、『記事を書く』をクリック。
   


3. すると勝手に Windows Media Player のタグを生成してくれて、下のようなプレイヤーが表示されます。
   
   作成されたタグ （見やすいように改行しています）
   <object type="application/x-oleobject" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="175" height="45">
   <param name="autostart" value="false" />
   <param name="filename" value="http://file.tcol.blog.shinobi.jp/*****.mid" />
   <param name="showcontrols" value="true" />
   <embed name="8036592178476121" src="http://file.tcol.blog.shinobi.jp/*****.mid" type="application/x-mplayer2" showcontrols="1" autostart="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="175" height="45">
   </embed>
   </object>
   ブラウザでの表示
   ←プレイヤー
   再生ボタンを押すと再生されます。
   ※ 音量が調整できませんので注意！


4. しかし、コイツをよく見てもらえればわかるのですが、ボリュームコントロールが表示されていません。
   音量操作ができないととてもウザイのでせっかくUPした音楽も聞いてもらえなくなってしまいます。
   つーかオレなら迷わずストップさせます。
   なので、最低でもボリュームは操作できるようにしておきましょう。
   下のタグは先ほど生成されたものですが、太字部分に注目してください。
   
   作成されたタグ （見やすいように改行しています）
   <object type="application/x-oleobject" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="175" height="45">
   <param name="autostart" value="false" />
   <param name="filename" value="http://file.tcol.blog.shinobi.jp/*****.mid" />
   <param name="showcontrols" value="true" />
   <embed name="8036592178476121" src="http://file.tcol.blog.shinobi.jp/*****.mid" type="application/x-mplayer2" showcontrols="1" autostart="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="175" height="45">
   </embed>
   </object>
   width="175"という記述です。
   これがコントローラーの横幅を狭くしてボリュームコントロールが表示されなくなっています。
   なので、こいつをもっと大きくしてみましょう。
   


5. とりあえず横幅を300にしてみます。
   
   作成されたタグ （見やすいように改行しています）
   <object type="application/x-oleobject" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="300" height="45">
   <param name="autostart" value="false" />
   <param name="filename" value="http://file.tcol.blog.shinobi.jp/*****.mid" />
   <param name="showcontrols" value="true" />
   <embed name="8036592178476121" src="http://file.tcol.blog.shinobi.jp/*****.mid" type="application/x-mplayer2" showcontrols="1" autostart="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="300" height="45">
   </embed>
   </object>
   ブラウザでの表示
   
   プレイヤーの右端にボリュームコントロールが表示されるようになりました。
   


6. しかし、ブログで音楽を鳴らすにはプレイヤーが大きすぎてしまいます。
   普通ブログなどで音楽を流す場合はページ全体の右または左に表示される、カレンダーや最新コメントなどのプラグインのところにプレイヤーを置かないと、開いた時に音楽が流れないので意味がないからです。
   HTMLソースをいぢればこの横幅でも可能ですけど、テンプレごとに変わるので非常にめんどくさい・・・。
   なので、今回はフリーエリアのプラグインを追加してそこにプレイヤーを表示させる方法を説明します。
   プラグインのエリアは大抵200px以下なので、とりあえず幅を180pxに指定し、必要なコントローラーだけ表示させてみましょう。
   まずは先ほどの要領で横幅を180にします。
   ※ 横幅はテンプレートによって異なりますので、自分のブログに合った横幅を指定してください。
   
   作成されたタグ （見やすいように改行しています）
   <object type="application/x-oleobject" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="180" height="45">
   <param name="autostart" value="false" />
   <param name="filename" value="http://file.tcol.blog.shinobi.jp/*****.mid" />
   <param name="showcontrols" value="true" />
   <embed name="8036592178476121" src="http://file.tcol.blog.shinobi.jp/*****.mid" type="application/x-mplayer2" showcontrols="1" autostart="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="180" height="45">
   </embed>
   </object>
   ブラウザでの表示
   
   最初と同じく、ボリュームコントロールが表示されなくなってしまいました。
   そこで注目するのが、再生 / 停止ボタンの横にある、巻き戻し / 早送りボタンです。
   コイツぶっちゃけいらなくないですか？
   こいつ消してここにボリュームコントロール表示させりゃいんじゃね？
   ということでこの巻き戻し / 早送りボタンを消します。
   太字部分のタグを追加しましょう。
   
   作成されたタグ （見やすいように改行しています）
   <object type="application/x-oleobject" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="180" height="45">
   <param name="autostart" value="false" />
   <param name="filename" value="http://file.tcol.blog.shinobi.jp/*****.mid" />
   <param name="showcontrols" value="true" />
   <param name="ShowPositionControls" value="false" />
   <embed name="8036592178476121" src="http://file.tcol.blog.shinobi.jp/*****.mid" type="application/x-mplayer2" showcontrols="1" autostart="0" ShowPositionControls="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="180" height="45">
   </embed>
   </object>
   ブラウザでの表示
   
   ほーら、あの邪魔なボタンなくなっちゃった（ノ∀｀）
   <param name="ShowPositionControls" value="false" /> と ShowPositionControls="0" というタグを追加するだけです。
   <param name="ShowPositionControls" value="false" /> は <embed ～> の直前に、ShowPositionControls="0" は <embed ～> の内部に挿入してください。
   このタグの false または 0 を true または 1 に変えると、また巻き戻し / 早送りボタンが表示されるようになります。
   


7. この辺のタグをいぢると、他にもイロイロなことができます。
   とりあえず今回関係がありそうなのだけ書いておくので目を通しておくといいかも。
   
   プレイヤーの表示（trueまたは1で表示、falseまたは0で非表示）
   <param name="ShowControls" value="true or false" />
   ShowControls="1 or 0"
   ボリュームコントロールの表示（trueまたは1で表示、falseまたは0で非表示）
   <param name="ShowAudioControls" value="true or false" />
   ShowAudioControls="1 or 0"
   巻き戻し / 早送りボタンの表示（trueまたは1で表示、falseまたは0で非表示）
   <param name="ShowPositionControls" value=" true or false" />
   ShowPositionControls="1 or 0"
   再生位置スライドバーの表示（trueまたは1で表示、falseまたは0で非表示）
   <param name="ShowTracker" value="true or false" />
   ShowTracker="1 or 0"
   自動再生の有無（trueまたは1で自動再生、falseまたは0で再生ボタンを押すと再生）
   <param name="AutoStart" value="true or false" />
   AutoStart="1 or 0"
   リピート再生回数を数値で指定（0で無限リピート）
   <param name="PlayCount" value="数値" />
   PlayCount="数値"
   デフォルトの音量（-10000で消音、0で最大音量）
   <param name="Volume" value="-10000～0" />
   Volume="-10000～0"
   上に書いたものを実際に使ってみよう！
   例えばスライドバーを非表示にして縦幅を小さくすればもっとプレイヤーがスリムに表示できる。
   
   作成されたタグ （見やすいように改行しています）
   <object type="application/x-oleobject" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="180" height="26">
   <param name="autostart" value="false" />
   <param name="filename" value="http://file.tcol.blog.shinobi.jp/*****.mid" />
   <param name="showcontrols" value="true" />
   <param name="ShowPositionControls" value="false" />
   <param name="ShowTracker" value="false" />
   <embed name="8036592178476121" src="http://file.tcol.blog.shinobi.jp/*****.mid" type="application/x-mplayer2" showcontrols="1" autostart="0" ShowPositionControls="0" ShowTracker="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="180" height="26">
   </embed>
   </object>
   ブラウザでの表示
   
   いやー、スリムになりましたね。
   音楽鳴らすだけならぶっちゃけこれでよいかと思います。
   次は更に自動再生をONにしてリピート機能を入れてみます。
   
   作成されたタグ （見やすいように改行しています）
   <object type="application/x-oleobject" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="180" height="26">
   <param name="autostart" value="true" />
   <param name="filename" value="http://file.tcol.blog.shinobi.jp/*****.mid" />
   <param name="showcontrols" value="true" />
   <param name="ShowPositionControls" value="false" />
   <param name="ShowTracker" value="false" />
   <param name="PlayCount" value="0" />
   <embed name="8036592178476121" src="http://file.tcol.blog.shinobi.jp/*****.mid" type="application/x-mplayer2" showcontrols="1" autostart="1" ShowPositionControls="0" ShowTracker="0" PlayCount="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="180" height="26">
   </embed>
   </object>
   ブラウザでの表示
   
   ※ さすがにここで自動再生にすると、ページを表示した瞬間から再生されてしまい
   　  イミがないのでOFFになっています。
   デフォルトの音量もいぢってみるといいかもしれませんが、音楽ファイル自体の音量と、見る側のPCの Volume Control 設定音量により変わってくるのであまりイミがないかも。
   環境によって変わりますけどこればっかりはどうしょうもねーんで、ボリュームコントロールを表示させることでカンベンしてもらいましょう。
   デフォルトの音量を最小に設定しておいて、聞きたいヒトだけボリュームコントロールを操作して聞いてもらうというのもアリかもしれませんね。
   


8. 最後にこのタグ全体をプラグイン表示エリアに移動させる作業です。
   タグを全て選択しコピーしてから、環境設定にある『プラグインの設定』をクリック。
   『プラグインの追加』をクリックし、『フリーエリア』の追加ボタンを押す。
   『プラグインの編集』をクリックし、追加したフリーエリアの『設定の変更』をクリックして、タイトルを『BGM』とでもしておきましょう。
   『プラグインの編集』に戻り、さっき追加した『フリーエリア』が『BGM』になっているのを確認し、ドラッグして一番上へ移動させる。
   移動させたBGMの『HTML編集』をクリック。
   テキストエリアに先ほどのタグをペーストして変更ボタンを押す。
   ブログトップを表示して確認してください。
   
   ↑こんな感じに表示されるはずー。
   これできっとあなたのブログにも音楽が鳴るようになっているはず！！
   
   

とまぁこんな感じの手順かな・・・。
多分他のブログでもタグをコピペしてちゃんと設定してやればいけると思う。
つか書いてから気づいたけど4と5はイミないなｗｗｗ
スルーしてくださいｗｗｗｗｗｗｗｗｗ
もう編集めんどいんで（ ゜_ゝ゜）

今の手順で一番問題なのはやっぱ音楽ファイルのサイズかな・・・。
512KB以下の一般的にBGMとして使用できる音楽ファイルなんてMIDIくらいじゃないですか？
MP3とかの512KB以上の音楽ファイルを流したーいっていうヒトのためには以下で説明を。


【もっとファイルサイズの大きな音楽ファイルを流したい！】
もう何度も言及していますが、NINJAブログには512KB以上のファイルはUPできません。
しかし、他の所ならUP出来るトコもあるわけですよｗ
別のところにUPしてそこから読み込めばいいわけです。
良いか悪いかは知りません（ ゜_ゝ゜）
例えば、NINJAブログのIDがあるなら無料ホームページのツールを作ってそこにUPしてみたらイインジャナーイ？
というわけで実際にMP3を使用して試してみました。
はい、太字部分に音楽ファイルのURLをコピペするだけです。
簡単ですね。
ちなみにファイルサイズは3,385KB。
3.4M近くあるわけですねー。
でも結構さっくりと再生されますな、回線とかによるでしょうけど。
あんまり大きすぎると重くなるので5M以下あたりが妥当なのかな・・・。
ごめん、その辺の限度はよくわかんねーや（´・ω・｀）

実はNINJAホームページも一度にUPできるファイルサイズの上限が約3.2Mということで、このMP3はUPできませんでしたけどねッ！！
そんなわけでワザワザこのためだけに [ Yahoo!ジオシティーズ ] に登録してスペースを取得し、そこにファイルをUPしてそこから読み込むというしちめんどくさい手を使ってみました（ノ∀｀）
まぁオレがこのMP3お気に入りで使いたかっただけです。
いやーまじカコイイよこの曲たまんねぇ！！！
BGM使用OKかはわかりませんが特に言及していなかった（しかもサイトは改装中でMP3のダウンロードのみになっていた）ので使用させて頂きました。
問題があったら消します。

皆さんもくれぐれも著作権には気をつけましょう！
CDの音源とか絶対にNGですからね！！
自作のオリジナル音源なら構いませんが、他の人が作ったりしたものは必ず音源配布サイトをよく読んで、許可をもらうなりリンクを貼るなりして使用しましょう。
オレみたいにいい加減じゃいけません_|￣|○
つかもうゲーム音源の時点でカナリグレーゾーンだったり・・・（；´∀｀）
JASRACに付け狙われないことを祈るばかりです(((（；゜Д゜）)))

このエントリについて質問等ありましたらコメントにドゾー。




で、リンク1件追加。
[ ロッサの日記 ]　by ロッサさん
廃WIZよ！狩りもブログも頑張れーヾ（゜∀゜）ノ