So-net無料ブログ作成
» スポンサーリンク
音楽系ブログパーツ
前の5件 | 次の5件

FlashDevelop+Flex 3 SDKで埋め込みmp3プレイヤーを作ってみました (その2)
» 音楽系ブログパーツ 

前回の初めての埋め込みmp3プレイヤーからあまり進化してません。
見た目が少し変わっただけです。
周囲がレベルメーターになってます。
それだけでは芸がないのでレベルメーターを回してみました。

[追記] 2008/04/23
オプションに "visual" を追加して表示を2種類選択できるようにしました。
左が visual=1 で高速フーリエ変換 (FFT) された後の周波数毎のレベルを加工、
右が visual=2 でFFTしていない生のサウンドデータを元に加工したものです。

サンプル




貼り付けコード

 このプレイヤーを使いたい方はこちらからダウンロード→sothis-mp3player2.swf
<object type="application/x-shockwave-flash" data="http://~/sothis-mp3player2.swf" width="50" height="50" >
<param name="movie" value="http://~/sothis-mp3player2.swf" />
<param name="wmode" value="transparent" />
<param name="FlashVars" value="song=http://~/sample.mp3" />
</object>

プレイヤーと mp3 ファイルの URL は各自のものに書き換えてください。
FlashVars の song= で再生する mp3 ファイルの URL を指定します。
オプションは前回と同じです。(song の末尾に "&" をはさんで追加)
プレイヤーの表示サイズは 50 x 50 ピクセル固定。

 記事の入力欄の見た目に合わせて自動的に改行タグ(<BR/>)が挿入されるブログは、コードの改行をなくして1行にまとめて貼り付けてください。

再生オプション

オプション 内容
song=URL (必須) 再生する mp3 の URL
volume=10 ボリューム 1~10 (デフォルトは10)
repeat=yes リピート再生有効 (デフォルトはリピートなし)
visual=1 1=FFTした周波数毎のレベル / 2=FFTしてない生データ (デフォルトは1)

 スペクトルの表示で SoundMixer.computeSpectrum() を使っているので、クロスドメインのセキュリティ制限で、プレイヤー本体 (swf) と mp3 ファイルを同じディレクトリに配置する必要があります。(別ドメインの場合でも再生はできますが表示は動きません)

ん~なんか動きがイマイチですね。まだまだ修行が足りません・・・

[備考] サンプルで使ってる曲はコレです。

[関連サイト]
 Adobe Open Source - Flex 3 SDK
 FlashDevelop 3.0.0
 Adobe - ActionScript 3 コンポーネントリファレンス


FLASH Video & Sound テクニカルガイド

FLASH Video & Sound テクニカルガイド

  • 作者: 林 拓也
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2007/11/22
  • メディア: 単行本(ソフトカバー)
ActionScript 3.0 プログラミング入門 - for Adobe Flash CS3

ActionScript 3.0 プログラミング入門 - for Adobe Flash CS3

  • 作者: 大津 真
  • 出版社/メーカー: ビー・エヌ・エヌ新社
  • 発売日: 2008/02/23
  • メディア: 単行本
ActionScript 3.0 逆引きクイックリファレンス Adobe Flash CS3対応

ActionScript 3.0 逆引きクイックリファレンス Adobe Flash CS3対応

  • 作者: 田中 康博
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2008/04/29
  • メディア: 単行本(ソフトカバー)

nice!(0)  コメント(0)  トラックバック(0)   » カテゴリー:音楽系ブログパーツ
permalink
trackback
このエントリーをはてなブックマークに追加


iTunes App Store / Mac App Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac





» スポンサーリンク
DMR

サウンドハウス

FlashDevelop+Flex 3 SDKで埋め込みmp3プレイヤーを作ってみました
» 音楽系ブログパーツ 

先週、フリーの Flash 統合開発環境 FlashDevelop と Flex 3 SDK をインストールしてから、埋め込み mp3 プレイヤーをこつこつ作っていて、とりあえず動くものができたので公開してみます。

 Adobe のサイトにある ActionScript 3 リファレンス(←これ便利)とデベロッパーのブログ記事をいろいろ参考にしながら作ったのですが、ノウハウがほぼゼロという状態だったので、いきなりいくつか問題に直面しながらもなんとか仕上げることができました。

