HTML5でMP3ファイルをWEBサイトで表示して再生できるようにする

HTML5でMP3ファイルをWEBサイトで表示して再生できるようにする
このエントリーをはてなブックマークに追加
PR

HTML5では簡単にMP3ファイルを埋め込むことが出来ます
再生用のインターフェイスも自動で作ってくれます

HTML5には、audioタグが追加されました
このタグを使ってMP3ファイルを読み込ませるだけでWEBサイトに音楽プレイヤーが出来ます

DEMO


Music By 魔王魂
http://maoudamashii.jokersounds.com/

audioで使えるパラメータ

パラメータを指定することで動作を制御する事が出来ます srcにファイルのリンク(パス)

<audio src="bgm.mp3" controls autoplay loop preload="none"></audio>

 

自動再生
autoplay

音声ファイルを自動で再生させます

 

リピート
loop

音声ファイルをリピート再生、ループ再生させます

 

プリロード
preload=””

音声ファイルをページが表示された時に事前に読み込ませます
auto none metadata の3つの値を入れます

 

インターフェイス
controls

インターフェイスを表示させます

背景を消せばBGMにもつかえるし、画像を扱うかのように音声ファイルをWEBページで使えます
音楽系のサイトをしている人のは重宝するのではないかと思います

またwaveとかと違ってMP3は軽量な音声ファイルなので取り扱いやすいのもポイントです

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)