今回からは、PC向けに表示するplayer-block
のリストを取り扱います。以下は、消音と音量バーに関する処理です。
HTML側の実装
<!-- アイコンのリスト -->
<ul class='player-block'>
<!-- 消音アイコンを格納 -->
<li class='player-block-btn-volume'>
<!-- 消音アイコン -->
<button class='player-volume'>
<span class='glyphicon glyphicon-volume-up'></span>
</button>
<!-- 消音アイコンのポップアップテキスト -->
<span class='player-popup'>消音</span>
</li>
<!-- 音量バーを格納 -->
<li class='player-block-volume'>
<!-- 音量バー -->
<input class='player-volume-bar' type='range' value='1' min='0' max='1' step='0.1'>
</li>
<!-- 他の要素は省略 -->
・・・
</ul>
type="range"
属性に関してはスライドバーの記事で取り上げています。また、audio
要素のvolume
属性の取る値が0.0
から1.0
なので、音量バーの方もそれに合わせています。
Javascript側の実装
//イベント登録
setEvent: function() {
//消音アイコンのクリックイベント登録
$('.player-volume').on('click', function() {
player.mute(this);
});
//IEと他のブラウザでそれぞれ対応したイベントを適用
var event = this.ie ? 'change' : 'input';
//音量バーのイベント登録
$('.player-volume-bar').on(event, function() {
player.volume(this);
});
//他の処理は省略
・・・
},
IEの判定に関しては、こちらの記事で取り上げています。
下記は、消音アイコンのイベントから呼び出される関数です。
/* 消音アイコンの処理
* 引数 element 消音アイコンの要素
*/
mute: function(element) {
//音量が 0なら処理を中断
if (!this.volumeSaved) return;
//消音オプションの真偽を切り替え
var mute = !this.option.mute;
this.option.mute = mute;
//曲が格納されていれば消音の真偽を代入
if (this.track) this.track.muted = mute;
//消音が真であれば 0を、偽であれば保存しておいた音量をバーに代入
var volume = mute ? 0 : this.volumeSaved;
$('.player-volume-bar').val(volume);
//消音アイコンの要素を抽出
var $icon = $(element).children('.glyphicon');
//消音の真偽でアイコンを切り替え
$icon.toggleClass('glyphicon-volume-up', !mute);
$icon.toggleClass('glyphicon-volume-off', mute);
},
toggleClass()
は、第一引数にクラスを指定します。第二引数を省略すると、要素に対してクラスの付与または削除の切り替えを行いますが、どちらか一方を明示する場合は、その真偽を第二引数に指定します。
最後に、音量バーのイベントから呼び出される関数です。
/* 音量バーの処理
* 引数 element 音量バーの要素
*/
volume: function(element) {
//音量バーから数値を抽出
var volume = element.valueAsNumber;
//プレーヤーに音量の値を保存
this.volumeSaved = volume;
//消音オプションに真偽を代入
this.option.mute = !volume;
//曲が格納されていれば音量と消音の有無を代入
if (this.track) {
this.track.volume = volume;
this.track.muted = this.option.mute;
}
//消音アイコンの要素を抽出
var $icon = $('.player-volume .glyphicon');
//音量の有無でアイコンを切り替え
$icon.toggleClass('glyphicon-volume-up', !!volume);
$icon.toggleClass('glyphicon-volume-off', !volume);
},
toggleClass()
に関して、第二引数に数値を直接代入しても問題ないと思いますが、念の為に!!
などの指定で、数値を真偽に変換しています。
URL: ringil-music.com
ライブラリ: Bootstrap 3・JQuery 1.12.4