js音樂播放器

最後更新：2016-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：ram time htm 世界 ext url 變數歌詞 height

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
*
{
margin:0;/*外邊距*/
padding:0;/*內邊距*/
}
#photo
{
width:320px;
height:600px;
background:#000;
margin:5px auto;
}
.top
{
width:320px;
height:23px;
background:url("img/1.png");
}
.title
{
width:320px;
height:30px;
background:url("img/2.png");
color:#ccc;
text-align:center;
font-size:24px;
font-weight:bold;
}
.singer
{
width:320px;
height:30px;
color:#ccc;
text-align:center;
font-size:14px;
font-weight:bold;
line-height:30px;
}
.play
{
width:190px;
height:190px;
background:url(img/3.png);
margin:20px auto;
border-radius:50%;
}
.lrc
{
width:300px;
height:264px;
/*border:1px solid red;*/
margin:auto;
text-align:center;
color:#ccc;
font-size:12px;
line-height:20px;
overflow:hidden;
}
/*用一個類名儲存旋轉功能*/
.rotate
{
animation:rot 5s linear infinite; /*名稱，時間，速度曲線（勻速），無限重複*/
}
@keyframes rot
{
0%
{
transform:rotate(0deg);

}
100%
{
transform:rotate(360deg);
}
}
#lrc
{
display:none;
}
.content
{
position:relative;/*相對定位*/
left:0;
top:0px;
}
</style>
</head>
<body>
<div id="photo">
<div class="top"></div>
<div class="title">小幸運</div>
<div class="singer">譚佳偉</div>
<div class="play"></div>
<div class="lrc">
<div class="content"></div>
</div>
</div>
<audio src="muic/譚嘉儀-小幸運.mp3" id="myMusic"></audio>
<textarea id="lrc">
[00:00.64]小幸運 - 譚嘉儀
[00:02.15]詞：徐世珍&吳輝福
[00:03.70]曲：JerryC
[00:04.14]編曲：JerryC
[00:13.77]我聽見雨滴落在青青草地
[00:19.89]我聽見遠方下課鐘聲響起
[00:25.74]可是我沒有聽見你的聲音
[00:30.74]認真呼喚我姓名
[00:37.92]愛上你的時候還不懂感情
[00:44.12]離別了才覺得刻骨銘心
[00:50.09]為什麼沒有發現遇見了你
[00:54.70]是生命最好的事情
[01:00.30]也許當時忙著微笑和哭泣
[01:06.36]忙著追逐天空中的流星
[01:12.12]人理所當然的忘記
[01:16.55]是誰風裡雨裡一直默默守護在原地
[01:24.44]原來你是我最想留住的幸運
[01:29.69]原來我們和愛情曾經靠得那麼近
[01:35.67]那為我對抗世界的決定
[01:40.29]那陪我淋的雨
[01:43.28]一幕幕都是你一塵不染的真心
[01:50.60]與你相遇好幸運
[01:53.96]可我已失去為你淚流滿面的權利
[01:59.98]但願在我看不到的天際
[02:04.63]你張開了雙翼
[02:07.68]遇見你的註定她會有多幸運
[02:27.28]青春是段跌跌撞撞的旅行
[02:33.44]擁有著後知後覺的美麗
[02:39.55]來不及感謝是你給我勇氣
[02:44.22]讓我能做回我自己
[02:49.72]也許當時忙著微笑和哭泣
[02:55.55]忙著追逐天空中的流星
[03:01.61]人理所當然的忘記
[03:06.03]是誰風裡雨裡一直默默守護在原地
[03:13.79]原來你是我最想留住的幸運
[03:19.05]原來我們和愛情曾經靠得那麼近
[03:25.17]那為我對抗世界的決定
[03:29.68]那陪我淋的雨
[03:32.56]一幕幕都是你一塵不染的真心
[03:39.89]與你相遇好幸運
[03:43.40]可我已失去為你淚流滿面的權利
[03:49.32]但願在我看不到的天際
[03:53.97]你張開了雙翼
[03:56.98]遇見你的註定
[04:00.47]Oh 她會有多幸運
</textarea>
<script>
//先擷取點擊元素
var btn = document.getElementsByClassName(‘play‘)[0];
var mymusic = document.getElementById("myMusic");
var con = document.getElementsByClassName(‘content‘)[0];
//同一個按鈕要實現兩個功能（播放和暫停）做一個標記來儲存點擊暫停
var onOff = true;//自訂一個開關

btn.onclick = function () {//點擊實現播放暫停功能
if (onOff) {
mymusic.play();
onOff = false;//把開關設為假
//添加rotate的類名
this.className = ‘play rotate‘;
}
else {
mymusic.pause();//暫停
onOff = true;
//去掉rotate的類名
this.className = "play";
}
}

//擷取歌詞文本
var txt = document.getElementById("lrc");
var lrc = txt.value;//擷取文本域的值
// console.log(lrc);//在控制台輸出
var lrcArr = lrc.split("[");//去除[
var html = "";//定義一個空變數儲存文本
for (var i = 0; i < lrcArr.length; i++)
{
var arr = lrcArr[i].split("]");
var allTime = arr[0].split(".");
var time = allTime[0].split(":");
//把時間轉化為秒鐘
var timer = time[0] * 60 + time[1] * 1;
var text = arr[1];//文本
if (text)
{
//用一個p標籤來儲存具體的
html +="<p id="+timer+">"+text+"</p>"
}
con.innerHTML = html;//把html文本添加到歌詞盒子裡
}

var oP = con.getElementsByTagName("p");//根據標籤名
var num = 0;

//監聽音樂播放進度實現歌詞同步
mymusic.addEventListener("timeupdate", function () {
//擷取當前播放時間
var curTime = parseInt(this.currentTime);
//把目前時間和p標籤的id名進行對比，如果相同標籤變色
if (document.getElementById(curTime))
{
for (var i = 0; i < oP.length; i++) {
oP[i].style.cssText = "color:#ccc;font-size:12px;";
}
document.getElementById(curTime).style.cssText = "color:rgb(242,110,111);font-size:18px;"
if (oP[num+7].id == curTime) {//判斷成功一次num+1下次雖然curtime可能不變但是num變了，所以就每次只能判斷成功一次
con.style.top= -20 * num + "px";
num++;//
}
}
})
//監聽歌曲播放完成，停止旋轉
mymusic.addEventListener("ended", function () {
btn.className = "play";
onOff = true;
con.style.top = 0;
this.currentTime = 0;
})
</script>
</body>
</html>

js音樂播放器

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More