WordPress添加背景音乐plus教程

几天前我写了一篇WordPress自定义美化的文章，文中第三个添加背景音乐的方法我总是觉得不够好，因为添加一首背景音乐每次进入都是响起同一首歌，即便是我特别喜欢，听久了也会觉得很厌，而且原来只实现了音乐，没有添加歌名，访客也不知道正在播放的是什么歌，所以我决定要再改一改。

对于背景音乐这个部件，我心里的构思是有一个音乐库，歌曲由我上传到存储介质中，打开网页部件自动从存储介质中读取所有音乐，并且自动播放第一首，一曲结束播放下一首，部件要能显示正在播放的音乐名，显示所有音乐列表，点击列表中的音乐名能够实现切歌。

怀揣着满满的憧憬，我开始码代码：
显示歌曲名用个span标签来实现，通过innerHTML来进行更改，没什么好说的。
音乐列表用无序列表，项目符号设置为none，有几首歌添加几个li
对每个li添加一个鼠标点击监听事件onclick
js脚本对onclick进行实现，通过li.innerHTML与歌名进行对比，相等既更改Audio标签的src属性，更改歌名，对Audio音频进行重载

代码如下：

&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就能实现呢？

经过一番尝试，获得以下代码

<?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文件中的信息再来战。