忍者ブログ
音楽制作、Webデザイン(HTML,CSS,JavaScript)、プログラミング(Java,C,PHP)、日常の話題を集める「情報ターミナル」
ブログ内検索
アンケート実施中です
Creative Commons
クリエイティブ・コモンズ・ライセンス
当ブログのすべての コンテンツは クリエイティブ・コモンズ 表示 - 非営利 - 継承 2.1 日本 ライセンスの下に利用可能です。 他サイトからの引用につきましては、引用元サイトの権利に準拠します。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

この記事は役に立ちましたか?あなたの1クリックに励まされます!              

音楽プレイヤー

これまで音楽プレイヤーを設置するのには、ユーザにプラグインをインストールしてもらわなきゃいけなかったけど、HTML5では音楽などの複数のメディアの埋め込み用タグが用意されているよ。それを利用してHTMLに音楽プレイヤーを埋め込む事ができる。
というわけで、jQueryとHTML5,CSS3を用いた音楽プレイヤーの作り方のチュートリアルを紹介。
ちょっとおしゃれな自作音楽プレイヤーで音楽を公開してみてはいかが?


今回作る音楽プレイヤーはMediaElement.jsというJavaScriptの機能を使ってCSS3でデザインする形。
このMediaElement.jsっていうのはHTML5用の音楽・動画プレイヤーなんだけど、古いブラウザーでもFlashとSilverlightを使ってHTML5のMediaElement APIの機能をマネすることで動かす事が出来るらしいよ。
すごいよね。じゃあ、始めよう。
(※ボリュームバー等のための画像ファイル、アルバムカバー画像ファイル、音楽ファイルは適宜用意を)


Step1. MediaElement.jsをダウンロードするよ

まずは何より"MediaElement.js"が必要なのでダウンロードして、必要なファイルを抜き出すよ。
「build」っていうフォルダの中の、
  • flashmediaelement.swf
  • mediaelement-and-player.min.js
  • silverlightmediaelement.xap
という3つのファイルをコピー。で、「js」っていうフォルダを作ってこの3つを貼付けてしまっておく。



Step2. HTMLを書いていくよ

それじゃ、機能を使うためにJQuelyライブラリにリンクしないといけないのでHTMLに書いていこう。Googleとかのホストにつなぐんだけど、もし自分のローカルホストにライブラリがある場合はそこでもOK。
headタグの中でCSSにリンクするように、"mediaelement-and-player.min.js"というスクリプトにリンクするよ。jQueryライブラリ、CSS、medeaelement-and-player.jsの3つ全部をhead内で呼び出すよ。

<head>
<title>Audio Player</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="css/style.css" media="screen">
</head>
こんな感じだね。

じゃ、ここから音楽プレイヤーになる部分を作っていくよ。音楽プレイヤーは「audio-player」っていうクラス名をつけた<div>タグをHTML文書内に追加して作るよ。

<div class="audio-player">
<h1>Demo - Preview Song</h1>
<img class="cover" src="img/cover.png" alt="">
<audio id="audio-player" src="demo.mp3" type="audio/mp3" controls="controls"></audio>
</div>
こんな感じだね。

シンプルだよね!<audio>っていうのがHTML5の新しいタグだね。
でも、もう一手間必要。JavaScriptのコードを</body>直前に記述するよ。他のタグで囲まないようにね。

