可以顯示歌詞，但是歌詞和歌曲都要實現自己下載下來。
只能播放一首歌，歌詞還得是lrc格式的
代碼寫的很羅嗦，急切希望幫改改CSS的代碼
1.代碼：
<html >
<head>
<!--下面有很多style都是沒用到的，但是我改不動了-->
<!--css覺得真是很麻煩-->
<style type="text/css">
audio
{
align:center;
}
.tiaojieshijian
{
color:yellow;
background:black;
}
* {
margin:0;
}
div {
display:block;
text-align:right;
position:relative;
right:300px;
}
div #wenzi{
right:0px;
}
div .ctrl
{
width:200px;
}
body {
font: 14px "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
background: #333;
color: #fff;
}
.icon{
background-repeat: no-repeat;
background-position: center;
display: inline-block;
opacity: 0.6;
cursor: pointer;
@include square(24px);
@include transition(0.3s);
@include user-select(none);
&:hover, &.enable{
opacity: 1;
}
&:active{
opacity: 0.3;
}
}
#background {
background-size: cover;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
#player {
width: 500px;
height: 130px;
padding: 25px;
margin: 50px auto 30px;
}
.control {
margin-top: 10px;
height: 25px;
}
.fastforward
{
background-image:url(fastforward.png);
width:24px;
height:24px;
}
.rewind
{
background-image:url(rewind.png);
width:24px;
height:24px;
}
.play
{
background-image:url(play.png);
width:24px;
height:24px;
}
.mute
{
background-image: url(volume.png);
width:24px;
height:24px;
}
.left
{
float:left;
}
.right
{
float:right;
}
</style>
<meta charset="utf-8">
</head>
<body>
<script>
//這個，存儲調節的時間值
//localStorage是HTML5的新東西
//localStorage代表着實際歌詞時間和lrc歌詞時間差
if(!localStorage.time)
{
localStorage.time=0;
}
// var a="[00:11.22]我[00:22.33]看[00:33.44]這樣[00:44.55]不好吧";
var a=" [00:03.56]搖晃的紅酒杯 嘴唇像染着鮮血 [00:07.48]那不尋常的美 難赦免的罪 [00:11.46]誰忠心的跟隨 充其量當個侍衛 [00:15.24]腳下踩着玫瑰 回敬一個吻當安慰 可憐 [00:26.09]像蠢動的音樂 教人們怎么成眠 [00:30.36]不知名的香水 窒息的鬼魅 [00:34.10]鋒利的高跟鞋 讓多少心腸破碎 [00:37.93]彎刀一般的眉 捍衛你的秘密花園 [00:42.76]夜太美 盡管再危險 [00:46.77]總有人黑着眼眶熬着夜 [00:50.70]愛太美 盡管再危險 [00:54.21]願賠上了一切超支千年的淚[00:58.26]痛太美 盡管再卑微 [01:01.83]也想嘗粉身碎骨的滋味 [01:05.82]你太美 盡管再無言 [01:09.65]我都想用石堆隔絕世界 [01:12.34]我的王妃 我要霸占你的美 [01:22.45]那催情的音樂 聽起來多么愚昧 [01:27.02]你武裝的防備 傷你的是誰 [01:30.85]靠近我一點點 是不一樣的世界 [01:34.69]安睡在我的肩 我用生命為你加冕 [01:39.64]夜太美 盡管再危險 [01:43.49]總有人黑着眼眶熬着夜 [01:47.41]愛太美 盡管再危險 [01:51.10]願賠上了一切超支千年的淚 [01:54.90]痛太美 盡管再卑微 [01:58.53]也想嘗粉身碎骨的滋味 [02:02.49]你太美 盡管再無言 [02:06.09]我都想用石堆隔絕世界 [02:09.05]我的王妃 我要霸占你的美 [02:26.75]夜太美 盡管再危險 [02:30.75]總有人黑着眼眶熬着夜[02:34.80]愛太美 盡管再危險 [02:38.35]願賠上了一切超支千年的淚 [02:42.25]痛太美 盡管再卑微 [02:45.81]也想嘗粉身碎骨的滋味 [02:50.01]你太美 盡管再無言 [02:53.54]我都想用石堆隔絕世界 [02:56.35]我的王妃 我要霸占你的美";
var shijianshuzu=new Array();
var gecishuzu=new Array();
//解析歌詞，將時間和歌詞分開
//時間放到shijianshuzu中
//歌詞放到gecishuzu中
//shijianshuzu[i]就是對應的時間值
//gecishuzu[i]就是對應的歌詞
//lrc歌詞在代碼中直接用變量a存儲了，可以改
//這兩個數組的長度就是lrc歌詞中有多少個類似"[xx:xx.xx]歌詞"這樣的
function parse(lrc)
{
//如果lrc的內容是"[xx:xx.xx]歌詞1[yy:yy.yy]歌詞二"
//那str這個數組長度是3
//str[0]=""
//str[1]="xx:xx.xx]歌詞一"
//str[2]="yy:yy.yy]歌詞二"
str=lrc.split("[");
//因為str[0]="",所以跳過它
for(var i=1;i<str.length;i++)
{
//str[i]格式是00:11.22]我
//shijian格式是00:11.22
var shijian=str[i].split(']')[0];
//geci格式是"我"
var geci=str[i].split(']')[1];
var fen=shijian.split(":")[0];
var miao=shijian.split(":")[1];
//xx:xx.xx 時間轉換成總的秒數
var sec=parseInt(fen)*60+parseInt(miao);
//存時間
shijianshuzu[i-1]=sec-localStorage.time;
//存歌詞
gecishuzu[i-1]=geci;
}
//這段代碼本來是用來顯示所有歌詞的，這里注釋掉了，可以掠過不看
var quanbugeci=document.getElementById("quanbugeci");
for(var i=0;i<shijianshuzu.length;i++)
{http://www.huiyi8.com/donghua/
// quanbugeci.innerHTML=quanbugeci.innerHTML+gecishuzu[i]+"<br>";
}flash素材
//上面是用來顯示所有歌詞的，不用看
//定時器，隔1s更新下歌詞的顯示
setInterval(updategeci,1000);
}
//更新歌詞
function updategeci()
{
//顯示了六行歌詞，每一行分別改變innerHTML
var geciyi=document.getElementById("yi");
var gecier=document.getElementById("er");
var gecisan=document.getElementById("san");
var gecisi=document.getElementById("si");
var geciwu=document.getElementById("wu");
var geciliu=document.getElementById("liu");
//由歌詞時間計算出i，得到現在應該顯示哪部分歌詞
//這函數下面有介紹
var i=getcurrent();
//如果gecishuzu[i-2]定義了，就顯示，沒定義，就不顯示
//下面幾個類似的if-else結構類似。
//這里寫的很羅嗦，以后空了再改
if(gecishuzu[i-2])
{
geciyi.innerHTML=gecishuzu[i-2];
}
else
{
geciyi.innerHTML=" ";
}
if(gecishuzu[i-1])
{
gecier.innerHTML=gecishuzu[i-1];
}
else
{
gecier.innerHTML=" ";
}
gecisan.innerHTML=gecishuzu[i];
if(gecishuzu[i+1])
{
gecisi.innerHTML=gecishuzu[i+1];
}
else
{
gecisi.innerHTML=" ";
}
if(gecishuzu[i+2])
{
geciwu.innerHTML=gecishuzu[i+2];
}
else
{
geciwu.innerHTML=" ";
}
if(gecishuzu[i+3])
{
geciliu.innerHTML=gecishuzu[i+3];
}
else
{
geciliu.innerHTML=" ";
}
}
//將歌曲實際播放的時間，和我們自己的歌詞的時間，進行比較，算出現在應該顯示的歌詞
function getcurrent()
{
var a=document.getElementById("test");
var i=0;
//152,154存歌詞和時間的時候
//時間是由小到大的
//當然實際的歌詞不一定都是由小到大，還可能是兩個時間重復的歌詞就合並到一起，其他的情況都沒做處理
for(i=0;i<shijianshuzu.length;i++)
{
//數和undefined比較，undefined要大些。
if(shijianshuzu[i]>=a.currentTime)
{
return i;
}
}
return i-1;
}
//函數寫成這種形式是為了加載頁面的時候自動執行
//(function 函數名{})()
(function ok()
{
parse(a);
})()
//歌詞時間減少2S
function back()
{
localStorage.time=parseInt(localStorage.time)-2;
parse(a);
}
//歌詞時間增加2s
function forward()
{
localStorage.time=parseInt(localStorage.time)+2;
parse(a);
}
</script>
<!--被注釋掉的是因為開始的時候，打算把UI做好看些，后來覺得CSS真的是很難伺候,放棄了-->
<!--<div id="player">
<div class="ctrl">
<div class="control ">
<div class="left">
<div class="rewind icon"></div>
<div class="play icon"></div>
<div class="fastforward icon"></div>
</div>
<div class="right volume">
<div class="icon mute"></div>
</div>
</div>
</div>
</div>-->
<div>
<!--audio 是HTML5中的新元素-->
<!--controls顯示那個播放器 autoplay歌曲就緒后自動播放 loop歌曲放完了循環-->
<audio controls id="test" autoplay="true" loop="true">
<source src="test.mp3" >
</audio>
</div>
<div id="wenzi">
<!--顯示六行歌詞-->
<div id="yi" ></div>
<div id="er" ></div>
<div id="san" ></div>
<div id="si" ></div>
<div id="wu" ></div>
<div id="liu" ></div>
<div id="quanbugeci" ></div>
</div>
<div align="center">
<input type="button" value="后退2s" class="tiaojieshijian" onclick=back()></input>
<input type="button" value="前進2s" class="tiaojieshijian" onclick=forward()></input>
</div>
</body>
</html>
網頁音樂播放器javascript實現，可以顯示歌詞
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。