能播放漂亮歌词的网页代码

最新推荐文章于 2024-06-25 15:14:54 发布

baiding1123

最新推荐文章于 2024-06-25 15:14:54 发布

阅读量1.4k

点赞数 1

分类专栏： CSS/CSS3 文章标签： boject function FUNCTION javascript JavaScript Javascript javaScript 能播放漂亮歌词的网页代码

CSS/CSS3 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一个基于HTML和JavaScript实现的简单音乐播放器代码。该播放器能够显示歌词并同步滚动，通过Flash和Windows Media Player插件播放音频文件。文章还包含了一段用于展示轮播广告的JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>音乐播放</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<STYLE type=text/css>
.time {
BEHAVIOR: url(#default#time2)
}
BODY {
BORDER-RIGHT: #00BFFF 0px ridge; BORDER-TOP: #00BFFF 0px ridge; MARGIN: 0px; OVERFLOW: hidden;
BORDER-LEFT: #00BFFF 0px ridge; BORDER-BOTTOM:#F90 0px ridge
}
#layer1 {
SCROLLBAR-ARROW-COLOR:#065909; SCROLLBAR-BASE-COLOR: black
}
</STYLE>
<SCRIPT language=JavaScript>


nextAd()</SCRIPT>
<STYLE>v\:* {
BEHAVIOR: url(#default#VML)
}
v\:textpath {
FONT-SIZE: 16px; FONT-FAMILY:"楷体"; v-text-align: left
}
</STYLE>
</div>
<XMP id=xLyric style="DISPLAY: none">
[ver:v1.0]/*随便找首把歌词粘到这里*/
[ar:张韶涵]
[ti:亲爱的那不是爱情]
[by:hai604560096]
[00:00.02]张韶涵-亲爱的那不是爱情
[00:08.01]词:方文山曲:周杰伦
[00:08.64]专辑:ang5.0(2007)
[00:09.76]by:hai604560096
[00:15.38]教室里那台风琴
[00:17.95]叮咚叮咚叮咛
[00:20.73]像你告白的声音
[00:23.92]动作一直很轻
[00:26.80]微笑看你送完信
[00:29.91]转身离开的背影
[00:33.11]喜欢你字迹清秀的关心
[00:40.78]那温热的牛奶瓶
[00:43.61]在我手中握紧
[00:46.28]有你在的地方
[00:49.12]我总感觉很窝心
[00:52.34]日子像旋转木马
[00:55.49]在脑海里转不停
[00:58.64]出现那些你对我好的场景
[01:05.85]你说过牵了手就算约定
[01:12.24]但亲爱的那并不是爱情
[01:18.60]就像来不及许愿的流星
[01:25.00]再怎么美丽也只能是曾经
[01:31.32]太美的承诺因为太年轻
[01:37.83]但亲爱的那并不是爱情
[01:44.24]就像是精灵住错了森林
[01:50.27]那爱情错的很透明
[02:10.41]那温热的牛奶瓶
[02:13.07]在我手中握紧
[02:15.86]有你在的地方
[02:18.68]我总感觉很窝心
[02:21.86]日子像旋转木马
[02:25.06]在脑海里转不停
[02:28.31]出现那些你对我好的场景
[02:35.50]你说过牵了手就算约定
[02:41.83]但亲爱的那并不是爱情
[02:48.17]就像来不及许愿的流星
[02:54.73]再怎么美丽也只能是曾经
[03:01.14]太美的承诺因为太年轻
[03:07.52]但亲爱的那并不是爱情
[03:13.84]就像是精灵住错了森林
[03:19.96]那爱情错的很透明
[03:26.78]太美的承诺因为太年轻
[03:33.16]但亲爱的那并不是爱情
[03:39.52]就像是精灵住错了森林
[03:45.53]那爱情错的很透明
</XMP>
<SCRIPT language="javascript">
window.onerror=function(){return false}
start()
function start(){
browser_ini()
timer_ini()
emv_ini()
lrc.setData(oo("xLyric").innerHTML)
lrc.write("歌曲载入中，请耐心等待...","l")
emv.play(src="1/张韶涵-亲爱的,那不是爱情.wma")/*歌曲相对路径：存放歌曲的文件夹/文件名.后缀 */
}
function emv_ini(){
var l
window.emv={}
lrc_ini()
l="<div id=bxEmv style=position:absolute;left:420;top:100;width:700;height:500>"
l+="<div style=position:absolute;left:0;top:0;width:700;height:460;></div>"
l+="<div id=bxEmvScreen style=position:absolute;overflow:hidden;left:0;top:6;width:700;height:460;>"
l+="</div>"
l+="</div>"
l+="<object classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 id=mplayer width=200 height=200 style=display:none></object>"
insHtm(document.body,l)
emv.play=function(url){oo("mplayer").FileName=url;oo("mplayer").Play()}
emv.time=function(){
var mPos=mplayer.CurrentPosition,n=lrc.i
var n1,o,len,w,per,n0,n1
n1=n<lrc.arr.length-1?lrc.arr[n+1].slice(0,"|")*1:9999
if(n1<mPos){
   lrc.i++
   n++
   if(n==0)
    lrc.write(lrc.arr[n].slice("|"),"l")
   if(n<lrc.arr.length-1)
    lrc.write(lrc.arr[n+1].slice("|"),n%2==1?"l":"r")
}
if(n>=0){
   n0=lrc.arr[n].slice(0,"|")
   n1=lrc.arr.length>n+1?lrc.arr[n+1].slice(0,"|"):4
   o=oo("bxCaption_"+(n%2==0?"l":"r")+"_cover")
   len=o.time!=""?o.time*1:n1-n0
   per=(mPos-n0)/len
   for(i=0.001;i<1;i+=0.001){
    per1=lrc.getRealPos(o,i)
    if(per1>=per)
     break
   }
   o.style.width=o.width*i
}
}
timer.add("emv.time()")
}
function lrc_ini(){
window.lrc={}
lrc.wordPer=function(str,pos){
return str.slice(0,pos).replace(/[^\x00-\xff]/g," ").length/str.replace(/[^\x00-\xff]/g," ").length
}
lrc.setData=function(str){
var l,a,i,ad,n,j
str=str.replace(/\|/g,"").replace(/\r\n/g,"\n")
str=str.replace(/\[(\d\d)\:(\d\d)\.(\d\d)\]/g,function($0,$1,$2,$3){return ($1*60+$2*1+$3/100)+"|"})
a=str.split("\n")
lrc.arr=new Array()
for(i=0;i<a.length;i++){
   ad=a[i].split("|")
   for(j=1;j<ad.length;j++){
    lrc.arr.add(ad[j-1]+"|"+ad[ad.length-1])
   }
}
lrc.i=-1
sortIndex=0
sortDir=1
lrc.arr.sort(sortFoo)
}
lrc.getRealPos=function(obj,pos){
var a=obj.path,zoom=obj.zoom,pos1=pos*zoom
var a,i,ad
for(i=0;i<a.length;i++){
   ad=a[i]
   if(pos<=ad[0])
    continue
   if(pos>ad[0]&&pos<=ad[1])
    pos1+=(zoom*ad[2]-zoom)*(pos-ad[0])
   else{
    pos1+=(zoom*ad[2]-zoom)*(ad[1]-ad[0])
   }

}
return pos1
}
lrc.write=function(str,pos){
var word=str,style=""
var x,y,l,w,w1,o,a,i,ad
if(/^\<.+\>/.test(str)){
   word=str.slice(">")
   style=str.slice(1).slice(0,">")
}
w=word.replace(/[^\x00-\xff]/g," ").length*13+2
if(pos=="l"){
   x=0
   y=290
}
else{
   x=380-w
   y=310
}
l="<div id=bxCaption_"+pos+" style='position:absolute;left:"+x+";top:"+y+";width:"+w+";height:26;overflow:hidden'>"
l+="<v:curve to=600,1 strokecolor=green strokeweight=2 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
l+="<v:curve to=600,1 strokecolor=#FCFCFC fillcolor=white strokeweight=1 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
l+="</div>"
l+="<div id=bxCaption_"+pos+"_cover width="+w+" style=position:absolute;left:"+x+";top:"+y+";width:0;height:32;overflow:hidden>"
l+="<v:curve to=600,1 strokecolor=#FF4040 strokeweight=3 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
l+="<v:curve to=600,1 strokecolor=#FCFCFC strokeweight=1 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
l+="</div>"
odel("bxCaption_"+pos)
odel("bxCaption_"+pos+"_cover")
insHtm("bxEmvScreen",l)
o=oo("bxCaption_"+pos+"_cover")
o.time=style.get("time")
o.path=new Array()
len1=1
a=style.split(";")
for(i=0;i<a.length;i++){
   if(!/(\d+):(\d+)/.test(a[i]))
    continue
   if(/(\d+)-(\d+):(\d+)/.test(a[i])){
    ad=/(\d+)-(\d+):(\d+)/.exec(a[i])
    ad[0]=lrc.wordPer(word,ad[1]-1)
    ad[1]=lrc.wordPer(word,ad[2]*1)
    ad[2]=ad[3]
   }
   else{
    ad=/(\d+):(.+)/.exec(a[i])
    ad[0]=lrc.wordPer(word,ad[1]-1)
    ad[1]=lrc.wordPer(word,ad[1]*1)
   }
   len1+=(ad[1]-ad[0])*(ad[2]-1)
   o.path.add(ad)
}
o.zoom=1/len1
}
}
function browser_ini(){
window.isIE=navigator.userAgent.indexOf("IE")>0
window.isIE5=navigator.userAgent.indexOf("IE 5.0")>0
String.prototype.trim=function(){return this.replace(/(^[\s]*)|([\s]*$)/g,"")}
String.prototype.inc=function(s1,s2){if(s2==null){s2=","};return (s2+this+s2).indexOf(s2+s1+s2)>-1?true:false}
String.prototype._slice="".slice
String.prototype.slice=function(n1,n2){var v,b1=typeof(n1)=="number",b2=typeof(n2)=="number";if(!b1||typeof(n2)=="string"){v=eval("this._slice("+(b1?n1:this.indexOf(n1)+(n2==null?1:0)+(this.indexOf(n1)==-1?this.length:0))+(n2==null?"":(b2?n2:(this.indexOf(n2)==-1?"":","+this.indexOf(n2))))+")")}else{v=isIE5&&n1<0&&n2==null?this._slice(this.length-1):eval("this._slice(n1"+(n2==null?"":","+n2)+")")}return v}
String.prototype.get=function(str,def){if(this.inc(str,";"))return 1;var a=this.match(new RegExp("(^|;)"+str+":[^;]*"));return a==null||str==""?(def==null?"":def):a[0].replace(";","").slice(str.length+1)}
Array.prototype.add=function(key){this[this.length]=key}
window.oo=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj}
window.insHtm=function(op,html,inEnd){op=oo(op);if(isIE){op.insertAdjacentHTML(inEnd==null?"beforeend":"afterbegin",html)}else{var r=op.ownerDocument.createRange();r.setStartBefore(op);eval("op."+(inEnd==null?"appendChild":"insertBefore")+"(r.createContextualFragment(html),op.firstChild)");}}
window.odel=function(obj){if(oo(obj)!=null){oo(obj).parentNode.removeChild(oo(obj))}}
if(!isIE){
     HTMLElement.prototype.contains=function(node){if(!node)return false;do if(node==this){return true}while(node=node.parentNode){return false}}
Event.prototype.__defineGetter__("srcElement",function(){var node=this.target;while(node.nodeType!=1){node=node.parentNode}return node})
Event.prototype.__defineGetter__("toElement",function(){return this.relatedTarget})
}
}
function timer_ini(){
window.timer={}
timer.handle=null
timer.queue=""
timer.i=0
timer.add=function(key){if(!timer.queue.inc(key,";")){timer.queue+=key+";"}}
timer.del=function(key){timer.queue=move.queue.replace(key+";","")}
timer.inv=function(){
window.clearTimeout(timer.handle)
eval(timer.queue)
timer.i++
timer.handle=window.setTimeout("timer.inv()",10)
}
timer.inv()
}
function sortFoo(v1,v2){
    var s1=v1.split("|")[sortIndex],s2=v2.split("|")[sortIndex]
    if(!isNaN(s1)&&!isNaN(s2)){
s1*=1
s2*=1
    }
return (s1==s2?0:(s1>s2?1:-1))*sortDir
}
</SCRIPT>
<PARAM NAME="AutoStart" VALUE="-1"><PARAM NAME="Balance" VALUE="-1"><PARAM NAME="enabled" VALUE="-1"><PARAM NAME="EnableContextMenu" VALUE="-
 
1"><PARAM NAME="url" VALUE=""><PARAM NAME="PlayCount" VALUE="1"><PARAM NAME="rate" VALUE="1"><PARAM NAME="currentPosition" VALUE="-1"><PARAM NAME="currentMarker" VALUE="-1"><PARAM NAME="defaultFrame" VALUE="-1"><PARAM NAME="invokeURLs" VALUE="0"><PARAM NAME="baseURL" VALUE=""><PARAM NAME="stretchToFit" VALUE="-1"><PARAM NAME="volume" VALUE="100"><PARAM NAME="mute" VALUE="0"><PARAM NAME="uiMode" VALUE="mini"><PARAM NAME="windowlessVideo" VALUE="0"><PARAM NAME="fullScreen" VALUE="0"><PARAM NAME="enableErrorDialogs" VALUE="-1"><PARAM NAME="SAMIStyle" VALUE=""><PARAM NAME="SAMILang" VALUE=""><PARAM NAME="SAMIFilename" VALUE="">
</object></BODY></HTML>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>
</html>

</div>