とりあえず一発目ということで機能は必要最低限のシンプルなものです。

サンプル




貼り付けコード

 このプレイヤーを使いたい方はこちらからダウンロード→sothis-mp3player.swf
<object type="application/x-shockwave-flash" data="http://~/sothis-mp3player.swf" width="142" height="14" >
<param name="movie" value="http://~/sothis-mp3player.swf" />
<param name="FlashVars" value="song=http://~/sample.mp3" />
</object>

プレイヤーと mp3 ファイルの URL は各自のものに書き換えてください。
FlashVars の song= で再生する mp3 ファイルの URL を指定します。
オプションは volume と repeat があります。(song の末尾に "&" をはさんで追加)
プレイヤーの表示サイズは 142 x 14 ピクセル固定です。

 記事の入力欄の見た目に合わせて自動的に改行タグ(<BR/>)が挿入されるブログは、コードの改行をなくして1行にまとめて貼り付けてください。

再生オプション

オプション 内容
song=URL (必須) 再生する mp3 の URL
volume=10 ボリューム 1~10 (デフォルトは10)
repeat=yes リピート再生有効 (デフォルトはリピートなし)

 スペクトルの表示で SoundMixer.computeSpectrum() を使ったり、アーティスト名と曲のタイトルの表示に Sound.id3 (mp3 ファイルの ID3 タグから取得)を使ったりしているので、クロスドメインのセキュリティ制限で、プレイヤー本体 (swf) と mp3 ファイルを同じディレクトリに配置する必要があります。
(別ドメインの場合でも再生はできますが表示は動きません)

 経験者ならどんなことをやってるかすぐに想像つくと思いますが、この程度のものなら数十行程度のコードで簡単に出来てしまうのが ActionScript 3 のすごいところでもあり面白いところでもありますね。

これを元に少しずつ改良していきたいと思います。

[備考] サンプルで使ってる曲はコレです。

[関連サイト]
 Adobe Open Source - Flex 3 SDK
 FlashDevelop 3.0.0
 Adobe - ActionScript 3 コンポーネントリファレンス


FLASH Video & Sound テクニカルガイド

FLASH Video & Sound テクニカルガイド

  • 作者: 林 拓也
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2007/11/22
  • メディア: 単行本(ソフトカバー)
ActionScript 3.0 プログラミング入門 - for Adobe Flash CS3

ActionScript 3.0 プログラミング入門 - for Adobe Flash CS3

  • 作者: 大津 真
  • 出版社/メーカー: ビー・エヌ・エヌ新社
  • 発売日: 2008/02/23
  • メディア: 単行本
ActionScript 3.0 逆引きクイックリファレンス Adobe Flash CS3対応

ActionScript 3.0 逆引きクイックリファレンス Adobe Flash CS3対応

  • 作者: 田中 康博
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2008/04/29
  • メディア: 単行本(ソフトカバー)

nice!(1)  コメント(0)  トラックバック(0)   » カテゴリー:音楽系ブログパーツ
permalink
trackback
このエントリーをはてなブックマークに追加


米Yahoo!が埋め込みMP3プレイヤーを公開 : Yahoo! Media Player
» 音楽系ブログパーツ 

米Yahoo! が 1/8 (米国時間)に Yahoo! Developer Network 公式ブログ で 1行の JavaScript を組み込むだけで簡単に呼び出せる Yahoo! Media Player を公開開始していました。

 ブログの記事中などのアンカータグ(リンク)に指定されている MP3 ファイルの URL を自動的に探し出して、プレイヤーのプレイリストに登録してくれるというものです。
 プレイヤー本体はページの左下にオーバレイで表示されます。



 細かい部分がチェックしきれていないので若干中途半端ではありますが、設置方法とあわせて紹介します。

設置方法(前準備)

 再生する曲の URL をアンカー(A)タグに指定します。

<a href="http://~/sample.mp3">サンプル曲</a>

 A タグで囲ったテキスト以外に曲のタイトル名を付けたい場合は title 属性を追加します。

<a href="http://~/sample.mp3" title="曲名とか" >サンプル曲</a>

 画像を指定した img タグをアンカータグで囲むと画像がアートワークとしてプレイヤー部に表示されます。記事中に表示したくないときはスタイルに display:none を指定します。

