，作为独立的js播放器。请大家指点，互相交流学习、
提供的只是代码部分，html的图片大家自己整吧
目前市场上不容易淘到哦
////////js
var arr=new Array();
//初始化
var turns=0;
function playerinit()
{
//歌曲列表
;
arr=arr1;
player.url=arr1[turns][1];
document.getElementById("play1").style.display="none";
document.getElementById("pause1").style.display="block";
player.settings.autoStart = ture ;
temptimer=setInterval('showtime()',1000);
}
//更新时间
function updatetime()
{
document.getElementById("p4").innerHTML = player.controls.currentPositionString + " | " + player.currentMedia.durationString;
document.getElementById("p3").innerHTML =arr[turns][0]+"<br/>"+arr[turns][2];
CButton1.style.pixelLeft=CButton1Box.offsetWidth*(player.controls.currentPosition/player.currentMedia.duration);
if((CButton1Box.offsetWidth-CButton1.style.pixelLeft)<CButton1.offsetWidth){
next();
}
}
var arr1=new Array();
arr1[0]=["苍山-天龙八部","music/[]苍山-天龙八部.mp3","天龙"];
arr1[1]=["等一分钟","music/等一分钟 伴奏.MP3","徐誉滕"];
arr1[2]=["跨越时空的思念","music/影视原声-跨越时空的思念.mp3","犬夜叉"];
arr1[3]=["青花","music/周传雄-青花.mp3","周传雄"];
arr1[4]=["烟花易冷","music/烟花易冷.mp3","周杰伦"]
//前首
function previous()
{
document.getElementById("play1").style.display="none";
document.getElementById("pause1").style.display="block";
turns--;
player.url=arr1[turns][1];
}
//后首
function next()
{
document.getElementById("play1").style.display="none";
document.getElementById("pause1").style.display="block";
turns++;
player.url=arr1[turns][1];
}
//点歌
function playthis(){
var url="烟花易冷.mp3";
player.url="music/"+url;
}
//播放
function play()
{
if (player.controls.isavailable('play'))
{
document.getElementById("play1").style.display="none";
document.getElementById("pause1").style.display="block";
player.controls.play();
state=setInterval("updatetime()",1000);
playerinfo.innerHTML = "播放";
}
}
//暂停
function pause()
{
if (player.controls.isavailable('pause'))
{
document.getElementById("play1").style.display="block";
document.getElementById("pause1").style.display="none";
player.controls.pause();
clearInterval(state);
playerinfo.innerHTML = "暂停";
}
}
//停止
function stop()
{
if (player.controls.isavailable('stop'))
{
CButton1.style.pixelLeft=CButton1Box.offsetWidth*0;
document.getElementById("play1").style.display="block";
document.getElementById("pause1").style.display="none";
player.controls.stop();
clearInterval(state);
playerinfo.innerHTML = "停止";
}
}
var name;
var url;
var singer;
//添加歌曲
function addpl(name,url,singer){
var i=0;
sum=sum+i;
this.name=name;
this.url=url;
this.singer=singer;
arr[sum]=[name,url,singer];
i++;
}
//静音
function mute()
{
player.settings.mute = !player.settings.mute;
}
////控制音量
function BDown(obj){
obj.setCapture();
var ox=event.clientX;
function obj.onmousemove(){
var nx=event.clientX;
try{
var MiniPx=obj.style.pixelLeft+nx-ox;
var MaxPx=eval(obj.id+"Box").offsetWidth-obj.offsetWidth;
}
catch(e){}
if(obj&&MiniPx>=0&&MiniPx<=MaxPx){
CButton.style.pixelLeft+=nx-ox;
player.settings.volume=100*(MiniPx/MaxPx);
ox=nx;
}
}
function obj.onmouseup(){
obj.releaseCapture();
obj=false;
}
}
//进度条
function length(obj1){
obj1.setCapture();
var ox1=event.clientX;
function obj1.onmousemove(){
var nx1=event.clientX;
try{
var MiniPx1=obj1.style.pixelLeft+nx1-ox1;
var MaxPx1=eval(obj1.id+"Box").offsetWidth-obj1.offsetWidth;
}
catch(e){}
if(obj1&&MiniPx1>=0&&MiniPx1<=MaxPx1){
CButton1.style.pixelLeft+=nx1-ox1;
player.controls.currentPosition=player.currentMedia.duration*(CButton1.style.pixelLeft/CButton1Box.offsetWidth);
ox1=nx1;
}
}
function obj1.onmouseup(){
obj1.releaseCapture();
obj1=false;
}
}
// JavaScript Document
////html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>吐血JS网页播放器1.0</title>
<script type="text/javascript" src="Untitled-1.js">
</script>
<style>
#colee_right
{
overflow:hidden;
width:900px;
height:90px;
float:left;
}
#colee_left
{
overflow:hidden;
width:900px;
height:90px;
float:left;
}
#colee_rightb
{
overflow:hidden;
width:900px;
height:90px;
float:left;
}
#colee_leftb
{
overflow:hidden;
width:900px;
height:90px;
float:left;
}
#div2{
float:left;
width:80px;
height:20px;}
#div3{
float:left;
width:80px;
height:20px;}
#div4{
}
#show{
float:left;
width:500px;
height:300px;
}
#bottom{
float:left;
background-image:url(image/底.png);
width:1000px;
height:178px;
float:left;
}
#main{
width:1000px;
height:180px;
}
#div5{
}
#showtime{
}
#pn{
float:left;
width:41px;
height:86px;
}
#control2{
}
#length{
float:left;
background-color:#000000;
height:60px;
width:500px;}
#vl{
background-color:#99FF00;
float:left;
width:369px;
height:30px;}
#le{
float:left;
width:369px;
height:30px;}
#move{
background-color:#000000;
width:10px;
height:20px;}
.STYLE1 {
font-size: small;
color: #FFFFFF;
font-family: "宋体";
}
.STYLE3 {
font-size: small;
color: #CCCCCC;
}
</style>
</head>
<body _disibledevent=>
<div id="main" style=" cursor:pointer">
<object id="player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject" height="50" width="100" style="display:none;">
<param name="autoStart" value="1">
<param name="balance" value="0">
<param name="currentPosition" value="0">
<param name="currentMarker" value="0">
<param name="enableContextMenu" value="true">
<param name="enableErrorDialogs" value="false">
<param name="enabled" value="true">
<param name="fullScreen" value="false">
<param name="invokeURLs" value="false">
<param name="mute" value="true">
<param name="playCount" value="1">
<param name="rate" value="1">
<param name="uiMode" value="none">
<param name="volume" value="100">
</object>
<div id="bottom">
<div id="CButton1Box" style="width:949px; height:5px;background-image:url(image/进度条.png);solid #0066cc; margin-left:20px; margin-top:20px">
<input id="CButton1" type="button" style="position:relative;border:0;width:8px; height:6px;left:0px; background-image:url(image/cursor.png)" _disibledevent=>
</div>
<div id="kongjian" style="margin-top:50px; margin-left:50px">
<div id="control" style="float:left; width:400px" >
<div id="p" style=" float:left;margin-left:15px; margin-right:15px;"><img src="image/上一曲.png" _disibledevent=>
<div id="play1" style=" float:left;margin-left:15px; margin-right:15px; "><img src="image/播放.png" _disibledevent=>
<div id="pause1" style="float:left; margin-left:15px; margin-right:15px;" ><img src="image/暂停.png" _disibledevent=>
<div id="stop" style=" float:left;margin-left:15px; margin-right:15px;"><img src="image/停止.png" alt="停止"onclick="stop()"/></div>
<div id="n" align="left" style="float:left; margin-left:15px; margin-right:15px; "><img src="image/下一曲.png" _disibledevent=>
</div>
<div id="control2" style="float:left;">
<div id="showtime" style="float:left;width:350px;height:90px;
">
<div id="div2">
<span id="p2" style="display:block; height:17px; border: ; width:100px;font-size:18px; color:#FFFFFF; line-height:20px; margin-bottom:5px; float:left;"></span>
</div>
<div id="div3">
<span id="p3" style="display:block; height:17px; border: ; width:100px; font-size:18px; color:#FFFFFF; line-height:20px;text-align:center; margin-bottom:5px; float:left;"></span>
</div>
</div></div>
<div id="div5" style=" float:left;width:140px;height:90px;" >
<div id="div4">
<span id="p4" style="display:block; height:10px; border: ; width:120px; font-size:18px; color:#FFFFFF; line-height:20px; margin-bottom:5px; ">时间：</span>
</div>
<div id="luan1" style=" width:140px; margin-top:40px;">
<div style="width:23px; height:14px; float:left" _disibledevent=>
<div id="CButtonBox" style="width:114px;height:21px; float:left; background-image:url(image/音量杠.png); background-repeat:no-repeat;">
<input name="button" type="button" id="CButton" style="position:relative;border:0;width:8px; height:19px;left:30px; background-image:url(image/cursor.png)" _disibledevent=>
</div></div>
</div></div>
</div>
</div>
<script language = "JavaScript" for = player event = playstatechange(newstate)>
switch (newstate){
case 1:
document.getElementById("p2").innerHTML = "停止";
break;
case 2:
document.getElementById("p2").innerHTML = "暂停";
break;
case 3:
document.getElementById("p2").innerHTML = "正在播放:";
state=setInterval("updatetime()",1000);
break;
case 4:
document.getElementById("p2").innerHTML = "4";
break;
case 5:
document.getElementById("p2").innerHTML = "5";
break;
case 6:
document.getElementById("p2").innerHTML = "正在缓冲...";
break;
case 7:
document.getElementById("p2").innerHTML = "7";
break;
case 8:
document.getElementById("p2").innerHTML = "8";
break;
case 9:
document.getElementById("p2").innerHTML = "正在连接...";
break;
case 10:
document.getElementById("p2").innerHTML = "玄瀛/制作"
break;
case 11:
document.getElementById("p2").innerHTML = "11";
break;
default:
document.getElementById("p2").innerHTML = "";
}
</script>
</div>
</body>
</html>
全部代码在这儿， 至于图片按钮那个是那个 有兴趣的自己琢磨去 。含辛茹苦的果实哦
制作：张泳澄
美工：王骁龙
指导老师：王涛
最新评论