<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html音乐播放器</title>
<link rel="stylesheet" href="font/iconfont.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="player">
<!-- 歌曲信息模块 -->
<div id="player-content1">
<!-- 歌曲名 -->
<div class="music-name"></div>
<!-- 歌手名 -->
<div class="artist-name"></div>
<!-- 歌曲时间 -->
<div class="time">
<!-- 当前播放的时间 -->
<div class="current-time"></div>
<!-- 歌曲总时长 -->
<div class="total-time"></div>
</div>
<!-- 进度条 -->
<div id="s-area">
<!-- 鼠标移动到进度条上,显示的时间信息 -->
<div id="ins-time"></div>
<!-- 鼠标移动到进度条上,进度条变暗部分-->
<div id="s-hover"></div>
<!-- 表示当前歌曲播放进度的蓝色进度条 -->
<div id="seek-bar"></div>
</div>
</div>
<!-- 控制模块 -->
<div id="player-content2">
<!-- 左侧歌曲封面旋转模块 -->
<div class="music-imgs">
<!-- 封面图 -->
<div class="img"></div>
<!-- 歌曲缓冲时的提示文字 -->
<div id="buffer-box">缓冲…</div>
</div>
<!-- 右侧歌曲操作模块 -->
<div class="player-controls">
<!-- 上一首按钮 -->
<div class="btn prev iconfont"></div>
<!-- 暂停/播放 按钮 -->
<div class="btn play-pause icon-jiediankaishi iconfont"></div>
<!-- 下一首按钮 -->
<div class="btn next iconfont"></div>
</div>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
小音乐播放器,可以播放提前存好的音乐
共15个文件
mp3:3个
jpg:3个
js:2个
0 下载量 199 浏览量
2023-07-11
16:44:38
上传
评论
收藏 9.61MB ZIP 举报
温馨提示
小音乐播放器,可以播放提前存好的音乐
资源推荐
资源详情
资源评论
收起资源包目录
音乐播放器.zip (15个子文件)
音乐播放器
musicPlayer-master
others
img16.gif 376KB
font
iconfont.ttf 2KB
iconfont.css 2KB
iconfont.woff2 952B
iconfont.woff 1KB
js
index.js 11KB
jquery-3.4.1.min.js 86KB
img
bg1.jpg 4KB
bg.jpg 1KB
bg2.jpg 40KB
css
style.css 4KB
mp3
music1.mp3 3.06MB
music3.mp3 3.14MB
music2.mp3 3.02MB
index.html 2KB
共 15 条
- 1
资源评论
BridgeFish
- 粉丝: 1140
- 资源: 5
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功