主な改良点は以下の2点。まずはサンプルでご確認ください。
HTML5 Audio Playerサンプル
まず、ボリューム機能ですが、スライダーを左右に動かすと、再生中の曲のボリュームを変更できるようになっています。それからボタンに関して言うと、「再生」ボタンを押すと曲が再生されるのと同時に「一時停止」ボタンに切り替わり、さらに「一時停止」ボタンを押すと曲が一時停止されるのと同時に「再生」ボタンに切り替わるようになっています。(使っている曲は私の10年前に作ったデモ曲となります。何卒ご了承ください…)
それでは、さっそく解説に入ります。必要に応じて『HTML5のaudio要素とJavaScriptで作るオーディオプレイヤー』も参考にしてください。
ボリューム機能の実装
ボリューム機能の実装は以下の通りです。まずHTML側でボリューム用のスライダーを作り、JavaScript側でスライダーの値を取得してAudio要素のvolumeプロバティにセットして制御します。
スライダーの作成
まずスライダーを何で作ろうかと悩んだんですが、ちょうど現バージョンのFirefox 23でも対応がなされた「input要素のtype=”range”」を使ってみることにしました。type=”range”はすでにFirefox以外の主要ブラウザでは対応済みとなっているので、今回のFirefoxの実装でほぼ問題なく使えるようになっています。
実装は以下の通りです。ボリュームの最小値と最大値を、それぞれmin属性、max属性で指定しています。それからボリュームの初期値はvalue属性で指定しています。
上のソースをブラウザで表示すると以下のように表示されます。
スライダーの値の取得と、Audio要素のvolumeプロパティへの指定
スライダーを作ったら、次はスライダーで指定した値を取得し、Audio要素のvolumeプロパティにセットするようにします。
スライダーの値の取得は「change」イベントを使って取得します。
値は、input要素をgetElementByIdを使ってオブジェクトに返し、valueプロバティで取得します。その際にAudio要素のvolumeプロバティに指定できる値が0〜1までとなっているので、取得した値を1以下の数値に変更してあげる必要があります。今回は0〜99までの数値を取得するようにしているので、以下のように取得した値が1桁であれば「0.0」を、それ以外であれば「0.」を値の前につけてあげるようにします。
取得した値を以下のようにしてAudio要素のvolumeプロパティにセットします。
上記まとめると以下のようになります。
参考にしたサイトは以下となります。
再生/一時停止ボタンの一体化の実装
前回のオーディオプレイヤーでは、それぞれ「再生」「一時停止」「停止」ボタンは独立して設置していました。今回は利便性を考えて、「再生」ボタンと「一時停止」ボタンを交互に切り替えるようにしました。それから「停止」ボタンは見せ方を変えて「スタートに戻る」ボタンとしました。
ボタンのデザイン
ボタンはCSS3を使ってデザインしています。アイコンはFont Awesomeを使っています。Font Awesomeはご存知の方も多いと思いますが、簡単に言えば「Webフォントのようなアイコン」となります。CSSでアイコンの色やサイズなどをコントロールすることができます。詳細はFont Awesomeのサイトをご参照ください。
まずHTML部分は以下の通りです。Font Awesomeのアイコンをspan要素で囲んでいます。(i要素のclass属性の値を変更することでアイコンを切り替えることができるようにしています。)
次にCSSの部分は以下の通りです。特記すべきところとしては、「border-radius: 50%;」として指定要素を丸くしています。それから「background-image: linear-gradient(-45deg, #e7e7e7 50%, #fff 50%, #fff);」として斜めの2色背景を実現させています。
上のソースをブラウザで表示すると以下のように表示されます。
ボタンの切り替え処理の実装
ボタンの切り替えは、関数を作り、その関数を実行した際に上記のHTMLのボタンのspan要素のid属性とアイコンのi要素のclass属性を変更するようにしています。
上記の基本パターンを元に、以下のような関数を作成しています。引数の値によって、処理を切り替えるようにしています。
関数の実行
あとは上記で作成した関数を、状況に応じて実行させてあげます。今回は「ボタンが押されたとき」「曲が選択された時」「曲が終了した時」に実行するようにしています。
ここで特殊なイベントとして「曲が終了した時」のイベントの所得方法を紹介しておきます。曲の終了は「ended」イベントで取得することができます。
参考にしたサイトは以下となります。
まとめると
全体のソースは以下のようになります。今回紹介した部分はコメントをつけてあります。
HTML
JavaScript
CSS
まとめ
HTML5 Audioを試していますが、いろんな機能が実装ができてなかなか面白いです。今後は余裕があれば、「早送り」や「巻き戻し」機能だったり、「速度」や「ピッチ」の変更機能、音楽ファイルのリスト化なんかも試してみようと思っています。
コメント