1. 程式人生 > >好程式設計師前端分享使用JS開發簡單的音樂播放器

好程式設計師前端分享使用JS開發簡單的音樂播放器

好程式設計師前端分享使用JS開發簡單的音樂播放器,最近,我們在教學生使用JavaScript,今天就帶大家開發一款簡單的音樂播放器。首先,最終效果如圖所示:

首先,我們來編寫html介面index.html,程式碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script

src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>

<script src="js/common.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<!--播放器-->

<audio id="song" autoplay="autoplay"></audio>

<!--整體結構-->

<div id=

"boxDiv">

<!--歌詞展示區域-->

<div id="contentDiv">

<!--歌詞顯示-->

<div id="lrcDiv"></div>

<!--上部陰影-->

<span id="bgTopSpan"></span>

<!--下部陰影-->

<span id="bgBottomSpan"></span>

</div>

<!--控制區域-->

<div id="controlDiv">

<!--進度條-->

<div id="progressDiv"></div>

<!--進度條圓點-->

<img id="pointerImg" src="img/audio/[email protected]"/>

<!--播放時間-->

<span id="playTimeSpan">00:00</span>

<!--歌曲標題-->

<span id="titleSpan"></span>

<!--總時間-->

<span id="totalTimeSpan">00:00</span>

<!--按鈕區域-->

<div id="buttonDiv">

<!--上一首按鈕-->

<img id="prevImg" src="img/audio/[email protected]"/>

<!--播放暫停按鈕-->

<img id="playOrPauseImg" src="img/audio/[email protected]"/>

<!--下一首按鈕-->

<img id="nextImg" src="img/audio/[email protected]"/>

</div>

</div>

</div>

</body>

</html>

 

接下來,編寫style.css,程式碼如下:

body{

margin: 0px;

background-color: #ccc;

}

 

#boxDiv{

width: 375px;

height: 568px;

margin: 10px auto;

position: relative;

}

 

#contentDiv{

width: 375px;

height: 460px;

background-image: url(../img/audio/[email protected]);

overflow: hidden;

}

 

#lrcDiv{

margin-top: 260px;

}

 

#lrcDiv span{

display: block;

line-height: 40px;

text-align: center;

color: white;

font-size: 20px;

}

 

#bgTopSpan{

position: absolute;

display: block;

width: 375px;

height: 30px;

top: 0px;

background-image: url(../img/audio/[email protected]);

}

 

#bgBottomSpan{

top: 430px;

position: absolute;

background-image: url(../img/audio/[email protected]);

display: block;

width: 375px;

height: 30px;

}

 

#controlDiv{

width: 375px;

height: 180px;

position: relative;

background-color: white;

}

 

#progressDiv{

background-color: red;

height: 1.5px;

width: 0px;

}

 

#pointerImg{

width: 18px;

height: 18px;

position: absolute;

top: -8.5px;

left: -3px;

}

 

#playTimeSpan{

display: block;

position: absolute;

font-size: 14px;

width: 35px;

top: 5px;

left: 5px;

}

 

#totalTimeSpan{

display: block;

position: absolute;

font-size: 14px;

width: 35px;

top: 5px;

left: 335px;

}

 

#titleSpan{

display: block;

position: absolute;

height: 30px;

width: 295px;

font-size: 20px;

text-align: center;

left: 40px;

top: 5px;

}

 

#buttonDiv{

margin-top: 40px;

position: relative;

}

 

#prevImg{

width: 40px;

height: 40px;

position: absolute;

top: 20px;

left: 60px;

}

 

#playOrPauseImg{

width: 70px;

height: 70px;

position: absolute;

top: 5px;

left: 152px;

}

 

#nextImg{

width: 40px;

height: 40px;

position: absolute;

top: 20px;

left: 275px;

}

 

最後,編寫common.js,程式碼如下:

$(function(){

// 歌曲列表

var playList = ["紅日", "狼的誘惑", "漂洋過海來看你"];

// 當前播放的歌曲序號

var currentIndex = 0;

// 播放器的原生物件

var audio = $("#song")[0];

// 播放時間陣列

var timeArr = [];

// 歌詞陣列

var lrcArr = [];

 

// 呼叫播放前設定

setup();

// 播放歌曲

playMusic();

 

// 播放歌曲

function playMusic(){

// 播放歌曲

audio.play();

// 設定為暫停的圖片

$("#playOrPauseImg").attr("src", "img/audio/[email protected]");

}

 

// 歌曲播放前設定

function setup(){

// 設定播放哪一首歌曲

// img/audio/紅日.mp3

audio.src = "img/audio/" + playList[currentIndex] + ".mp3";

// 設定歌曲的名字

$("#titleSpan").text(playList[currentIndex]);

// 設定歌詞

setLrc();

}

 

// 設定歌詞

function setLrc(){

// 清空上一首的歌詞

$("#lrcDiv span").remove();

// 清空陣列

timeArr = [];

lrcArr = [];

// 載入歌詞檔案

$.get("img/audio/" + playList[currentIndex] + ".lrc", {}, function(data){

if(data){

// 按行切割字串

var arr = data.split("\n");

// 分割歌詞

for (var i = 0; i < arr.length; i++) {

// 分割時間和歌詞

var tempArr = arr[i].split("]");

if (tempArr.length > 1){

// 新增時間和歌詞到陣列

timeArr.push(tempArr[0]);

lrcArr.push(tempArr[1]);

}

}

// 顯示歌詞

for (var i = 0; i < lrcArr.length; i++) {

$("#lrcDiv").append("<span>"+lrcArr[i]+"</span>");

}

}

});

}

 

// 播放暫停事件

$("#playOrPauseImg").click(function(){

// 如果播放器是暫停狀態

if(audio.paused){

// 繼續播放

playMusic();

}else{

// 暫停

audio.pause();

// 變成播放的圖片

$("#playOrPauseImg").attr("src", "img/audio/[email protected]");

}

});

 

// 上一首

$("#prevImg").click(function(){

// 如果是第一首,那麼跳到最後一首

if(currentIndex == 0){

currentIndex = playList.length - 1;

}else{

currentIndex--;

}

// 播放前設定

setup();

// 播放

playMusic();

});

// 下一首

$("#nextImg").click(function(){

// 如果是最後一首,就跳到第一首

if(currentIndex == playList.length - 1){

currentIndex = 0;

}else{

currentIndex++;

}

// 播放前設定

setup();

// 播放

playMusic();

});

 

// 監聽播放器播放時間改變事件

audio.addEventListener("timeupdate", function(){

// 當前播放時間

var currentTime = audio.currentTime;

// 總時間

var totalTime = audio.duration;

// 當是數字的時候

if(!isNaN(totalTime)){

// 得到播放時間與總時長的比值

var rate = currentTime / totalTime;

// 設定時間顯示

// 播放時間

$("#playTimeSpan").text(getFormatterDate(currentTime));

// 總時長

$("#totalTimeSpan").text(getFormatterDate(totalTime));

// 設定進度條

$("#progressDiv").css("width", rate * 375 + "px");

// 設定進度圓點

$("#pointerImg").css("left", (375 - 15) * rate - 3 + "px");

// 設定歌詞的顏色和內容的滾動

for (var i = 0; i < timeArr.length - 1; i++) {

if(!isNaN(getTime(timeArr[i]))){

// 當前播放時間大於等於i行的時間,並且小於下一行的時間

if (currentTime >= getTime(timeArr[i]) && currentTime < getTime(timeArr[i+1])){

// 當前行歌詞變紅色

$("#lrcDiv span:eq("+i+")").css("color", "#FF0000");

// 其他行歌詞變白色

$("#lrcDiv span:not(:eq("+i+"))").css("color", "#FFFFFF");

// 當前行歌詞滾動

$("#lrcDiv").stop(false, true).animate({"margin-top": 260 - 40 * i + "px"}, 1000);

}

}

}

}

});

 

function getTime(timeStr){

// 去掉左邊的[

var arr = timeStr.split("[");

if(arr.length > 1){

// 得到右邊的時間

var str = arr[1];

// 分割分、秒

var tempArr = str.split(":");

// 分

var m = parseInt(tempArr[0]);

// 秒

var s = parseFloat(tempArr[1]);

return m * 60 + s;

}

return 0;

}

 

// 格式化時間(00:00)

function getFormatterDate(time){

// 分

var m = parseInt(time / 60);

// 秒

var s = parseInt(time % 60);

// 補零

m = m > 9 ? m : "0" + m;

s = s > 9 ? s : "0" + s;

return m + ":" + s;

}

});

 

圖片和歌曲、歌詞請自行下載,最後,可以執