<a href="http://~/sample.mp3" title="曲名とか" ><img src="画像URL" />サンプル曲</a>
<a href="http://~/sample.mp3" title="曲名とか" ><img src="画像URL" style="display:none" />サンプル曲</a>

 このほかにも、アンカータグに MP3 ファイルが設定されている外部のページの URL を指定したり、XSPF 形式で作ったプレイリストを指定することもできます。
 XSPF プレイリストを使うと曲名以外にアーティスト名やアルバム名、アートワーク(画像)をプレイヤー部に表示することができます。詳しくは Yahoo! Media Player public wiki の How To Link で説明されているので、(英語ですが)一読しておくことをおすすめします。

 プレイリストの曲順は基本的にはページの先頭から検索された順に追加されていきますが、任意の曲順にしたい場合は属性の tabindex で曲番号を指定します。

<a href="http://~/sample.mp3" title="曲名とか" tabindex="1" >サンプル曲</a>

設置方法


<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

 前準備ができたら、上記の JavaScript コードを埋め込みます。特定の記事に埋め込むとその記事の MP3 ファイルだけが再生対象になりますが、ブログのトップページで複数の記事が表示されたりする場合は、表示されている記事をまたいで全ての MP3 のリンクが再生対象になって余計な曲まで再生されてしまうので注意が必要です。

設置例

有効な MP3 ファイルのリンクには左端に小さな再生ボタンが付きます。
あわせてページの左下にオーバレイ表示されたプレイヤーが表示されます。

 音楽方丈記サンプル曲

 埋め込むコードは JavaScript だけですが、フラッシュで作られたプレイヤーが内部で間接的に呼び出されて再生を受け持っていると思われます。(オーバレイ表示されているプレイヤーの GUI 部分はフラッシュではないようです)

 上の例のように記事中の MP3 リンクを直接指定するよりも、XSPF のプレイリストを作ってやったほうが多少手間は増えますが使い勝手的にはよいかもしれません。
 オーバレイ表示されるプレイヤーの位置やデザインも含めて好みが分かれそうな仕様ですね。



[追記] 2009/07/19 - Easylistener は現在利用できなくなっています

 ついでに去年の11月に先に公開されているオーソドックスな embed タグを使う埋め込みフラッシュ MP3 プレイヤー Easylistener もあわせて紹介します。



 公式ブログ内に貼り付けウィザードが公開されていて、こちらも簡単に利用することができます。1曲単位の再生から、XSPF/M3U/ASX 形式のプレイリスト対応したり、RSS フィードや外部 Web ページ上にある MP3 リンクでプレイリストが作れたりと、柔軟なプレイリストを作ることができます。

 プレイヤーの外観は Normal、Tall、Thick Bar、Bar、Mini の5種類が用意されていて、カラーも若干ですがカスタマイズできます。

 プレイリストの指定の方法さえ理解すれば、コードの埋め込み方法や使い勝手は一般的な埋め込み MP3 プレイヤーと大差ないので、こっちのほうがサイトを訪れた人には使い方を理解してもらいやすいかもしれません。

[関連サイト]
 Yahoo! Developer Network 公式ブログ
 Yahoo! Media Player
 Yahoo! Media Player public wiki
 Yahoo! Easylistener
 XSPF

nice!(0)  コメント(7)  トラックバック(1)   » カテゴリー:音楽系ブログパーツ
permalink
trackback
このエントリーをはてなブックマークに追加


ブログで使える埋め込みフラッシュMP3プレイヤー (その7)
» 音楽系ブログパーツ 

あけましておめでとうございます。
本年も音楽方丈記をよろしくお願いします。

新年一発目は恒例(?)のシンプルな埋め込みフラッシュプレイヤー紹介の第7弾です。
今回は Hideout XSPF Web Music Player のボタン型プレイヤーを紹介。
 

使用例



プレイヤーのダウンロード

 まず XSPF の SourceForge サイトから、圧縮ファイル button_player-0.1.zip をダウンロードします。解凍したフォルダの中にある musicplayer.swf がプレイヤー本体です。他のファイルは捨ててしまってかまいません。

プレイリストファイルの準備

 今回のプレイヤーは XSPF 形式のプレイリストに対応しているので、プレイヤー本体ファイルと再生する MP3 ファイル以外に XSPF 形式のプレイリストファイル(拡張子は .xspf 推奨)を作成する必要があります。XSPF フォーマットの詳しい仕様はこちらで確認してください。

