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

发布者

Xavier

这个人很懒,什么都懒得写。

发表评论