Ignite UI 是Infragistics開發(fā)的一款高級jQuery HTML5 UI框架，它下面有一個非常好用的控件：線性儀表(Linear Gauge)。今天就跟大家演示一下如何用這個控件制作一個jQuery音樂播放器。

首先，我們需要一些HTML標(biāo)簽來表示播放器的元素，這里用的是HTML5 audio tag：

&ltaudio src="/Music/song.mp3">&lt/audio>

接下來設(shè)置播放器的基礎(chǔ)部分。我們需要播放/暫停按鈕、音量按鈕和進(jìn)度條。這里用了一些CSS樣式來定義這些元素：

&ltdiv class="musicPlayer">
&ltdiv class="buttons">
&lta class="playpause" href="#">
&ltspan class="ui-icon ui-icon-play">&lt/span>
&ltspan class="ui-icon ui-icon-pause">&lt/span>
&lt/a>
&lt/div>
&ltspan class="currenttime">&lt/span>
&ltdiv id="linearGauge">&lt/div>
&ltspan class="duration">&lt/span>
&ltdiv class="volume-container">
&ltdiv class="volume">
&lta href="#" >
&ltspan class="vol ui-icon ui-icon-volume-on">&lt/span>
&lt/a>
&lt/div>
&lt/div>
&ltdiv id="linearGauge1">&lt/div>
&lt/div>

這樣播放器的基本架構(gòu)就出來了，但是還不能播放。首先需要一些代碼來啟用播放/暫停按鈕：

$('.buttons .playpause').click(function () {
var player = $(this).parents('.musicPlayer');
if (player.is('.paused')) {
$('.musicPlayer').removeClass('paused');
audioEl.play();
} else {
$('.musicPlayer').addClass('paused');
audioEl.pause();
}
return false;
}).hover(function () { $(this).addClass('ui-state-hover'); },
function () { $(this).removeClass('ui-state-hover'); })
.focus(function () { $(this).addClass('ui-state-focus'); })
.blur(function () { $(this).removeClass('ui-state-focus'); });

$('.musicPlayer').addClass('paused');

而進(jìn)度條部分則用到了Ignite UI的 linear gauge 控件。進(jìn)度條的最大值取決于歌曲的持續(xù)時間，所以圖表要持續(xù)響應(yīng)當(dāng)前曲目的長度。這里我們用了兩個范圍：一個靜態(tài)一個動態(tài)。

var newduration = audioEl.duration / 60;

//linear gauge

$(".musicPlayer #linearGauge").igLinearGauge({
width: "65%",
height: "45px",
minimumValue: "0",
maximumValue: newduration,
minorTickCount: 1,
needleBreadth: 4,
interval: 1,
value: 1.2,
labelInterval: 1,
needleShape: "custom",
needleInnerBaseWidth: 0.1,
needleOuterBaseWidth: 0.1,
needleInnerExtent: .6,
needleOuterExtent: 0.1,
needleInnerPointExtent: .3,
needleInnerPointWidth: 0.3,
needleOuterPointExtent: 0.4,
needleOuterPointWidth: .3,
needleBrush: "black",
backingBrush: "#e6e6e6",
backingOutline: "#e6e6e6",
fontBrush: "black",
ranges: [
{
name: "666",
startValue: 0,
endValue: newduration,
brush: "#666",
innerStartExtent: .2,
innerEndExtent: .2,
outerStartExtent: 0.5,
outerEndExtent: 0.5
}, {
name: "track",
startValue: 0,
endValue: 0,
brush: "#19A3A3",
innerStartExtent: .2,
innerEndExtent: .2,
outerStartExtent: 0.5,
outerEndExtent: 0.5
}]
});

要獲取曲面的持續(xù)時間則必須確保能加載它的元數(shù)據(jù)。為了避免時間計算的錯誤，我們?yōu)榭丶O(shè)置一個函數(shù)，讓它只有在loadmetadata事件觸發(fā)時才會執(zhí)行計算。

audioEl.addEventListener("loadedmetadata", function () {
. . .
}

在這個函數(shù)中我們將初始化用于改變控件值的timeupdate事件的handler函數(shù)，因?yàn)槲覀円羔橈@示當(dāng)前時間。另外，還要指定當(dāng)前時間的值，這樣我們就可以設(shè)定歌曲播放過的刻度的顏色。

