Twitter icon  Tumblr icon  facebook icon  rss icon  feedly icon
naglly.com > ブログについて  > すっきりシンプルなインターフェイスでブログに自前のmp3ファイルを公開する方法

すっきりシンプルなインターフェイスでブログに自前のmp3ファイルを公開する方法

music image
 音楽や音声などのMP3ファイルをブログで公開する良い方法を見つけましたので、実際に試しつつメモ的な物を書いてみます。まぁ、音声ファイルを公開することなんて無いかもしれませんが・・・。

 これは、とてもサイズの小さいFlashファイルと、Javaspriptを使って、ブログ上から自前のmp3ファイルを公開する方法です。ツールは下記を使用します。

NiftyPlayer - a small and simple Flash MP3 player!

 とてもすっきりとしたシンプルなインターフェイスです。

 特徴は、下記のように書かれています。

  • サイズが小さい
  • フリーでオープンソース
  • フラッシュの知識が無くても導入出来ます。
  • JavaScriptで動きます。
  • 自動再生可能。
  • シークバーをドラッグ、クリックできます。
  • シンプルな動作で動きます。再生、一時停止、ストップしかありません。
  • バッファのプログレスバー完備
  • バッファリングを止めることが出来る。
  • ボリュームコントロール付き。
  • 良くしゃべります。
  • エラー時にはすぐやり直します。

 実際にこれから導入してみたいと思います。

  1. フラッシュファイルを持ってきます。"7.Download"の下にある"zip file"をクリックしてダウンロードします。
  2. ダウンロードしたzipファイルを解凍して、"niftyplayer.swf"ファイルをブログがあるサーバーにアップロードします。
  3. 再生したいmp3ファイルもサーバーにアップロードします。試しにサンプルの"betty.mp3"を再生してみます。
  4. 以下のJavaScriptを記事に記述します。
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="165" height="38" id="niftyPlayer1" align="">
<param name=movie value="/niftyplayer.swf?file=/betty.mp3&as=1"> <param name=quality value=high>
<param name=bgcolor value=#FFFFFF>
; <embed src="/niftyplayer.swf?file=/betty.mp3&as=1" quality=high bgcolor=#FFFFFF width="165" height="38" name="niftyPlayer1" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed>
</object>

 太字のところを書き換えます。先ほどUPした実行用のフラッシュファイルと、再生するmp3ファイルです。niftyplayer.swfは一緒かも知れませんが、ブログの場合、TOPページとアーカイブ、ここの記事で、公開されるディレクトリが変更されますので、どこからでも見えるように記述しておいたほうが良いです(例:/niftyplayer.swf)。mp3ファイルはその都度名前を変更してください。

 設置しました。

 "niftyplayer.swf"のパラメータは2つあります。

  • file=betty.mp3
    実際に再生するmp3ファイルを指定します。ブログの場合は、TOPページとアーカイブ、個々の記事で場所が変わりますので、たとえば、"file=/betty.mp3"のようにどこからでも参照できる書き方にしたほうがよいと思います。
  • as=1
    自動再生の有無です。上記を指定すると自動再生します。パラメータ自体をなくせば自動再生しません。

 フラッシュとJavaScriptをほとんど知らないのですが、実際にやってみたらあっさりと設置できました。フラッシュの実行ファイルを初めていじくったかもしれません。とにかく簡単です。

 この記事のカテゴリは、ブログについて です。
このエントリーをはてなブックマークに追加

関連する記事と広告

最新ブログ記事一覧

 2018年12月10日
「なんで私の昼寝スポットは動き続けるの?」と不思議がるネコ(動画)
いつまでも動き続けるルームランナーの上で落ち着ける場所を見つけようとする、無茶な考えを持ったネコ…
 2018年12月09日
「双眼鏡越しに写真を撮ったら惑星っぽい」の画像をきっかけに類似の画像が集まる
「双眼鏡のレンズ越しに写真を撮影したら、惑星のようだった」と言うタイトルで投稿されたこの画像。確…
 2018年12月08日
枕の山の中からネコを探せ!(動画)
ベッドの上にたくさんのまくらが並べられていますが、この中にネコが潜んでいます。さて、どこにいるで…
 2018年12月08日
ロシアの子供たちは、ブランコを雪の中から掘り出して遊ぶ(動画)
ロシアの子供たちは、どんなに大雪が降っても公園にある遊具は本来の機能のまま遊びたいみたいで、雪を…
 2018年12月08日
Mercator Projection - 「メルカトル図法の真実」の間違った利用法
Mercator Projection(メルカトル図法) 男: Did you know Canada is actually a smallish island in…
 2018年12月07日
「今年も来たツリーの破壊者」「ワープする路面電車」他 51ネタ目
【小ネタまとめ】の記事は、日々の小ネタツイートの中から反応が良かったものをまとめて掲載します。これ…
 2018年12月06日
「だるまさんが転んだ」を遵守しつつ、飼い主を狩りに来るネコ(動画)
「だるまさんが転んだ」のルールに従い、撮影者が覗いた時はピクリとも動かず、見ていない隙に着実に迫…
 2018年12月06日
Middle Latitudes - 中緯度は最悪
xkcd: Middle Latitudeshttps://xkcd.com/2081/ Middle Latitudes(中緯度) 男: It would be nice …
 2018年12月05日
よっ、脱獄名人!部屋を仕切る柵を軽々と飛び越えるフレンチブルドッグ(動画)
フレンチブルドッグのピクルスさんは、飼い主がリビングルームへ入って来ないように仕切っている2~3フ…
 2018年12月04日
「昨日飛行機に乗ったら、雲が島の上だけにあった」の画像にトリビアが集まる
『昨日、飛行機に乗ったんだけど、雲が島の上にしかないことに気づいた。』と言うタイトルで投稿された…
 2018年12月04日
Cohort and Age Effects - イラっとくるコホート効果と年齢効果の混同
xkcd: Cohort and Age Effectshttps://xkcd.com/2080/ Cohort and Age Effects(コホート効果と年齢…
 2018年12月03日
犬とネコによる、透明フィルムの障害物対処方法の違い(動画)
ペット達がいつも通るドアに透明なフィルムを貼り付け、その障害に対してネコと犬がどのような反応を示…