整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
近，我們?cè)诮虒W(xué)生使用JavaScript，今天就帶大家開發(fā)一款簡(jiǎn)單的音樂播放器。首先，最終效果如圖所示：
首先，我們來編寫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>
<!--整體結(jié)構(gòu)-->
<div id="boxDiv">
<!--歌詞展示區(qū)域-->
<div id="contentDiv">
<!--歌詞顯示-->
<div id="lrcDiv"></div>
<!--上部陰影-->
<span id="bgTopSpan"></span>
<!--下部陰影-->
<span id="bgBottomSpan"></span>
</div>
<!--控制區(qū)域-->
<div id="controlDiv">
<!--進(jìn)度條-->
<div id="progressDiv"></div>
<!--進(jìn)度條圓點(diǎn)-->
<img id="pointerImg" src="img/audio/progress_pointer@2x.png"/>
<!--播放時(shí)間-->
<span id="playTimeSpan">00:00</span>
<!--歌曲標(biāo)題-->
<span id="titleSpan"></span>
<!--總時(shí)間-->
<span id="totalTimeSpan">00:00</span>
<!--按鈕區(qū)域-->
<div id="buttonDiv">
<!--上一首按鈕-->
<img id="prevImg" src="img/audio/play_above_song@2x.png"/>
<!--播放暫停按鈕-->
<img id="playOrPauseImg" src="img/audio/play@2x.png"/>
<!--下一首按鈕-->
<img id="nextImg" src="img/audio/play_next_song@2x.png"/>
</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/play_bg@2x.png);
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/play_top_shadow@2x.png);
}
#bgBottomSpan{
top: 430px;
position: absolute;
background-image: url(../img/audio/play_bottom_shadow@2x.png);
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 = ["紅日", "狼的誘惑", "漂洋過海來看你"];
// 當(dāng)前播放的歌曲序號(hào)
var currentIndex = 0;
// 播放器的原生對(duì)象
var audio = $("#song")[0];
// 播放時(shí)間數(shù)組
var timeArr = [];
// 歌詞數(shù)組
var lrcArr = [];
// 調(diào)用播放前設(shè)置
setup();
// 播放歌曲
playMusic();
// 播放歌曲
function playMusic(){
// 播放歌曲
audio.play();
// 設(shè)置為暫停的圖片
$("#playOrPauseImg").attr("src", "img/audio/pause@2x.png");
}
// 歌曲播放前設(shè)置
function setup(){
// 設(shè)置播放哪一首歌曲
// img/audio/紅日.mp3
audio.src = "img/audio/" + playList[currentIndex] + ".mp3";
// 設(shè)置歌曲的名字
$("#titleSpan").text(playList[currentIndex]);
// 設(shè)置歌詞
setLrc();
}
// 設(shè)置歌詞
function setLrc(){
// 清空上一首的歌詞
$("#lrcDiv span").remove();
// 清空數(shù)組
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++) {
// 分割時(shí)間和歌詞
var tempArr = arr[i].split("]");
if (tempArr.length > 1){
// 添加時(shí)間和歌詞到數(shù)組
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(){
// 如果播放器是暫停狀態(tài)
if(audio.paused){
// 繼續(xù)播放
playMusic();
}else{
// 暫停
audio.pause();
// 變成播放的圖片
$("#playOrPauseImg").attr("src", "img/audio/play@2x.png");
}
});
// 上一首
$("#prevImg").click(function(){
// 如果是第一首，那么跳到最后一首
if(currentIndex == 0){
currentIndex = playList.length - 1;
}else{
currentIndex--;
}
// 播放前設(shè)置
setup();
// 播放
playMusic();
});
// 下一首
$("#nextImg").click(function(){
// 如果是最后一首，就跳到第一首
if(currentIndex == playList.length - 1){
currentIndex = 0;
}else{
currentIndex++;
}
// 播放前設(shè)置
setup();
// 播放
playMusic();
});
// 監(jiān)聽播放器播放時(shí)間改變事件
audio.addEventListener("timeupdate", function(){
// 當(dāng)前播放時(shí)間
var currentTime = audio.currentTime;
// 總時(shí)間
var totalTime = audio.duration;
// 當(dāng)是數(shù)字的時(shí)候
if(!isNaN(totalTime)){
// 得到播放時(shí)間與總時(shí)長(zhǎng)的比值
var rate = currentTime / totalTime;
// 設(shè)置時(shí)間顯示
// 播放時(shí)間
$("#playTimeSpan").text(getFormatterDate(currentTime));
// 總時(shí)長(zhǎng)
$("#totalTimeSpan").text(getFormatterDate(totalTime));
// 設(shè)置進(jìn)度條
$("#progressDiv").css("width", rate * 375 + "px");
// 設(shè)置進(jìn)度圓點(diǎn)
$("#pointerImg").css("left", (375 - 15) * rate - 3 + "px");
// 設(shè)置歌詞的顏色和內(nèi)容的滾動(dòng)
for (var i = 0; i < timeArr.length - 1; i++) {
if(!isNaN(getTime(timeArr[i]))){
// 當(dāng)前播放時(shí)間大于等于i行的時(shí)間，并且小于下一行的時(shí)間
if (currentTime >= getTime(timeArr[i]) && currentTime < getTime(timeArr[i+1])){
// 當(dāng)前行歌詞變紅色
$("#lrcDiv span:eq("+i+")").css("color", "#FF0000");
// 其他行歌詞變白色
$("#lrcDiv span:not(:eq("+i+"))").css("color", "#FFFFFF");
// 當(dāng)前行歌詞滾動(dòng)
$("#lrcDiv").stop(false, true).animate({"margin-top": 260 - 40 * i + "px"}, 1000);
}
}
}
}
});
function getTime(timeStr){
// 去掉左邊的[
var arr = timeStr.split("[");
if(arr.length > 1){
// 得到右邊的時(shí)間
var str = arr[1];
// 分割分、秒
var tempArr = str.split(":");
// 分
var m = parseInt(tempArr[0]);
// 秒
var s = parseFloat(tempArr[1]);
return m * 60 + s;
}
return 0;
}
// 格式化時(shí)間（00：00）
function getFormatterDate(time){
// 分
var m = parseInt(time / 60);
// 秒
var s = parseInt(time % 60);
// 補(bǔ)零
m = m > 9 ? m : "0" + m;
s = s > 9 ? s : "0" + s;
return m + ":" + s;
}
});
圖片和歌曲、歌詞請(qǐng)自行下載，最后，可以運(yùn)行試試了。是不是很有趣呢？想要學(xué)習(xí)更多的Java技術(shù)開發(fā)知識(shí)，關(guān)注“重慶千鋒”獲取更多的視頻教程，千鋒重慶IT培訓(xùn)機(jī)構(gòu)還提供兩周免費(fèi)試聽課程，歡迎各位小伙伴申請(qǐng)?jiān)嚶牎?/p>
音在HTML中可以以不同的方式播放.
問題以及解決方法
在 HTML 中播放音頻并不容易！
您需要諳熟大量技巧，以確保您的音頻文件在所有瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能夠播放。
在這W3CSchool 為您總結(jié)了問題和解決方法。
使用插件
瀏覽器插件是一種擴(kuò)展瀏覽器標(biāo)準(zhǔn)功能的小型計(jì)算機(jī)程序。
插件可以使用 <object> 標(biāo)簽 或者 <embed> 標(biāo)簽添加在頁面上.
這些標(biāo)簽定義資源（通常非 HTML 資源）的容器，根據(jù)類型，它們即會(huì)由瀏覽器顯示，也會(huì)由外部插件顯示。
使用 <embed> 元素
<embed>標(biāo)簽定義外部（非 HTML）內(nèi)容的容器。（這是一個(gè) HTML5 標(biāo)簽，在 HTML4 中是非法的，但是所有瀏覽器中都有效）。
下面的代碼片段能夠顯示嵌入網(wǎng)頁中的 MP3 文件：
實(shí)例
<embed height="50" width="100" src="horse.mp3">
問題:
<embed> 標(biāo)簽在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗(yàn)證。
不同的瀏覽器對(duì)音頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
如果用戶的計(jì)算機(jī)未安裝插件，無法播放音頻。
如果把該文件轉(zhuǎn)換為其他格式，仍然無法在所有瀏覽器中播放。
使用 <object> 元素
<object tag> 標(biāo)簽也可以定義外部（非 HTML）內(nèi)容的容器。
下面的代碼片段能夠顯示嵌入網(wǎng)頁中的 MP3 文件：
實(shí)例
<object height="50" width="100" data="horse.mp3"></object>
問題:
不同的瀏覽器對(duì)音頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
如果用戶的計(jì)算機(jī)未安裝插件，無法播放音頻。
如果把該文件轉(zhuǎn)換為其他格式，仍然無法在所有瀏覽器中播放。
使用 HTML5 <audio> 元素
HTML5 <audio> 元素是一個(gè) HTML5 元素，在 HTML 4 中是非法的，但在所有瀏覽器中都有效。
The <audio> element works in all modern browsers.
以下我們將使用 <audio> 標(biāo)簽來描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同樣添加了一個(gè) OGG 類型文件(Firefox 和 Opera瀏覽器中有效).如果失敗，它會(huì)顯示一個(gè)錯(cuò)誤文本信息:
實(shí)例
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>
問題:
<audio> 標(biāo)簽在 HTML 4 中是無效的。您的頁面無法通過 HTML 4 驗(yàn)證。
您必須把音頻文件轉(zhuǎn)換為不同的格式。
<audio> 元素在老式瀏覽器中不起作用。
最好的 HTML 解決方法
下面的例子使用了兩個(gè)不同的音頻格式。HTML5 <audio> 元素會(huì)嘗試以 mp3 或 ogg 來播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。
實(shí)例
<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
問題:
您必須把音頻轉(zhuǎn)換為不同的格式。
<embed> 元素?zé)o法回退來顯示錯(cuò)誤消息。
雅虎媒體播放器 - 一個(gè)簡(jiǎn)單的添加音頻到你網(wǎng)站上的方式
使用雅虎播放器是免費(fèi)的。如需使用它，您需要把這段 JavaScript 插入網(wǎng)頁底部：
雅虎播放器可以播放MP3以及其他各種格式。你只需添加一行代碼到你的頁面或 博客中就可以輕松地將您的HTML頁面制作成 專業(yè)的播放列表：
實(shí)例
<a href="horse.mp3">Play Sound</a>
<script src="http://mediaplayer.yahoo.com/latest"></script>
如果你要使用它，您需要把這段 JavaScript 插入網(wǎng)頁底部：
<script src="http://mediaplayer.yahoo.com/latest"></script>
然后只需簡(jiǎn)單地把 MP3 文件鏈接到您的 HTML 中，JavaScript 會(huì)自動(dòng)地為每首歌創(chuàng)建播放按鈕：
<a href="song1.mp3">Play Song 1</a>
<a href="song2.wav">Play Song 2</a>
...
...
雅虎媒體播放器為您的用戶提供的是一個(gè)小型的播放按鈕，而不是完整的播放器。不過，當(dāng)您點(diǎn)擊該按鈕，會(huì)彈出完整的播放器。
請(qǐng)注意，這個(gè)播放器始終停靠在窗框底部。只需點(diǎn)擊它，就可將其滑出。
使用超鏈接
如果網(wǎng)頁包含指向媒體文件的超鏈接，大多數(shù)瀏覽器會(huì)使用"輔助應(yīng)用程序"來播放文件。
以下代碼片段顯示指向 mp3 文件的鏈接。如果用戶點(diǎn)擊該鏈接，瀏覽器會(huì)啟動(dòng)"輔助應(yīng)用程序"來播放該文件：
實(shí)例
<a href="horse.mp3">Play the sound</a>
內(nèi)聯(lián)的聲音說明
當(dāng)您在網(wǎng)頁中包含聲音，或者作為網(wǎng)頁的組成部分時(shí)，它被稱為內(nèi)聯(lián)聲音。
如果您打算在 web 應(yīng)用程序中使用內(nèi)聯(lián)聲音，您需要意識(shí)到很多人都覺得內(nèi)聯(lián)聲音令人惱火。同時(shí)請(qǐng)注意，用戶可能已經(jīng)關(guān)閉了瀏覽器中的內(nèi)聯(lián)聲音選項(xiàng)。
我們最好的建議是只在用戶希望聽到內(nèi)聯(lián)聲音的地方包含它們。一個(gè)正面的例子是，在用戶需要聽到錄音并點(diǎn)擊某個(gè)鏈接時(shí)，會(huì)打開頁面然后播放錄音。
HTML 多媒體標(biāo)簽
New : HTML5 新標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <embed> | 定義內(nèi)嵌對(duì)象。HTML4 中不贊成，HTML5 中允許。 |
| <object> | 定義內(nèi)嵌對(duì)象。 |
| <param> | 定義對(duì)象的參數(shù)。 |
| <audio>New | 定義了聲音內(nèi)容 |
| <video>New | 定義一個(gè)視頻或者影片 |
| <source>New | 定義了media元素的多媒體資源(<video> 和 <audio>) |
| <track>New | 規(guī)定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>) |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
了美化網(wǎng)站，我在網(wǎng)站上面添加了一個(gè)HTML懸浮音樂播放器，先來看看一下效果圖。
如何在自己的網(wǎng)站上添加HTML懸浮音樂播放器呢？今天和你們分享
首先申明三點(diǎn)：
1、本播放器實(shí)際上是調(diào)用網(wǎng)易云音樂的音樂進(jìn)行播放，音樂版權(quán)歸網(wǎng)易云音樂所有，僅供個(gè)人學(xué)習(xí)研究，用于商用的后果自負(fù)！
2、本播放器的演示效果可以在我的博客首頁看到，默認(rèn)支持所有Html和PHP環(huán)境的網(wǎng)站。
3、本播放器可以使用電腦、手機(jī)、IPAD等設(shè)備訪問，自適應(yīng)。）
具體的操作方法：
在網(wǎng)站源文件中（如果有單獨(dú)的頁腳文件，也可以放在頁腳文件里面）添加這三行代碼：
<!--音樂播放器-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://myhkw.cn/player/js/player.js" id="myhk" key="demo" m="1"></script>
然后保存發(fā)布，在瀏覽器刷新網(wǎng)頁就看到效果了
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
