<!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" /><!--缩放设置-->
<link rel="stylesheet" href="../css/index.css" />
<link rel="shortcut icon" href="../content/img/index.png" type="image/x-icon" />
<title>音乐播放器</title>
</head>
<body>
<div class="wrapper">
<div class="top-bar"><!--顶层标题栏-->
<i class="fas fa-angle-down"></i>
<span>正在播放</span>
<i class="fas fa-ellipsis-h"></i>
</div>
<div class="img-area"><!--音乐封面区域-->
<img src="../image/music1.jpg" alt="" />
</div>
<div class="song-details"><!--歌曲信息区域-->
<p class="name">锦鲤抄</p>
<p class="artist">银临</p>
</div>
<div class="progress-area"><!--进度条控制区域-->
<div class="progress-bar"></div>
<div class="timer">
<span class="current">0:20</span>
<span class="duration">3:40</span>
</div>
<audio id="main-audio" src="../music/music-1.mp3"></audio>
</div>
<div class="controls"><!--音乐播放设置区域-->
<i id="repeat-plist" title="顺序播放" class="fas fa-redo-alt"></i>
<i id="prev" class="fas fa-backward"></i>
<div class="play-pause">
<i class="fas fa-play"></i>
</div>
<i id="next" class="fas fa-forward"></i>
<i id="more-music" class="fas fa-list"></i>
</div>
<div class="music-list"><!--播放列表-->
<div class="header">
<div class="row">
<i class="fas fa-list"></i>
<span>播放列表</span>
</div>
<i id="close" class="fas fa-times"></i>
</div>
<ul></ul>
</div>
</div>
</body>
<script src="../js/index.js"></script>
</html>
基于CSS的简单的音乐播放器源码(课程作业).zip
版权申诉
144 浏览量
2023-07-25
17:03:41
上传
评论
收藏 27.21MB ZIP 举报
基于CSS的简单的音乐播放器源码(课程作业).zip （34个子文件） 
music 
music-3.mp3 3.68MB music-2.mp3 3.65MB music-4.mp3 3.71MB music-6.mp3 4.02MB music-5.mp3 3.86MB music-1.mp3 3.74MB 介绍.md 58B image 
bk.jpg 473KB music6.jpg 24KB music5.jpg 23KB music1.jpg 79KB music2.jpg 90KB music3.jpg 612KB music4.jpg 39KB js index.js 10KB webfonts fa-brands-400.woff 86KB fa-brands-400.ttf 128KB
fa-brands-400.svg 684KB fa-solid-900.woff 96KB fa-solid-900.eot 188KB fa-solid-900.ttf 188KB fa-brands-400.woff2 74KB fa-regular-400.woff2 13KB fa-brands-400.eot 128KB fa-regular-400.eot 34KB fa-regular-400.woff 16KB fa-regular-400.svg 141KB fa-regular-400.ttf 33KB fa-solid-900.woff2 74KB fa-solid-900.svg 823KB css font.css 69KB index.css 4KB html 
music_player.html 2KB
view.png 2.27MB资源评论
