オリジナルの音楽再生ボタン audio.js
audio.jsで試聴ボタンを作ってみました。
これの便利な点は、パーツを一つ一つclass指名してあるため、cssだけでほぼカスタマイズが如何様にもできること。
よくある横長の再生バー的なものは使いたくなかったので、いらないパーツは none して、ごくごくシンプルなかわいいボタンを作りました。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>audio.js</title> <link rel="stylesheet" href="css/style-audiojs.css"> ←内容は下記参照 <script src="js/audio.min.js"></script> ←ダウンロードしたjsファイル <script> audiojs.events.ready(function() { audiojs.createAll(); }); </script> </head> <body> <audio src="audio/a01.mp3" preload="auto"> </body> </html>
@charset "utf-8"; /* CSS Document */ .audiojs audio { } /* プレイヤー(再生バー) */ .audiojs { width: 80px; height: 28px; background: none; overflow: hidden; font-family: monospace; font-size: 12px; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; } /* 再生・停止ボタン */ .audiojs .play-pause { width: 26px; height: 26px; padding: 0; margin: 0; float: left; overflow: hidden; border: 1px solid #3A3A3A; border-radius: 14px; } /* 再生・停止ボタンなどの p 要素 */ .audiojs p { display: none; width: 26px; height: 26px; margin: 0px; cursor: pointer; } .audiojs .play { display: block; } /* 進行状態・ロードの状態を表示する部分(グレー) */ .audiojs .scrubber { position: relative; float: left; width: 40px; background: #5a5a5a; height: 4px; margin: 12px 0 0 0px; border-top: 0; border-left: 0px; border-bottom: 0px; overflow: hidden; } /* 進行状態を表示するバーの部分(薄いグレー) */ .audiojs .progress { position: absolute; top: 0px; left: 0px; height: 4px; width: 0px; background: #3A3A3A; z-index: 1; /* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc)); background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); */ } /* ロード状態を表示するバーの部分(黒) */ .audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 4px; width: 0px; background: #DDDDDD; /* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222)); background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); */ } /* 現在の再生時間/総再生時間 フォント */ .audiojs .time { float: left; height: 28px; line-height: 28px; margin: 0px 0px 0px 8px; padding: 0px 0px 0px 0px; border-left: none; color: #666; text-shadow: none; display: none; } /* 現在の再生時間 フォント */ .audiojs .time em { padding: 0px 2px 0px 0px; color: #666; font-style: normal; display: none; } /* 時間 /の部分 */ .audiojs .time strong { padding: 0px 0px 0px 2px; font-weight: normal; display: none; } .audiojs .error-message { float: left; display: none; margin: 0px 10px; height: 26px; width: 200px; overflow: hidden; line-height: 26px; white-space: nowrap; color: #fff; text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; } .audiojs .error-message a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; } /* 再生ボタン */ .audiojs .play { background: url(../img/play-btn1.svg) center center no-repeat; ←playボタン margin-left: 1.45px; } /* 読み込み中ボタン */ .audiojs .loading { /*background: url("$1") center center no-repeat;*/ display: none; } /* エラーボタン */ .audiojs .error { /*background: url("$1") center center no-repeat;*/ display: none; } /* 停止ボタン */ .audiojs .pause { background: url(../img/pause-btn1.svg) center center no-repeat; ←pauseボタン } .playing .play, .playing .loading, .playing .error { display: none; } .playing .pause { display: block; } .loading .play, .loading .pause, .loading .error { display: none; } .loading .loading { display: block; } .error .time, .error .play, .error .pause, .error .scrubber, .error .loading { display: none; } .error .error { display: block; } .error .play-pause p { cursor: auto; } .error .error-message { display: block; } /* 再生している曲の情報 */ .track-details { clear: both; height: 26px; width: 200px; padding: 0px 6px; background: #FFF; color: #3A3A3A; font-size: 10px; line-height: 26px; } .track-details:before { content: '♬ Now Playing: '; }
cssは audio.min.js の中にある記述をそのままコピペし、stylesheetとして保存して読み込むことにしました。
注釈を入れて、使わない項目は none にして、カスタマイズ。
playボタンとpauseボタンはIllustratorで作りsvg(またはpng)保存。
参考にしたサイト
audio.js(本家 ダウンロード)
http://kolber.github.io/audiojs/
audio.js を使ってみる(参考にしたサイト 助かりました)
http://www.webdesignleaves.com/wp/jquery/490/
気になる・後で読む
MP3を再生するjavascript(audio.js)のメモ
http://qiita.com/hyper_stereo/items/ffc2c4c39a533b73b935
動画・音楽再生 jQuery プラグイン「jPlayer」を使う
http://d.hatena.ne.jp/scientre/20110103/jquery_jplayer
音声スタイルシート
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/aural.html