简易版
<!--在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 标签
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 |
src | url | 要播放的音频的 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>
评论前必须登录!
注册