$('audio').bind('timeupdate', function (event) {
$('.musicPlayer .currenttime').text(minAndSec(audioEl.currentTime));
$(".musicPlayer #linearGauge").igLinearGauge("option", "value", audioEl.currentTime / 60);
$(".musicPlayer #linearGauge").igLinearGauge("option", "ranges", [{
name: "track",
endValue: audioEl.currentTime / 60
}]);
});

你還可以用同樣的方法設(shè)置緩沖區(qū)的顏色。

如果想改變曲目的當(dāng)前時間，則必須啟動指針拖放，同時還要確保曲目的當(dāng)前時間與拖動后指針指向的時間一致。

var lastPointX = 0, lastPointY = 0, isDragging = false, lastPointXVol = 0, lastPointYVol = 0;

// Start the needle drag only on a mousedown on the needle
document.getElementById("linearGauge").addEventListener("mousedown", function (e) {
dragNeedle(e, true);
document.addEventListener("mousemove", mousemove);
document.addEventListener("mouseup", mouseup);

});

// Function that performs the needle drag/tap to the new point
dragNeedle = function (e, isMouseDown) {
if (!isMouseDown && !isDragging) {
return;
}

e.preventDefault();
var pointX = e.pageX - $("#linearGauge").offset().left;
var pointY = e.pageY - $("#linearGauge").offset().top;
if (isMouseDown) {
var isClickPointValid = $("#linearGauge").igLinearGauge("needleContainsPoint", pointX, pointY);
if (isClickPointValid) {
lastPointX = pointX;
lastPointY = pointY;
} else {
isClickPointValid = $("#linearGauge").igLinearGauge("needleContainsPoint", (pointX + 4 * lastPointX) / 5, (pointY + 4 * lastPointY) / 5);
}
isDragging = true;
if (!isClickPointValid) {
isDragging = false;
return;
}

}

var value = $("#linearGauge").igLinearGauge("getValueForPoint", pointX, pointY);
if (isNaN(value))
return;

// Prevent needle from dragging beyond the scale bounds
var minimumValue = $("#linearGauge").igLinearGauge("option", "minimumValue");
var maximumValue = $("#linearGauge").igLinearGauge("option", "maximumValue");

var startValue = minimumValue &lt= maximumValue ? minimumValue : maximumValue;
var endValue = minimumValue > maximumValue ? minimumValue : maximumValue;

if (value > startValue && value &lt endValue) {
$("#linearGauge").igLinearGauge("option", "value", value);
$(".musicPlayer #linearGauge").igLinearGauge("option", "ranges", [{ name: "track", endValue: value }]);
audioEl['currentTime'] = value * 60;

} else {
value = value >= endValue ? endValue : startValue;
$("#linearGauge").igLinearGauge("option", "value", value);
$(".musicPlayer #linearGauge").igLinearGauge("option", "ranges", [{ name: "track", endValue: value }]);
audioEl['currentTime'] = value * 60;

}
}

接下來要設(shè)置曲目的音量控件。這里我們將它設(shè)置為一個垂直的音量條，范圍為0到1。再用hide和toggle jQuery函數(shù)，這樣只有在鼠標(biāo)移動到音量圖標(biāo)上時音量條才會顯示。

$("#linearGauge1").hide();
$(".vol").click(function () { $("#linearGauge1").toggle(); });
$("#linearGauge1").igLinearGauge({
width: "40px",
height: "110px",
minimumValue: "0",
maximumValue: "1",
orientation: "vertical",
minorTickCount: 1,
interval: 1,
tickEndExtent: 0.5,
scaleStartExtent: .1,
scaleEndExtent: 0.9,
value: 1,
fontBrush: "black",
ickStrokeThickness: 1,
labelInterval: 1,
backingBrush: "#B2CCCC",
ranges: [{
name: "volume",
startValue: 0,
endValue: audioEl.volume,
brush: "#D1E0E0",
outerStartExtent: 0,
outerEndExtent: 0.9
}]
});

這里同樣使用上面提到的dragNeedle用于控制音量，唯一不同的就是這里不需要設(shè)置當(dāng)前時間，只需要確保音量值和指針值一致就行了：

audioEl['volume'] = value;

Ignite UI的linear gauge小巧精悍，可用來制作各種音樂、視頻播放器，溫度計和任何你能用到的地方。