使用JS開發簡單的音樂播放器

近，我們在教學生使用JavaScript，今天就帶大家開發一款簡單的音樂播放器。首先，最終效果如圖所示：

首先，我們來編寫html界面index.html，代碼如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</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;

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;

}

#bgBottomSpan{

top: 430px;

position: absolute;

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/pause@2x.png");

}

// 歌曲播放前設置

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/play@2x.png");

}

});

// 上一首

$("#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;

}

});

圖片和歌曲、歌詞請自行下載，最后，可以運行試試了。是不是很有趣呢？想要學習更多的Java技術開發知識，關注“重慶千鋒”獲取更多的視頻教程，千鋒重慶IT培訓機構還提供兩周免費試聽課程，歡迎各位小伙伴申請試聽。

音在HTML中可以以不同的方式播放.

問題以及解決方法

在 HTML 中播放音頻并不容易！

您需要諳熟大量技巧，以確保您的音頻文件在所有瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能夠播放。

在這W3CSchool 為您總結了問題和解決方法。

使用插件

瀏覽器插件是一種擴展瀏覽器標準功能的小型計算機程序。

插件可以使用 <object> 標簽或者 <embed> 標簽添加在頁面上.

這些標簽定義資源（通常非 HTML 資源）的容器，根據類型，它們即會由瀏覽器顯示，也會由外部插件顯示。

使用 <embed> 元素

下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件：

實例

問題:

<embed> 標簽在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗證。
不同的瀏覽器對音頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
如果用戶的計算機未安裝插件，無法播放音頻。
如果把該文件轉換為其他格式，仍然無法在所有瀏覽器中播放。

使用 <object> 元素

下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件：

實例

問題:

不同的瀏覽器對音頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
如果用戶的計算機未安裝插件，無法播放音頻。
如果把該文件轉換為其他格式，仍然無法在所有瀏覽器中播放。

使用 HTML5 <audio> 元素

HTML5 <audio> 元素是一個 HTML5 元素，在 HTML 4 中是非法的，但在所有瀏覽器中都有效。

The <audio> element works in all modern browsers.

以下我們將使用 <audio> 標簽來描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同樣添加了一個 OGG 類型文件(Firefox 和 Opera瀏覽器中有效).如果失敗，它會顯示一個錯誤文本信息:

實例

Your browser does not support this audio format.

</audio>

問題:

<audio> 標簽在 HTML 4 中是無效的。您的頁面無法通過 HTML 4 驗證。
您必須把音頻文件轉換為不同的格式。
<audio> 元素在老式瀏覽器中不起作用。

最好的 HTML 解決方法

下面的例子使用了兩個不同的音頻格式。HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。

實例

</audio>

問題:

您必須把音頻轉換為不同的格式。
<embed> 元素無法回退來顯示錯誤消息。

雅虎媒體播放器 - 一個簡單的添加音頻到你網站上的方式

使用雅虎播放器是免費的。如需使用它，您需要把這段 JavaScript 插入網頁底部：

雅虎播放器可以播放MP3以及其他各種格式。你只需添加一行代碼到你的頁面或博客中就可以輕松地將您的HTML頁面制作成專業的播放列表：

實例

<a href="horse.mp3">Play Sound</a>

如果你要使用它，您需要把這段 JavaScript 插入網頁底部：

然后只需簡單地把 MP3 文件鏈接到您的 HTML 中，JavaScript 會自動地為每首歌創建播放按鈕：

...

雅虎媒體播放器為您的用戶提供的是一個小型的播放按鈕，而不是完整的播放器。不過，當您點擊該按鈕，會彈出完整的播放器。

請注意，這個播放器始終停靠在窗框底部。只需點擊它，就可將其滑出。

使用超鏈接

如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會使用"輔助應用程序"來播放文件。

以下代碼片段顯示指向 mp3 文件的鏈接。如果用戶點擊該鏈接，瀏覽器會啟動"輔助應用程序"來播放該文件：

實例

<a href="horse.mp3">Play the sound</a>

內聯的聲音說明

當您在網頁中包含聲音，或者作為網頁的組成部分時，它被稱為內聯聲音。

如果您打算在 web 應用程序中使用內聯聲音，您需要意識到很多人都覺得內聯聲音令人惱火。同時請注意，用戶可能已經關閉了瀏覽器中的內聯聲音選項。

