<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/iconfont.css">
<style>
#span {
font-size: 50px;
color:orangered;
/* transition: all 1s linear; */
}
@keyframes ss {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
.span {
animation: ss 1s infinite;
}
#ss {
width: 50px;
}
</style>
</head>
<body>
<audio src="./img/myDream.m4a" id="music" controls></audio>
<button id="start">开始</button>
<button id="pause" >暂停</button>
<div id="ss">
<span class="iconfont icon-menu" id="span"></span>
</div>
<script>
let start = document.getElementById('start');
let pause = document.getElementById('pause');
console.dir(music.play);
// play() 让音乐播放
// pause() 让音乐暂停
// ended如果当前音乐是播放完成的就是true,否则就是false
// paused 如果当前音乐是暂停的,他就是true,否则就是false
// duration 当前音乐的总时间
// currentTime 设置或者获取当前正在播放的时长
let span = document.getElementById('span');
start.onclick = function(){
let flag = music.paused; // 如果当前音乐是暂停的,他就是true,否则就是false
if(flag){
music.play();
ss.classList.add('span')
}
else {
music.pause();
ss.classList.remove('span')
}
console.log(music.paused);
}
pause.onclick = function(){
music.pause()
console.log(music.paused);
}
// hybrid
</script>
</body>
</html>
音乐播放条(放入音乐即可听)
最新推荐文章于 2022-11-20 22:30:18 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)