プレイリストファイル(XSPFファイル)の作成例
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
    <trackList>
        <track>
            <location>http://~sample.mp3</location>
        </track>
    </trackList>
</playlist>
(複数曲の場合は <track>~</track> の部分を増やしてください)

設置方法

 各ファイルを任意の Web サーバにアップロードします。ブログサーバに置けない場合は別の Web サーバにアップロードする必要があります (直接ファイルにアクセスできないオンラインストレージは不可)
 プレイヤー本体 (SWF) と MP3 ファイル、プレイリスト(XSPF) は別のサーバにおいても構いません。

<object type="application/x-shockwave-flash" data="http://~/musicplayer.swf?playlist_url=http://~/playlist.xspf" width="17" height="17" >
<param name="movie" value="http://~/musicplayer.swf?playlist_url=http://~/playlist.xspf" />
</object>

 上記のコードをブログに貼り付けます。プレイヤーの色の変更はできません。サイズは 17 x 17 ピクセル固定です。

 各ファイルの URL (反転部分)は各自のものに変更してください。記事の入力欄の見た目に合わせて自動的に改行タグ(<BR/>)が挿入されるブログは、貼り付けコードの改行をなくして1行にまとめて貼り付けてください。


[追記] 2009/05/24

ポップアップメニューの項目を減らしたバージョン

 ソースコードが付いていたので、プレイヤーを右クリックしたときに表示されるポップアップメニューの「Download」と「Add song to Webjay playlist」がないバージョンを作ってみました。

 右クリックの「対象をファイルに保存」でダウンロード→ musicplayer_011.swf

 実行サンプル

[追記] 2009/10/07

ポップアップメニューの項目を減らしたバージョン (その2)

 ボタンタイプといっしょに公開されている Slim タイプと Extended タイプでポップアップメニューの「Download」と「Add song to Webjay playlist」がないバージョンも作ってみました。右クリックの「対象をファイルに保存」でダウンロードしてください。

 Slim タイプ →xspf_player_slim.swf
 Extended タイプ →xspf_player.swf

[関連サイト]
 Hideout XSPF Web Music Player (musicplayer.sourceforge.net)
 xspf XML Shareable Playlist Format Home (www.xspf.org)
nice!(0)  コメント(27)  トラックバック(2)   » カテゴリー:音楽系ブログパーツ
permalink
trackback
このエントリーをはてなブックマークに追加


かわいいクマさんの埋め込みフラッシュmp3プレイヤー : MyFlashFetish.com
» 音楽系ブログパーツ 

今回はいつものシンプルプレイヤーシリーズではないのですが、動きがなんだかちょっとかわいかったので取り上げてみました。(某リラッ●●に似ている云々はとりあえずスルーで)

 MyFlashFetish.com で提供されているパーツのひとつで、無料で作成することができます。サイト上でウィザード形式で作れるので HTML タグの詳しい知識がなくても簡単に利用できます。

 利用は無料ですが、最終的に埋め込みコードを取得するにはアカウントの登録が必要です。アカウントを登録しなくてもプレビュー表示は可能なので、テスト的に mp3 を指定して再生してみたり、色を変えて見栄えを確認できます。

 フラッシュのファイル(SWF)本体は、MyFlashFetish.com のサーバに置かれているので、置き場所を用意する必要はありません。再生する mp3 ファイルのほうは別のサーバにアップロードして事前に用意しておく必要があります。

 このプレイヤー以外にも(どれもちょっと大きめですが)ラジカセ風や iPod 風など個性的なプレイヤーが揃っているので、いろいろ試してみるとよいかも。

ちなみにサンプルで使っている曲は以前にコンテストのために作ったリミックスです。

[関連サイト]
 MyFlashFetish.com


キャラチューン リラックマ

キャラチューン リラックマ

  • 出版社/メーカー: タカラトミー
  • メディア: おもちゃ&ホビー
nice!(0)  コメント(3)  トラックバック(1)   » カテゴリー:音楽系ブログパーツ
permalink
trackback
このエントリーをはてなブックマークに追加


前の5件 | 次の5件
音楽系ブログパーツ