<!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>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
.main {
width: 300px;
height: 300px;
background-color: #f1f3f4;
border-radius: 6px;
/* 居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img {
width: 150px;
height: 150px;
border-radius: 100%;
overflow: hidden;
margin: 0 auto;
margin-top: 10px;
}
audio {
margin-top: 40px;
width: 100%;
/* 去除默认样式 */
margin: 0.25rem 0;
border-radius: 0% !important;
z-index: 9999;
}
.btn {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
img {
width: 100%;
height: 100%;
}
/* 图片旋转 */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.img {
animation: rotate 10s linear infinite;
}
</style>
</head>
<body>
<!-- 音乐播放器 -->
<div class="main">
<div class="img">
<img src="../static/logo.jpg" alt="" id="img" />
</div>
<audio src="./music/阿冗山风.mp3" controls autoplay></audio>
<div class="btn">
<button class="shang">上一首</button>
<button class="tingzhi">停止</button>
<button class="xia">下一首</button>
</div>
</div>
</body>
<script>
// 1.获取元素
let shang = document.querySelector(".shang");
let tingzhi = document.querySelector(".tingzhi");
let xia = document.querySelector(".xia");
let audio = document.querySelector("audio");
let img = document.getElementById("img");
// 封装函数 点击事件 axios
function getMusic(url) {
axios.get(url).then((res) => {
console.log(res);
// 歌曲列表数组
let list = [];
// 遍历数组
res.data.data.forEach((item) => {
// 将歌曲列表的mid值存入数组
list.push(item.mid);
});
});
}
getMusic();
shang.onclick = function () {
audio.src = "./music/可不可以.mp3";
// 可以替换成通过axios 获取的list列表里面的链接
audio.play();
};
xia.onclick = function () {
audio.src = "./music/暖一杯茶.mp3";
audio.play();
};
// 判断是否停止或是播放,并修改button的value停止或是播放
let flag = true;
tingzhi.onclick = function () {
if (flag) {
audio.pause();
flag = false;
// 修改button的值
tingzhi.innerHTML = "停止";
// 图片停止旋转
document.querySelector(".img").style.animationPlayState = "paused";
} else {
audio.play();
flag = true;
tingzhi.innerHTML = "播放";
document.querySelector(".img").style.animationPlayState = "running";
}
};
</script>
</html>
用js写一个英语播放器
于 2023-04-06 23:34:58 首次发布