源码截图
复制下方代码在后台自定义HTML里粘贴保存即可：
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="//at.alicdn.com/t/c/font_4343998_i6hbuh47j.js"></script>
<style>
* {
padding: 0;
margin: 0;
font-size: 16px;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
text-decoration: none;
list-style: none;
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.xfyykp {
width: 280px;
height: 140px;
position: fixed;
left: -300px;
bottom: 80px;
z-index: 999;
border-radius: 0 20px 20px 0;
background: url(../images/bg-cat-main.png) no-repeat top;
background-size: 100% auto;
padding-top: 30px;
transition: left 1s linear 0s;
}
.bfq {
width: 100%;
height: 140px;
background-image: linear-gradient(180deg, #FFF2EF 0%, #FFFFFF 50%);
box-shadow: rgb(255, 209, 216) 0px 1px 4px 0px inset;
display: flex;
padding-top: 10px;
}
.yykjtop {
display: flex;
}
.gqxx {
width: 210px;
height: 60px;
padding: 0 5px;
}
.yyfm {
width: 50px;
height: 50px;
flex-shrink: 0;
/*防止被压缩*/
}
.yyfm img {
width: 100%;
height: 100%;
border-radius: 20px;
border: 3px solid #FFD1D8;
}
.yykj {
width: 280px;
padding: 0 10px;
}
.yykj h2 {
color: #ffa9b8;
text-align: center;
font-weight: bold;
padding-top: 10px;
height: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#yyzuozhe {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #78c1ff;
font-weight: bold;
text-align: center;
margin-bottom: 5px;
font-size: 13px;
}
.xys:active {
position: relative;
left: 5px;
}
.bfzt:active {
position: relative;
left: 5px;
}
.kjy:active {
position: relative;
left: 5px;
}
.jindutiao {
height: auto;
}
#progressBar {
width: 100%;
height: 10px;
border-radius: 20px;
background-color: #ccc;
position: relative;
overflow: hidden;
}
#progressBar .progress {
height: 100%;
border-radius: 20px;
background-color: #ffa9b8;
position: absolute;
top: 0;
left: 0;
}
.yyshijian {
display: flex;
justify-content: space-between;
margin: 5px 0;
}
.bfqan {
display: flex;
justify-content: space-around;
}
.bfqan div svg {
width: 100%;
height: 100%;
background-color: #fff;
}
.bfqan div {
width: 20px;
height: 20px;
overflow: hidden;
}
#yousheng {
display: block;
}
.zkan {
width: 30px;
height: 140px;
line-height: 160px;
background-color: #FFD1D8;
position: absolute;
border-radius: 0 15px 15px 0;
right: -30px;
top: 30px;
}
.zkan svg {
width: 30px;
height: 30px;
transform: scaleX(1);
transition: transform 0.5s linear 0s;
}
</style>
<div class="xfyykp" id="xfyykpbox" style="left: -280px;">
<div class="bfq">
<div class="yykj">
<div class="yykjtop">
<div class="yyfm">
<img id="yyimg" data-src="" >
</div>
<div class="gqxx">
<h2 id="yyname">歌曲名</h2>
<p id="yyzuozhe">作者</p>
</div>
</div>
<div class="jindutiao">
<audio id="bgMusic" src=""></audio>
<div id="progressBar"></div>
<div class="yyshijian">
<p id="currentTime">0:00</p>
<p id="zongsc">00:00</p>
</div>
</div>
<div class="bfqan">
<div class="bfzt">
<svg id="bofang" class="icon" aria-hidden="true">
<use xlink:href="#icon-bofang" rel="external nofollow"></use>
</svg>
<svg id="zanting" class="icon" aria-hidden="true">
<use xlink:href="#icon-zanting" rel="external nofollow"></use>
</svg>
</div>
<div class="xys">
<svg id="xiayishou" class="icon" aria-hidden="true">
<use xlink:href="#icon-xiayishou" rel="external nofollow"></use>
</svg>
</div>
<div class="kjy" id="kjyb">
<svg id="yousheng" class="icon" aria-hidden="true">
<use xlink:href="#icon-yangshengqi" rel="external nofollow"></use>
</svg>
<svg id="wusheng" class="icon" aria-hidden="true">
<use xlink:href="#icon-sound-off" rel="external nofollow"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="zkan" id="zkxtb">
<svg class="icon" id="zkxtbx" aria-hidden="true">
<use xlink:href="#icon-zhankai" rel="external nofollow"></use>
</svg>
</div>
</div>
<script>
function xfyykpgb() {
const xfyykpgbb = document.getElementById('xfyykpbox'),
zkxtbfz = document.getElementById('zkxtbx');
if (xfyykpgbb.style.left === '-280px') {
xfyykpgbb.style.left = '0';
zkxtbfz.style.transform = 'rotate(180deg)';
bofang.style.display = 'none'
zanting.style.display = 'block'
audio.play();
} else {
xfyykpgbb.style.left = '-280px';
zkxtbfz.style.transform = 'rotate(0deg)';
}
}
const zkan = document.querySelector('.zkan')
zkan.addEventListener('click', () => xfyykpgb())
// 获取音频和控件
const audio = document.getElementById('bgMusic')
, bofang = document.getElementById('bofang')
, zanting = document.getElementById('zanting')
, xiayishou = document.getElementById('xiayishou')
, yousheng = document.getElementById('yousheng')
, wusheng = document.getElementById('wusheng')
, $xys = $('.xys')
, zongsc = document.getElementById("zongsc");// 获取需要显示总时长的p标签
// 进度条
var progressBar = document.getElementById('progressBar');
var currentTimeText = document.getElementById('currentTime');
progressBar.innerHTML = '<div class="progress"></div>';
var progress = progressBar.getElementsByClassName('progress')[0];
audio.addEventListener('timeupdate', function () {
var percent = (audio.currentTime / audio.duration) * 100;
progress.style.width = percent + '%';
var currentMinutes = Math.floor(audio.currentTime / 60);
var currentSeconds = Math.floor(audio.currentTime % 60);
currentTimeText.textContent = currentMinutes + ':' + (currentSeconds < 10 ? '0' : '') + currentSeconds;
});
progressBar.addEventListener('click', function (e) {
var percent = (e.offsetX / progressBar.offsetWidth) * 100;
audio.currentTime = (percent / 100) * audio.duration;
});
// 获取音乐总时长
audio.addEventListener("loadedmetadata", function () {
var totalDuration = audio.duration;
var minutes = Math.floor(totalDuration / 60);
var seconds = Math.floor(totalDuration % 60);
zongsc.textContent = (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds; // 显示总时长
});
// 播放/暂停
bofang.addEventListener("click", function () {
audio.play()
bofang.style.display = 'none'
zanting.style.display = 'block'
});
zanting.addEventListener("click", function () {
audio.pause()
bofang.style.display = 'block'
zanting.style.display = 'none'
});
// 下一首
// 封装随机数值
const random = (max, min) => Math.floor(Math.random() * (max - min + 1)) + min
// fetch get请求
fetch('https://api.xfyun.club/musicAll/?sortAll=%E7%83%AD%E6%AD%8C%E6%A6%9C')
.then(res => res.json())
.then(data => {
$xys.on('click', () => {
const i = random(data.length, 0)
// 获取音乐总时长 duration
const { artistsname, name, picurl, url, duration } = data[i]
$('#yyname').text(name);//引入api歌曲名
$('#yyimg').attr('src', picurl);//引入api歌曲图片
$('#bgMusic').attr('src', url);//引入api歌曲地址
$('#yyzuozhe').text(artistsname);//引入api歌曲作者
audio.play().catch(err => console.warn('浏览器默认限制了自动播放: ' + err))
bofang.style.display = 'none'
zanting.style.display = 'block'
})
$xys.trigger('click')
})
.catch(err => console.error(`请求失败：${err}`))
// 播放结束自动下一首
document.getElementById('bgMusic').addEventListener('ended', function () {
// 音乐播放结束后执行的事件
console.log('音乐播放结束了！');
$xys.trigger('click')
});
// 开静音
yousheng.addEventListener("click", function () {
audio.muted = true;
yousheng.style.display = "none";
wusheng.style.display = "block"
});
//关静音
wusheng.addEventListener("click", function () {
audio.muted = false;
yousheng.style.display = "block";
wusheng.style.display = "none";
});
</script>THE END
暂无评论内容