但行好事
莫论前程❤

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 标签

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
looploop如果出现该属性,则每当音频结束时重新开始播放。
preloadpreload如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
srcurl要播放的音频的 URL。

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

显示歌曲名用个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>
赞(3) 打赏
未经允许不得转载:刘鹏博客 » WordPress添加背景音乐
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