WordPress添加背景音乐

简易版

<!--在Wordpress——>外观——>小工具——>自定义HTML中插入如下代码-->
<audio src="音乐文件链接" autoplay="autoplay" controls="controls" loop="loop" preload="auto" id="bgAudio">
    你的浏览器不支持背景音乐，请更换浏览器！！！
</audio>
<!--设置背景音乐音量-->
<script>document.getElementById("bgAudio").volume = 0.2;</script>

W3school：HTML 标签

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

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

代码如下：

  正在播放《<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>

修改后:

  正在播放《<span id="nameofmusic">Git Fresh - Booty Music</span>》
<audio src="http://p4uqxxpyg.bkt.clouddn.com/%E6%9D%8E%E8%A2%81%E6%9D%B0%20-%20%E7%A6%BB%E4%BA%BA%E6%84%81.mp3" 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)">Git Fresh - Booty Music</li>
    <li id="music2" name="music2" onclick="changemusic(this)">离人愁</li>
    <li id="music3" name="music3" onclick="changemusic(this)">young for you</li>
</ul>
<script type="text/javascript">
    function changemusic(music){
        if(music.innerHTML==("Git Fresh - Booty Music")){
            document.getElementById("bgAudio").src="http://p4uqxxpyg.bkt.clouddn.com/Git%20Fresh%20-%20Booty%20Music.mp3";
            document.getElementById("nameofmusic").innerHTML=("Git Fresh - Booty Music");
            document.getElementById("bgAudio").load();
        }
        if(music.innerHTML==("离人愁")){
            document.getElementById("bgAudio").src="http://p4uqxxpyg.bkt.clouddn.com/%E6%9D%8E%E8%A2%81%E6%9D%B0%20-%20%E7%A6%BB%E4%BA%BA%E6%84%81.mp3";
            document.getElementById("nameofmusic").innerHTML=("离人愁");
            document.getElementById("bgAudio").load();
        }
        if(music.innerHTML==("young for you")){
            document.getElementById("bgAudio").src="http://p4uqxxpyg.bkt.clouddn.com/%E5%B0%8F%E6%A0%B9%E5%8F%B7%20-%20young%20for%20you.mp3";
            document.getElementById("nameofmusic").innerHTML=("young for you");
            document.getElementById("bgAudio").load();
        }
    }
</script>