Webページで音楽(mp3)を再生する

埋め込み型 MP3 Player いろいろ

2014年02月24日(更新)

Flash MP3 Playerはたくさん公開されていますが、その中から個人的な好みで、音量調整ができるものを条件にいくつか選んでみました。
Zanorg Playerr以外は複数ファイルの連続再生が出来ます。
再生ファイルの指定はタグ内に記述するものと、外部ファイルに記述するものがあります。

Zanorg Player

MP3 Player

EMFF Player

XSPF Player

Audio Player

sample02.mp3

HTML5 audioタグ

Zanorg Radio - http://radio.zanorg.com

このサイトからプレーヤー zplayer.swf をダウンロードしてください(右クリックから保存)。

配布先のサイトで、プレーヤーの色や再生するファイルなどを指定したら、CODEをコピーし埋め込みたいHTMLに貼り付けます。

audio
├ index.html
├ zanorg_player
│   └ zplayer.swf
└ mp3
     └ sample01.mp3

タグ内に全てを記述するタイプです。

HTML コード

<object type="application/x-shockwave-flash" data="zanorg_player/zplayer.swf?mp3=mp3/sample01.mp3&c1=808080&c2=d3d3d3&down=0&vol=25&autoplay=0" width="200" height="20">
<param name="movie" value="zanorg_player/zplayer.swf?mp3=mp3/sample01.mp3&c1=808080&c2=d3d3d3&down=0&vol=25&autoplay=0">
<param name="quality" value="high">
<param name="wmode" value="transparent">
</object>

MP3 Player - http://flash-mp3-player.net

MP3 Player のMULTIタイプです。Downloadページから player_mp3_multi.swf をダウンロードしてください(右クリックから保存)。
Generatorページで各種の設定が出来ます。設定が終わったらHTMLコードをコピーしHTMLファイルに貼り付けます。次にContent of the configuration text fileの内容をコピーし、テキストエディタの新規ファイルに貼り付け、playlist.txtの名前で保存します。(configuration XML file も使い方は同じですが、ここでは記述が楽なtext fileを使います)
Generatorの使い方がよく分からない場合は、このサンプルを使ってください。

audio
├ index.html
├ mp3player
│   ├ player_mp3_multi.swf
│   └ playlist.txt
└ mp3
     ├ sample01.mp3
     └ sample02.mp3

HTML コード

<object type="application/x-shockwave-flash" data="mp3player/player_mp3_multi.swf" width="200" height="20">
<param name="movie" value="mp3player/player_mp3_multi.swf">
<param name="FlashVars" value="config=mp3player/playlist.txt">
<param name="quality" value="high">
<param name="wmode" value="transparent">
</object>

param name="FlashVars" value="config=mp3player/playlist.txt" でプレイリストを指定しています。

playlist.txt (保存文字コード:utf-8)

mp3ファイル名とタイトルは [ | ] バーティカルバーで区切って並べます。
showlist=0 ここを showlist=1 にすると再生リストが表示されます。その場合はHTMLコードの height="20" も変更してください。
詳細は Documentation のページを参照してください。


EMFF (Easy Musicplayer For Flash) - http://emff.sourceforge.net

このサイトから emff_0.5.8.zip をダウンロードしてください。ダウンロードしたzipファイルを解凍すると、toolフォルダにcodegeneratorとplaylistgeneratorが入っているので、それを利用してHTMLコードとプレイリストを作成してください、ということのようです。
プレーヤー本体はskinsフォルダに入っています。ここではemff_lila_info.swfを使います。

audio
├ index.html
├ emff_player
│   ├ emff_lila_info.swf
│   └ playlist.xml
└ mp3
     ├ sample01.mp3
     └ sample02.mp3

HTML コード

<object type="application/x-shockwave-flash" data="emff_player/emff_lila_info.swf" width="200" height="55"> 
<param name="movie" value="emff_player/emff_lila_info.swf"> 
<param name="FlashVars" value="playlist=emff_player/playlist.xml&autoload=yes&autostart=no&volume=25">
<param name="quality" value="high">
<param name="wmode" value="transparent">
</object>

playlist.xml

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<location>mp3/sample01.mp3</location>
<title>Collage of sand</title>
<creator>Free BGM -MusMus</creator>
</track>
<track>
<location>mp3/sample02.mp3</location>
<title>Collage of the moon</title>
<creator>Free BGM -MusMus</creator>
</track>
</trackList>
</playlist>

<track>~</track>までが1曲分です。


2013年11月21日更新

xspf_player_v4.2
- XSPF-Players

こちらから xspf_player.swf をダウンロードしてください。このxspf_player.swfがプレーヤーファイルです。いろいろ出来るようなのですが試していません。説明を読むのがちょっと面倒くさい。ということで、かなりシンプルな使い方ですが・・・

