WordPress添加背景音乐plus教程

几天前我写了一篇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

&nbsp;&nbsp;正在播放《<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文件中的信息再来战。