一.看效果
二.思路
1.创建一个audio标签,给audio添加hidden属性使其隐藏,添加id名称为music,添加loop属性使其循环播放
2.创建一个按钮,添加id名称为bofang,添加点击事件bofang();
3.通过
audio.play()
方法控制播放音乐,通过audio.pause()
方法控制暂停音乐;
4.给bofang()函数添加if条件判断,当音乐播放时(
audio.paused//用来判断音乐是否是播放状态
),点击按钮暂停音乐;当音乐暂停时,点击按钮播放音乐
三.代码
1.html
<audio id="music" loop="" hidden>
<source src="1.mp3"type="audio/mpeg">
</audio>
<button id="bofang" onclick="bofang()">
<i class="fa fa-play" aria-hidden="true"></i>
</button>
/*
加在audio标签上
controls="" :是否展现播放器
autoplay="" :是否自动播放
*/
2.CSS
#bofang {
border: none;
width: 70px;
height: 70px;
border-radius: 50%;
/* background-color: #000000; */
background-image: url(5.jpg);
background-position: center center;
background-size: cover;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
color: #ffd1d1;
border: 2px solid #ffff03;
font-size: 16px;
/* opacity: 0.7; */
/* 去除蓝色背景 */
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
z-index: 99999;
/*去除轮廓*/
outline: none;
}
/* 设置旋转 */
/*无过渡效果: cubic-bezier(0.37, 0.34, 0.74, 0.73) */
.turn {
animation: turn 5s infinite cubic-bezier(0.37, 0.34, 0.74, 0.73);
}
@keyframes turn {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg);
}
}
3.js
function bofang() {
var audio = document.getElementById('music');
if (audio.paused) {//判读是否播放
audio.play(); // 播放
$('#bofang').html('<i class="fa fa-pause" aria-hidden="true"></i>').addClass('turn');
} else {
audio.pause(); //pause()暂停;
$('#bofang').html('<i class="fa fa-play" aria-hidden="true"></i>').removeClass('turn');
}
}