几天前我写了一篇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文件中的信息再来战。