js音乐播放器
由于服务器的问题，还是用了微软的mediaPlayer播放器，东抄西抄的不幸搞出来了。主要就是进度条和音量滑块的效果了，找了俩控件，别的都easy。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/rating.min.js"></script>
<script type="text/javascript">
var playid = "CibnPlayer";
var status = "status";
var curId, arrPL, mode;
var playMode = 1;
arrPL = new Array(); //播放器列表
cur = 0;
curId = 0;
function songObj(Id, name) {
this.Id = Id
this.name = name
}
//播放and暂停
function ReplacePlayButtonImage() {
try {
var state = document.getElementById(playid).playState;
if (state == 3) {
document.getElementById("playImg").style.display = "block"; //显示播放
document.getElementById("pauseImg").style.display = "none"; //隐藏暂停
document.getElementById(playid).controls.pause();
}
else {
document.getElementById("playImg").style.display = "none"; //隐藏播放
document.getElementById("pauseImg").style.display = "block"; //显示暂停
document.getElementById(playid).controls.play();
}
}
catch (e) {
HandleError(e);
}
}
//上一曲
function prePlay() {
if (playMode == 2) {
curId--;
if (curId < 0) {
curId = arrPL.length - 1;
}
}
else if (playMode == 3) {
curId = parseInt(Math.random() * arrPL.length);
}
PlayIt(curId);
}
//下一曲
function nxtPlay() {
if (playMode == 2) {
curId++;
if (curId > (arrPL.length - 1)) {
curId = 0;
}
}
else if (playMode == 3) {
curId = parseInt(Math.random() * arrPL.length);
}
PlayIt(curId);
}
//声音控制
$(document).ready(function() {
$('#sound-hk').slidy({
maxval: 11,
interval: 1,
defaultValue: 4,
finishedCallback: function(value) {
if (document.getElementById("CibnPlayer"))
document.getElementById("CibnPlayer").Settings.volume = (value - 1) * 10;
document.getElementById("dismute").style.display = "none";
document.getElementById("mute").style.display = "";
},
moveCallback: function(value) {
if (document.getElementById("CibnPlayer"))
document.getElementById("CibnPlayer").Settings.volume = (value - 1) * 10;
document.getElementById("dismute").style.display = "none";
document.getElementById("mute").style.display = "";
}
});
})
//声音+
function doVolRise() {
try {
if (document.getElementById("CibnPlayer").Settings.volume <= 90) {
document.getElementById("CibnPlayer").Settings.volume = document.getElementById("CibnPlayer").Settings.volume + 10;
}
else {
document.getElementById("CibnPlayer").Settings.volume = 100;
}
}
catch (e)
{ }
}
//-声音
function doVolDel() {
try {
if (document.getElementById("CibnPlayer").Settings.mute)
document.getElementById("CibnPlayer").Settings.mute = 'false';
if (document.getElementById("CibnPlayer").Settings.volume >= 10) {
document.getElementById("CibnPlayer").Settings.volume = document.getElementById("CibnPlayer").Settings.volume - 10;
}
else {
document.getElementById("CibnPlayer").Settings.volume = 0;
}
}
catch (e)
{ }
}
//静音
function doMute() {
try {
document.getElementById("CibnPlayer").Settings.mute = !document.getElementById("CibnPlayer").Settings.mute;
document.getElementById("CibnPlayer").Settings.volume = 0;
document.getElementById("dismute").style.display = "";
document.getElementById("mute").style.display = "none";
}
catch (e)
{ }
}
//恢复声音
function NodoMute() {
document.getElementById("CibnPlayer").Settings.mute = document.getElementById("CibnPlayer").Settings.mute;
document.getElementById("CibnPlayer").Settings.volume = 40;
document.getElementById("dismute").style.display = "none";
document.getElementById("mute").style.display = "";
}
//进度控制
function GetPosition() {
try {
oSlider.player = document.getElementById("CibnPlayer").controls.currentPosition;
if (oSlider.timer)
{ window.clearTimeout(oSlider.timer); }
oSlider.timer = setTimeout("GetPosition()", 1000);
}
catch (e) { HandleError(e); }
}
//播放开始
function PlayIt(cid) {
if (curId < 0 || curId > arrPL.length - 1) {
curId = 0;
document.getElementById("pos").innerText = " 00:00/00:00 ";
return false;
}
//var url = "http://10.1.1.70:8002/music/" + arrPL[cid];
var url = arrPL[cid];
curId = cid;
if (url == "None") {
nxtPlay();
return false;
}
document.getElementById(playid).URL = url;
//var currentName="a_songName" + cid;
//alert(currentName);
document.getElementById("soungName").innerHTML = document.getElementById("a_songName" + cid).innerHTML;
$('td.listTd').each(function() {
//alert(this.background);
this.background = "images/bk-h30.jpg";
});
var tdCurrent = document.getElementById("row" + cid).childNodes;
for (var l = 0; l < tdCurrent.length; l++) {
tdCurrent[l].background = "images/blue.jpg";
}
document.getElementById("playImg").style.display = "none"; //显示暂停
document.getElementById("pauseImg").style.display = "block"; //隐藏播放
//GetPosition();
showTimer()
//setInterval('showTimer()', 1000);
}
//播放停止
function stopIt() {
document.getElementById("playImg").style.display = "block"; //显示播放
document.getElementById("pauseImg").style.display = "none"; //隐藏暂停
document.getElementById(playid).controls.stop();
}
var clearSate = 1;
function showTimer() {
var cp = document.getElementById(playid).controls.currentPosition
var cps = document.getElementById(playid).controls.currentPositionString
var dur = document.getElementById(playid).currentMedia.duration;
var durs = document.getElementById(playid).currentMedia.durationString;
var s = document.getElementById(playid).playState;
var o = document.getElementById(playid).openState;
if (s == 2 || s == 3) {
document.getElementById("pos").innerText = " " + cps + "/" + durs + " ";
}
else
document.getElementById("pos").innerText = " 00:00/" + durs + " ";
if (s == 1) {
if (playMode == 1) PlayIt(curId);
else if (playMode == 2) nxtPlay();
else if (playMode == 3) {
curId = parseInt(Math.random() * arrPL.length);
PlayIt(curId);
}
}
if (s == 10 && arrPL.length > 0)
nxtPlay();
if (cps >= "00:30" && mode == 0) {
stopIt();
//alert(document.location.href);
if (confirm("试听结束，是否购买？")) {
window.open('/PayWeb/Default.aspx?ID=1_1&PID=' + getQueryStringRegExp("PID") + '&nexturl=' + encodeURI('http://ceshiwh.catv.net/MediaWeb/Music/PlayMusic.aspx?PID=' + getQueryStringRegExp("PID")))
}
document.getElementById("pos").innerText = " 00:00/" + durs + " ";
document.getElementById(playid).URL = "NULL";
return false;
}
try {
if (oSlider.timer)
{ window.clearTimeout(oSlider.timer); }
oSlider.timer = setTimeout("GetPosition()", 1000); //进度条刷新
if (clearSate) {
window.clearTimeout(clearSate);
}
clearSate = window.setTimeout("showTimer()", 1000);
}
catch (e) { HandleError(e); }
}
//初始化
function MakeList() {
arrPL = new Array(<%=aryUrl%>);
//arrPL = document.getElementById("hidUrl").value.split(",");
PlayMode();
//arrPL = new Array("最炫民族风.mp3", "m01.mp3")
}
function PlayMode() {
mode = getQueryStringRegExp("mode");
playMode = document.getElementById("sel_mode").value;
}
function getQueryStringRegExp(name) {
var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
if (reg.test(location.href)) return unescape(RegExp.$2.replace(/\+/g, " "));
return 1;
}
//ie内核的使用 classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"
//非ie内核的使用 type="application/x-ms-wmp"
function showPlayer() {
var vhtml = '<object id="CibnPlayer"';
var userAg = navigator.userAgent;
if (-1 != userAg.indexOf("MSIE")) {
vhtml += ' classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"';
}
else if (-1 != userAg.indexOf("Firefox") || -1 != userAg.indexOf("Chrome") || -1 != userAg.indexOf("Opera") || -1 != userAg.indexOf("Safari")) {
vhtml += ' type="application/x-ms-wmp"';
}
vhtml+=' >';
vhtml += '<param name="URL" value=""/>';
//下面这些播放器的参数自己配置吧
vhtml += '<param name="autoStart" value="true" />';
vhtml += '<param name="invokeURLs" value="false">';
vhtml += '<param name="playCount" value="1">';
vhtml += '<param name="Volume" value="100">';
vhtml += '<param name="defaultFrame" value="datawindow">';
//vhtml+='<param name="BufferingTime" value="15">';
vhtml += '</object>';
document.getElementById("PlayerDiv").innerHTML = vhtml;
}
</script>
<body onload="MakeList(),showPlayer(), PlayIt(0)"> <div id="PlayerDiv" style="z-index: 1; display: none; position: absolute"> </div> <table width="382" height="32" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="32" class="zi1"> 播放列表 </td> </tr> </table> <table width="382" height="32" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="39" height="32" bgcolor="#d9d9d9" class="zi1"> </td> <td width="186" bgcolor="#d9d9d9" class="play"> 曲目名称 </td> <td width="108" bgcolor="#d9d9d9" class="play"> 艺术家 </td> <td width="49" bgcolor="#d9d9d9" class="zi1"> </td> </tr> </table> <table align="center" class="scrollable "> <tr> <td> <div style="height: 120px; width: 382; overflow: auto; float: left"> <table id="songList" width="365" border="0" align="center" cellpadding="0" cellspacing="0" class="play-1"> <%if (ds != null && ds.Tables[0].Rows.Count > 0) for (songIndex = 0; songIndex < ds.Tables[0].Rows.Count; songIndex++) {%> <tr id="row<%=songIndex %>" onclick="PlayIt(<%=songIndex %>)"> <td width="2" height="30" align="center"" " background="images/bk-h30.jpg" class="listTd"> </td> <td width="190" background="images/bk-h30.jpg" class="STYLE2 listTd"> <a id="a_songName<%=songIndex %>" href="#" class="lb" onclick="PlayIt(<%=songIndex %>)"> <%=ds.Tables[0].Rows[songIndex]["Title"].ToString()%> </a> </td> <td width="15" align="center" background="images/bk-h30.jpg" class="STYLE2 listTd"> </td> <td width="156" background="images/bk-h30.jpg" class="STYLE2 listTd"> <a href="#" class="lb"> <%=ds.Tables[0].Rows[songIndex]["Player"].ToString()%> </a> </td> </tr> <%} %> </table> </div> </td> </tr> </table> <table width="382" height="36" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="79" height="32" class="zi1"> 播放模式： </td> <td width="303" class="zi1"> <select name="select" id="sel_mode" onchange="PlayMode()"> <option value="1">单曲播放</option> <option value="2">循环播放</option> <option value="3">随机播放</option> </select> </td> </tr> </table> </body>
浙公网安备 33010602011771号