Archives | Tumblr | Facebook | bullet-feed.pngRSS

すっきりシンプルなインターフェイスでブログに自前の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="http://naglly.com/niftyplayer.swf?file=http://naglly.com/betty.mp3&as=1"> <param name=quality value=high>
<param name=bgcolor value=#FFFFFF>
; <embed src="http://naglly.com/niftyplayer.swf?file=http://naglly.com/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ページとアーカイブ、ここの記事で、公開されるディレクトリが変更されますので、どこからでも見えるように記述しておいたほうが良いです(例:http://naglly.com/niftyplayer.swf)。mp3ファイルはその都度名前を変更してください。

 設置しました。

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

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

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

このエントリーをはてなブックマークに追加

関連性が高いおすすめ記事


comments powered by Disqus