半岛外围网上直营

Ignite UI 是Infragistics开发的一款高级jQuery HTML5 UI框架，它下面有一个非常好用的控件：线性仪表(Linear Gauge)。今天就跟大家演示一下如何用这个控件制作一个jQuery音乐播放器。

首先，我们需要一些HTML标签来表示播放器的元素，这里用的是HTML5 audio tag：

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

接下来设置播放器的基础部分。我们需要播放/暂停按钮、音量按钮和进度条。这里用了一些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>

这样播放器的基本架构就出来了，但是还不能播放。首先需要一些代码来启用播放/暂停按钮：

$('.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');

而进度条部分则用到了Ignite UI的 linear gauge 控件。进度条的最大值取决于歌曲的持续时间，所以图表要持续响应当前曲目的长度。这里我们用了两个范围：一个静态一个动态。

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
}]
});

要获取曲面的持续时间则必须确保能加载它的元数据。为了避免时间计算的错误，我们为控件设置一个函数，让它只有在loadmetadata事件触发时才会执行计算。

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

在这个函数中我们将初始化用于改变控件值的timeupdate事件的handler函数，因为我们要指针显示当前时间。另外，还要指定当前时间的值，这样我们就可以设定歌曲播放过的刻度的颜色。

$('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
}]);
});

你还可以用同样的方法设置缓冲区的颜色。

如果想改变曲目的当前时间，则必须启动指针拖放，同时还要确保曲目的当前时间与拖动后指针指向的时间一致。

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;

}
}

接下来要设置曲目的音量控件。这里我们将它设置为一个垂直的音量条，范围为0到1。再用hide和toggle jQuery函数，这样只有在鼠标移动到音量图标上时音量条才会显示。

$("#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用于控制音量，唯一不同的就是这里不需要设置当前时间，只需要确保音量值和指针值一致就行了：

audioEl['volume'] = value;

Ignite UI的linear gauge小巧精悍，可用来制作各种音乐、视频播放器，温度计和任何你能用到的地方。