<script>
$(document).ready(function() {
$('#audio-player').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause','volume','progress'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
</script>
こんな感じだね。書けたかな?

ここまでちゃんとできているとこうなるよ。

なんだこりゃーって感じだね。デザインしてないからね。これからデザインしてスタイルを整える作業に入っていくよ。ここからが本番だね。というわけで、HTMLはこれで完成。



Step3. コンテナのスタイルを作るよ

CSSファイルに記述していくよ。じゃあ、とりあえずお約束のフォーマットそろえ作業から。まとめて余白とかを0に設定して、ブラウザごとの表示の違いをなくすとかそういう意味で行う。って聞いてるよ。

.audio-player,
.audio-player div,
.audio-player h1,
.audio-player a,
.audio-player img,
.audio-player span,
.audio-player button {
margin: 0;
padding: 0;
border: none;
outline: none;
}

一気にね。
そしたら、プレイヤーの大きさなどを設定。幅400px、高さ120pxにするよ。

div.audio-player {
position: relative;
width: 400px;
height: 120px;
 
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
 
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

あとは、色を設定しているね。gradientはいわゆるグラデーションで、border-radiusは角丸。両方ともCSS3の新機能だね。
ここまでできると、こういう感じになるよ。



ちょっと方向性は見えてきたけど、位置が変だね。



Step4. 曲タイトルとアルバムカバーを整えるよ

曲タイトルとアルバムカバーの表示の位置とデザインを設定していくよ。曲の顔だね。
.audio-player h1 {
position: absolute;
top: 37px;
left: 165px;
 
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
color: #ececec;
text-shadow: 1px 1px 1px rgba(0,0,0, .5);
}
 
.audio-player .cover {
position: absolute;
top: 0;
left: 0;
}

この記述をすると、こんな風になるよ。


それらしくなってきたけど、プレイヤー??って感じだね。



Step5. コントロールボタンをつくるよ

じゃあ、音楽プレイヤーのコントロール(再生/一時停止、ミュートon/ミュートoff)のボタンを整えていくよ。
まずは一般的なボタンを作って、それから幅や高さを直していこう。
「再生/一時停止」ボタンと「ミュートon/ミュートoff」ボタンを同じ位置に配置して、クリックによってアクションが起こるようにするよ。

.mejs-controls .mejs-button button {
cursor: pointer;
display: block;
position: absolute;
text-indent: -9999px;
}
 
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
width: 21px;
height: 21px;
top: 35px;
left: 135px;
background: transparent url(../img/play-pause.png) 0 0;
}
 
.mejs-controls .mejs-pause button { background-position:0 -21px; }
 
.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
width: 14px;
height: 12px;
top: 70px;
left: 140px;
background: transparent url(../img/mute-unmute.png) 0 0;
}
 
.mejs-controls .mejs-unmute button { background-position: 0 -12px; }
書けたかな?

この時点でのプレイヤーはこんな感じだよ。




Step6. ボリュームスライダーをつくるよ

音量がバー状のスライダーで調節できるようにしよう。はじめにスライダーの場所を指定したら、幅を200px、高さを8pxにするよ。それから、背景色、影、角丸も設定していこう。

.mejs-controls div.mejs-horizontal-volume-slider {
position: absolute;
top: 71px;
left: 165px;
cursor: pointer;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 200px;
height: 8px;
background: #212227;
 
-webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
-moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
 
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

それから、 「現在の音量」についても設定しないといけないね。そのためにはカスタムした背景画像、角を丸める、とかいろいろする必要があるので書いていくよ。

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute;
width: 0;
height: 6px;
top: 1px;
left: 1px;
background: url(../img/volume-bar.png) repeat-x;
 
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

ふー。ここまでやるとこうなるよ。

それっぽい!バーがあるだけでそれっぽくなるねー。でも、さらにカスタマイズしていくよ。



Step7. プログレス・バーをつくるよ 

曲がここまで進んだよっていうのを視覚的にわかるようにするバーだね。

.mejs-controls div.mejs-time-rail { width: 400px; }
 
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
width: 400px;
height: 5px;
left: 0;
bottom: 0;
cursor: pointer;
 
-webkit-border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
 
.mejs-controls .mejs-time-rail .mejs-time-total { background: #999999; }
 
.mejs-controls .mejs-time-rail .mejs-time-loaded {
width: 0;
background: #cccccc;
}
 
.mejs-controls .mejs-time-rail .mejs-time-current {
width: 0;
background: #64b44c;
}
書けたかい。

ここまでできたら、こんな感じになるよ。


おお〜。限りなく完成に近いね。もう少し!



Step8. プログレスバーと音量バーにハンドルをつけるよ

調節するときに取っ手みたいなとこがあったほうがわかりやすい。ということで、ハンドルをつけるよ。

.mejs-controls .mejs-time-rail .mejs-time-handle,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
position: absolute;
display: block;
width: 12px;
height: 14px;
top: -4px;
background: url(../img/handle.png) no-repeat;
}
 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { top: -2px; }

ここまでできたら、こんな感じになるよ。



あともう少し。



Step9. 時間表示の設定をしたら完成!

最後に、時間表示の機能をつけよう。

.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
display: none;
width: 33px;
height: 23px;
top: -26px;
margin-left: -17px;
background: url(../img/time-box.png);
}
 
.mejs-controls .mejs-time-rail .mejs-time-float-current {
width: 33px;
display: block;
left: 0;
top: 4px;
 
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #666666;
text-align: center;
}
こんな感じだね。


完成!



プレビューはこちら
ファイルダウンロードはこちら

(元記事:「How to Create an Audio Player in jQuery, HTML5 & CSS3 [Tutorial]」)
PR

この記事は役に立ちましたか?あなたの1クリックに励まされます!              

この記事にコメントする
お名前
タイトル
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
[39]  [37]  [36]  [35]  [34]  [33]  [30]  [29]  [28]  [27]  [26
  • :
  • :


お役に立てました?
よろしければ応援の1clickをお願いします(*^^*)




blogramのブログランキング

にほんブログ村 デザインブログ Webデザインへ


ブログランキング・にほんブログ村へ
順位はこちら。
いつもありがとうございます。
忍者AdMax

ローテックな最先端 Produced by たんたん      Designed by ninja-blog.com
忍者ブログ [PR]
Related Posts Plugin for WordPress, Blogger...