<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>带播放列表的音乐播放器</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="fonts/iconfont.css"> <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="screen" href="./player.css" /> </head> <body> <!-- 播放器 --> <div class="music-player"> <!-- audio标签 --> <audio class="music-player__audio" ></audio> <!-- 播放器主体 --> <div class="music-player__main"> <!-- 模糊背景 --> <div class="music-player__blur"></div> <!-- 唱片 --> <div class="music-player__disc"> <!-- 唱片图片 --> <div class="music-player__image"> <img width="100%" src="" alt=""> </div> <!-- 指针 --> <div class="music-player__pointer"><img width="100%" src="http://blog.img.duanshuilu.com/cd_tou.png" alt=""></div> </div> <!-- 控件主体 --> <div class="music-player__controls"> <!-- 歌曲信息 --> <div class="music__info"> <h3 class="music__info--title">...</h3> <p class="music__info--singer">...</p> </div> <!-- 控件... --> <div class="player-control"> <div class="player-control__content"> <div class="player-control__btns"> <div class="player-control__btn player-control__btn--prev"><i style="color: #000;">后退</i></div> <div class="player-control__btn player-control__btn--play"><i style="color: #000;">播放</i></div> <div class="player-control__btn player-control__btn--next"><i style="color: #000;">前进</i></div> <div class="player-control__btn player-control__btn--mode"><i style="color: #000;">循环</i></div> </div> <div class="player-control__volume"> <div class="control__volume--icon player-control__btn"><i>音量</i></div> <div class="control__volume--progress progress"></div> </div> </div> <!-- 歌曲播放进度 --> <div class="player-control__content"> <div class="player__song--progress progress"></div> <div class="player__song--timeProgess nowTime">00:00</div> <div class="player__song--timeProgess totalTime">00:00</div> </div> </div> </div> </div> </div> <script src="./A.js"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="./play.js"></script> </body> </html>
带播放列表的音乐播放器
标签:
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇:
可自动切换的图片播放器插件
下一篇:
SVG和CSS3实现的爱心Like按钮