我們最好的建議是只在用戶希望聽到內聯聲音的地方包含它們。一個正面的例子是，在用戶需要聽到錄音并點擊某個鏈接時，會打開頁面然后播放錄音。

HTML 多媒體標簽

New : HTML5 新標簽

標簽	描述
<embed>	定義內嵌對象。HTML4 中不贊成，HTML5 中允許。
<object>	定義內嵌對象。
<param>	定義對象的參數。
<audio>New	定義了聲音內容
<video>New	定義一個視頻或者影片
<source>New	定義了media元素的多媒體資源(<video> 和 <audio>)
<track>New	規定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

現跑馬燈的方法很多，其中最簡單的是采用一句Html代碼來實現，我們在需要出現跑馬燈效果的地方插入“<marquee>滾動的文字</marquee>”語句，它的效果如下所示：

滾動的文字

適當的運用<marquee>標簽的參數，可以表現出不同的效果，請看下面的幾個例子：

1、左右彈來彈去的跑馬燈

彈來彈去跑馬燈! 實現的方法就是在IE的標簽上稍微多加了幾個參數產生了更加豐富的變化。設置behavior=alternate表示雙向移動，direction= left表示運動方向向左。marquee的寬度可以使用絕對象素值，例如width=200等這個值限定了跑馬燈滾動的范圍。需要說明的是該效果在 Netscape下是看不到的。

源碼粘貼框：

<marquee width=400 behavior=alternate direction=left align=middle>彈來彈去跑馬燈!</marquee>

２、跑的很快的跑馬燈

跑的很快跑馬燈!　只要在<marquee>標簽后面加上“scrollamount=15”即可,修改=后邊的數字參數即可限制文字移動的速度。

３、帶有超級鏈接的跑馬燈

帶超級鏈接的跑馬燈!點我試試？還有一條呢!點我試試？　實現的方法很簡單，把整個<marquee></marquee>語句包含在超鏈接中就行，你看看下面的代碼就清楚了。當然你也可以把包含在<marquee></marquee>中的各條內容分別加上不同的鏈接，這樣的跑馬燈就可用來發布滾動新聞或是做站點導航了。

如果你想給跑馬燈的文字加上顏色，換用不同的字體（默認是宋體，換體就要加代碼），只要在文字前加上<FONT face=楷體_GB2312 color=#ff0000 size=3>就行了，你可在“face=”后邊換上你喜歡的字體，在“color=”后邊換上你喜歡的字顏色，在“size=”后邊換上適合的字號，如果想讓字體加粗，就再加上<STRONG>。

請看一下效果： 帶超級鏈接的跑馬燈!點我試試？ 還有一條呢!點我試試？上面效果的代碼碼如下：

<marquee width=400 scrollamount=2> <a href=http://www.taobaojp5.tk><FONT face=楷體_GB2312 color=#ff0000 size=3><STRONG>帶有超鏈接的跑馬燈!點我試試？</a> <a href=http://954872988.qzone.qq.com/;還有一條呢!點我試試？</FONT></STRONG></a> </marquee>

以上幾個例子都是<marquee>標簽參數的應用，下面把所有可以利用的參數列在表中供你參考，不過還是要提醒你，<marquee>標簽只被IE所支持，使用Netscape瀏覽器是看不到的噢。

參數用法介紹behavior=scroll, slide, alternate跑馬方式：循環繞行，只跑一次就停住，來回往復運動direction=left,right跑馬方向：從左向右，從右向左loop=100跑馬次數：循環100次，如不寫默認為一直循環width=100%,height=200跑馬范圍：寬為100%，高為200像素scrollamount=20跑馬速度：數越大越快scrolldelay=500跑馬延時：毫秒數，利用它可實現躍進式滾動hspace=20，vspace=20跑馬區域與其它區域間的空白大小bgcolor=#00FFCC跑馬區域的背景顏色face=楷體_GB2312跑馬燈文字字體color=#ff0000跑馬燈文字顏色size=3跑馬燈文字字號STRONG跑馬燈文字加粗

你已經看到，盡管<marquee>參數不少，但畢竟不能實現復雜的和自定義的特殊跑馬燈效果，而且還有瀏覽器限制，所以我們更多情況下會采用JavaScript來實現跑馬燈。

在線咨詢

上一篇：js和css基礎知識總結
下一篇：CSS基礎教程：outline（輪廓）屬性實例

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

使用JS開發簡單的音樂播放器

您的項目需求