给你的wordpress添加背景音乐

2017-09-20 NOTHING 3,737 热度 0

现在很多的博客都开启PJAX局部刷新功能,所以在博客添加背景音乐更合理,妈妈再也不担心跳转网页播放器停止的问题了,喜欢听歌的朋友不妨试试。

注:本代码提取于youduBGM插件。本站已经集成到了主题,可以自由开启或者关闭,并且可以在后台设置音乐的播放地址

下面贡献下我的代码:

PHP以及JS部分

<!--音乐播放器开始。by qqdie 修改自youduBGM插件-->
<bgm>
<a id="ymusicplay" class="ymusic" onclick="playbtu();" target="_blank" data-toggle="tooltip" data-placement="left"><i id="ydmc" class="iconfont mo-iconfontstop"></i></a>
<a class="ymusic" onclick="next();" id="ydnext" target="_blank"><i class="iconfont mo-iconfontplay2"></i></a>
</bgm>
<script data-no-instant>
var yaudio = new Audio();
yaudio.controls = true;
var musicArr=[
{title:"歌名",artist:"歌手",mp3:"<?php echo akina_option('music_yi', ''); ?>",},
{title:"歌名",artist:"歌手",mp3:"<?php echo akina_option('music_er', ''); ?>",},
{title:"歌名",artist:"歌手",mp3:"<?php echo akina_option('music_san', ''); ?>",}];//后台填写播放列表
/*首次随机播放*/
var a=parseInt(Math.random()*musicArr.length);
var sj=musicArr[a];
yaudio.ti=sj.title;
yaudio.art=sj.artist;
yaudio.src=sj.mp3;
yaudio.play();
$("#ymusicplay").attr("data-original-title", yaudio.art + " - " + yaudio.ti);
</script>
<script data-no-instant src="<?php bloginfo('template_url'); ?>/js/player.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/prbug.min.js"></script>
<script>
$("#ymusicplay").attr("data-original-title", yaudio.art + " - " + yaudio.ti);
</script>
<!--音乐播放器结束-->

CSS部分

.ymusic {
z-index: 999;
position: fixed;
right: -1px;
top: 120px;
text-align: center;
background: #f6f8f8;
color: #58666e!important;
cursor: pointer;
padding: 10px 13px;
border: 1px solid #dee5e7
}
#ydnext {
top: 165px
}
bgm a:hover {
color: #2479CC
}
.icon-spin {
-webkit-animation: icon-spin 2s infinite linear;
animation: icon-spin 2s infinite linear
}
.icon-spin-music {
-webkit-animation: icon-spin 6s infinite linear;
animation: icon-spin 6s infinite linear;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}

声明:文浩子.版权所有,如未注明违者必究,均为原创|本网站采用BY-NC-SA协议授权

转载:转载请注明原文链接 - 给你的wordpress添加背景音乐