幾天前我寫了一篇WordPress自定義美化的文章，文中第三個添加背景音樂的方法我總是覺得不夠好，因為添加一首背景音樂每次進入都是響起同一首歌，即便是我特別喜歡，聽久了也會覺得很厭，而且原來只實現了音樂，沒有添加歌名，訪客也不知道正在播放的是什么歌，所以我決定要再改一改。
對於背景音樂這個部件，我心里的構思是有一個音樂庫，歌曲由我上傳到存儲介質中，打開網頁部件自動從存儲介質中讀取所有音樂，並且自動播放第一首，一曲結束播放下一首，部件要能顯示正在播放的音樂名，顯示所有音樂列表，點擊列表中的音樂名能夠實現切歌。
懷揣着滿滿的憧憬，我開始碼代碼：
顯示歌曲名用個span標簽來實現，通過innerHTML來進行更改，沒什么好說的。
音樂列表用無序列表，項目符號設置為none，有幾首歌添加幾個li
對每個li添加一個鼠標點擊監聽事件onclick
js腳本對onclick進行實現，通過li.innerHTML與歌名進行對比，相等既更改Audio標簽的src屬性，更改歌名，對Audio音頻進行重載
代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
正在播放《<
span
id
=
"nameofmusic"
>歌名一</
span
>》
<
audio
src
=
"歌曲鏈接一"
autoplay
=
"autoplay"
controls
=
"controls"
loop
=
"loop"
preload
=
"auto"
id
=
"bgAudio"
>
你的瀏覽器不支持背景音樂，請更換瀏覽器！！！
</
audio
>
<!--背景音樂音量-->
<
script
>document.getElementById("bgAudio").volume = 0.2;</
script
>
<!--音樂列表-->
<
ul
style
=
"list-style-type: none;"
>
<
li
id
=
"music1"
name
=
"music1"
onclick
=
"changemusic(this)"
>歌名一</
li
>
<
li
id
=
"music2"
name
=
"music2"
onclick
=
"changemusic(this)"
>歌名二</
li
>
<
li
id
=
"music3"
name
=
"music3"
onclick
=
"changemusic(this)"
>歌名三</
li
>
</
ul
>
<
script
type
=
"text/javascript"
>
function changemusic(music){
if(music.innerHTML==("歌名一")){
document.getElementById("bgAudio").src="歌曲鏈接一";
document.getElementById("nameofmusic").innerHTML=("歌名一");
document.getElementById("bgAudio").load();
}
if(music.innerHTML==("歌名二")){
document.getElementById("bgAudio").src="歌曲鏈接二";
document.getElementById("nameofmusic").innerHTML=("歌名二");
document.getElementById("bgAudio").load();
}
if(music.innerHTML==("歌名三")){
document.getElementById("bgAudio").src="歌曲鏈接三";
document.getElementById("nameofmusic").innerHTML=("歌名三");
document.getElementById("bgAudio").load();
}
}
</
script
>
|
Before：
After：
這就實現了一個簡易的HTML音樂播放器了，問題是並沒有達到一開始的構想啊，一開始可是構思着能夠從存儲介質中讀取音頻的。
我的音頻文件使用的是騰訊雲COS對象存儲，騰訊雲提供了XML API，可惜不會用。
打開XML API鏈接，顯示的內容讓我想起了我之前通過必應接口獲取每日美圖（可參考文章：wordpress使用必應每日一圖作登錄頁面背景/）時也用過類似的XML API，那是不是改一改必應那個php就能實現呢？
經過一番嘗試，獲得以下代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?php
$str
=
file_get_contents
(
'XML API鏈接'
);
if
(preg_match(
"/music(.+?).mp3/"
,
$str
,
$matches
)) {
//正則表達式獲取文件名
$musicurl
=
'對象存儲域名'
.
$matches
[0];
//拼接歌曲URL
}
if
(
$musicurl
) {
header(
'Content-Type: audio/mp3'
);
//瀏覽器將根據這個屬性進行解析
@ob_end_clean();
@readfile(
$musicurl
);
@
flush
();
@ob_flush();
exit
();
}
else
{
exit
(
'error'
);
}
?>
|
以上代碼實現了從XML API中讀取排在第一位的歌曲，但是只能傳遞一首歌曲
比如這個示例
“革命尚未成功，同志仍需努力”
暫時只能先這樣了，等我研究研究javascript如何讀取XML文件中的信息再來戰。