前端切图:自制简易音乐播放器
365bet在线娱乐场
📅 2025-12-06 10:28:44
👤 admin
👁️ 5130
❤️ 404
音乐播放器是一个非常常见的应用,这篇博客就是介绍如何制作一个简单的音乐播放器,这款音乐播放器具有以下的功能:图片旋转功能,点击播放,点击暂停播放的功能,音量调大调小功能,设置音频的播放时间,循环播放,自动播放,切换歌曲功能。
效果如下:
图片发自简书App
代码如下:
代码语言:javascript复制
*{
margin:0;
padding:0;
border:0;
}
@keyframesimg{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
.img{
background:url(004.jpg)no-repeat;
width:200px;
height:200px;
background-size:100%100%;
border:1pxsolid#d1d1d1;
border-radius:50%;
animation:img3sinfinitelinearpaused;
}
.img.runing{
animation-play-state:running;
}
li{
height:50px;
line-height:50px;
text-indent:10px;
}
li+li{
border-top:1pxsolidred;
}
.volume{
display:inline-block;
width:40px;
height:40px;
border:1pxsolid#d1d1d1;
text-align:center;
line-height:40px;
}
+
-
varaudio=$("audio").get(0);
//监听 音频播放
$(audio).on("play",function(){
$(".img").addClass("runing");
});
//监听 音频暂停
$(audio).on("pause",function(){
$(".img").removeClass("runing");
//暂停的时候 判断当前音乐是否播放完毕
if(audio.ended){//播放完毕时 ended 状态为 true
audio.currentTime=0;//设置因为进度为 0
audio.src="2.mp3"; //修改音乐播放地址
audio.play(); //播放
}
});
$(".volume").on("click",function(){
//取出自定义属性上的 值,用来区分 加 减
varvolume=audio.volume+$(this).data("volume");
if(volume>1){
volume=1;//声音最大为 1
}
if(volume<0){
volume=0;//最小为 0 0 为静音
}
audio.volume=volume;
})
$("li").on("click",function(){
varsrc=$(this).data("src");
//设置音频的播放时间
audio.currentTime=0;
audio.src=src;
audio.play();//播放
// audio.pause(); //暂停
});
原文作者:祈澈姑娘
技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。