audio
├ index.html
├ xspf_player
│   ├ xspf_player.swf
│   └ playlist.xspf
└ mp3
     ├ sample01.mp3
     └ sample02.mp3

HTML コード

<object type="application/x-shockwave-flash" width="87" height="17" data="xspf_player/xspf_player.swf?&counter=off&playlist_url=xspf_player/playlist.xspf&volume_level=25">
<param name="movie" value="xspf_player/xspf_player.swf?&counter=off&playlist_url=xspf_player/playlist.xspf&volume_level=25">
<param name="quality" value="high">
<param name="wmode" value="transparent">
</object>

playlist.xspf (拡張子に注意)

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<location>mp3/sample01.mp3</location>
</track>
<track>
<location>mp3/sample02.mp3</location>
</track>
</trackList>
</playlist>

<track>~</track>までが1曲分です。

再生リスト・画像付き

<object data="xspf_player/xspf_player.swf?&playlist_url=xspf_player/playlist2.xspf&player_mode=small&counter=off&bottom_controls=off&autoload=1&volume_level=25" type="application/x-shockwave-flash" width="200" height="86">
<param name="movie" value="xspf_player/xspf_player.swf?&playlist_url=xspf_player/playlist2.xspf&player_mode=small&counter=off&bottom_controls=off&autoload=1&volume_level=25">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="xspf_player/xspf_player.swf?&playlist_url=xspf_player/playlist2.xspf&player_mode=small&counter=off&bottom_controls=off&volume_btn=off" quality="high" wmode="transparent" type="application/x-shockwave-flash" width="200" height="86"></embed>
</object>
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="0" xmlns = "http://xspf.org/ns/0/">
<trackList>
<track>
<location>mp3/sample01.mp3</location>
<creator></creator>
<title>TITLE 01</title>
<album></album>
<info></info>
<image>xspf_player/img01.jpg</image>
<playtime></playtime>
</track>

<track>
<location>mp3/sample02.mp3</location>
<creator></creator>
<title>TITLE 02</title>
<album></album>
<info></info>
<image>xspf_player/img02.jpg</image>
<playtime></playtime>
</track>
</trackList>

</playlist>

XSPF Playerにはいろいろなバージョンがありますが、日本語の曲名表示をするときなどには、このyas.mu版xspf_playerが良さそうです。(追記:2015.01.05)
 → XSPF Web Music Player(xspf_player)で日本語を表示+α


横幅を狭めると何故かコントロールボタンが効かなくなる

WordPress Audio Player - http://wpaudioplayer.com

ここにある Standalone version を利用します。 Standalone player (audio-player-standalone.zip) をダウンロードしてください。使うのは player.swf と audio-player.js です。

このプレーヤーは設定にJavascriptを使っています。Javascriptは全て外部ファイルにしました。

audio
├ index.html
├ audioplayer
│   ├ player.swf
│   ├ audio-player.js
│   ├ player_setup.js
│   └ playlist.js
└ mp3
     ├ sample01.mp3
     └ sample02.mp3

player_setup.js (新規作成)

AudioPlayer.setup("audioplayer/player.swf", {
width:290,
initialvolume:25
});

playlist.js (新規作成)

AudioPlayer.embed("audioplayer_1",{
soundFile:"mp3/sample02.mp3,mp3/sample01.mp3",
titles: "Collage of the moon,Collage of sand",
artists: "Free BGM -MusMus,Free BGM -MusMus"
});

ファイル、タイトル、アーチストは[ , ] カンマで区切って並べます。
audioplayer_1 の部分はプレーヤーの識別なので、HTMLの記述 id="audioplayer_1" と合わせます。

HTML

<!-- head 内 -->
<script type="text/javascript" src="audioplayer/audio-player.js"></script>
<script type="text/javascript" src="audioplayer/player_setup.js"></script>

<!-- body 内 -->
<p id="audioplayer_1">代替要素</p>
<script type="text/javascript" src="audioplayer/playlist.js"></script>

複数設置するときはplaylistを作成し、識別用のid(値)を変えて設置してください。

sample01.mp3

2015年10月17日更新

プレーヤーのデザインはブラウザ独自のようです。
プレーヤーのデザイン
格好良いのもあれば・・・、いろいろです。

<audio preload="auto" controls>
<source src="mp3/sample01.mp3">
<source src="mp3/sample01.ogg">
必要があればここに代替要素
</audio>

javascriptでコントロールする

» こちらをご覧ください

お願い


このページの音楽はこちらでお借りしました。
© フリーBGM・音楽素材MusMus

※このページは制作途中です。諸般の事情で消滅するかもしれません。


ページトップへ ページトップへ

ページトップへ