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