0-1前端本地网页音乐播放器思路_初学C于晏_音乐网站前端怎么写

大大的周 02-07 3544

前提准备

工具： webstorm jQuery库 jQuery custom scrollbar插件

知识： html，css，js，jQuery，jQuery custom scrollbar文档，ajax本地请求

作品名称：前端网页音乐播放器（本地）

实现成果：

css，html

编写过程：建文件夹、css、js、素材、连接库与相互连接到html中主要点： html写元素布局，hover实现悬停高亮, css渲染与定位（相对与绝对） / / html： html实现后效果 css：

*{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; font-size: 14px; } .header{ width: 100%; height: 45px; } .header .logo{ float: left; margin-left: 20px; opacity: 0.5; } .header .logo:hover{ opacity: 1; } .header .logo a{ display: inline-block; width: 78px; height: 21px; background: url("../images/player_logo.png") no-repeat 0 0; } .header .register{ float: right; line-height: 45px; } .header .register li{ list-style: none; float: left; margin-right: 20px; color: #fff; opacity: 0.5; } .header .register li:hover{ opacity: 1; } .content{ width: 100%; height: 460px; } .content .content_in{ width: 1200px; height: 100%; margin: 0 auto; } .content_in .content_left{ float: left; width: 800px; height: 100%; } .content_left .content_toolbar{ width: 100%; height: 40px; } .content_toolbar span{ display: inline-block; width: 122px; height: 100%; line-height: 40px; text-align: center; border: 1px solid #fff; box-sizing: border-box; border-radius: 5px; color: #fff; opacity: 0.5; } .content_toolbar span:hover{ opacity: 1; } .content_toolbar span i{ display: inline-block; width: 18px; height: 18px; background: url("../images/icon_sprite.png") no-repeat 0 0; margin-right: 10px; vertical-align: -5px; } .content_toolbar span:nth-child(1) i{ background-position: -60px -20px; } .content_toolbar span:nth-child(2) i{ background-position: -20px -20px; } .content_toolbar span:nth-child(3) i{ background-position: -40px -240px; } .content_toolbar span:nth-child(4) i{ background-position: -100px -20px; } .content_toolbar span:nth-child(5) i{ background-position: -40px -300px; } .content_left .content_list{ width: 100%; height: 420px; overflow: auto; } .content_list li{ list-style: none; width: 100%; height: 50px; border-bottom: 1px solid rgba(255,255,255,0.5); box-sizing: border-box; user-select: none; } .content_list li div{ float: left; color: rgba(255,255,255,0.5); line-height: 50px; /*opacity: 0.5;*/ } .content_list .list_check{ width: 50px; height: 100%; text-align: center; } .content_list .list_check i{ display: inline-block; width: 14px; height: 14px; border: 1px solid #fff; opacity: 0.5; } .content_list .list_checked i{ background: url("../images/icon_sprite.png") no-repeat -60px -80px; opacity: 1; } .content_list .list_number{ width: 20px; height: 100%; } .content_list .list_number2{ color: transparent !important; background: url("../images/wave.gif") no-repeat 0 center; } .content_list .list_name{ width: 50%; height: 100%; } .list_name .list_menu{ margin-top: 5px; float: right; margin-right: 20px; display: none; } .list_menu a{ display: inline-block; width: 36px; height: 36px; background: url("../images/icon_list_menu.png") no-repeat 0 0; opacity: 0.5; } .list_menu a:hover{ opacity: 1; } .list_menu a:nth-child(1){ background-position: -120px 0; } .list_menu a:nth-child(2){ background-position: -120px -80px; } .list_menu a:nth-child(3){ background-position: -120px -120px; } .list_menu a:nth-child(4){ background-position: -120px -40px; } .list_menu .list_menu_play2{ background-position: -80px -200px !important; } .content_list .list_singer{ width: 20%; height: 100%; } .content_list .list_time a{ display: inline-block; width: 36px; height: 36px; background: url("../images/icon_list_menu.png") no-repeat -120px -160px; float: left; margin-top: 5px; display: none; opacity: 0.5; } .content_list .list_time a:hover{ opacity: 1; } .content_in .content_right{ float: right; width: 400px; height: 100%; user-select: none; } .content_right .song_info{ text-align: center; color: rgba(255,255,255,0.5); line-height: 30px; } .song_info .song_info_pic{ display: inline-block; /*右侧渲染图片*/ background: url("../images/album_cover_player.png") no-repeat 0 0; width: 201px; height: 180px; text-align: left; } .song_info_pic img{ width: 180px; height: 180px; } .song_info div a{ text-decoration: none; color: #fff; opacity: 0.5; } .song_info div a:hover{ opacity: 1; } .content_right .song_lyric_container{ margin-top: 30px; height: 150px; overflow: hidden; } .content_right .song_lyric{ text-align: center; } .content_right .song_lyric li{ list-style: none; line-height: 30px; font-weight: bold; color: rgba(255,255,255,0.5); } .content_right .song_lyric .cur{ color: #31c27c; } .footer{ width: 100%; height: 80px; position: absolute; left: 0; bottom: 0; } .footer .footer_in{ width: 1200px; height: 100%; margin: 0 auto; user-select: none; } .footer_in a{ display: inline-block; text-decoration: none; color: #fff; background: url("../images/player.png") no-repeat 0 0; margin-right: 20px; } .footer_in .music_pre{ width: 19px; height: 20px; background-position: 0 -30px; } .footer_in .music_play{ width: 21px; height: 29px; background-position: 0 0; vertical-align: -5px; } .footer_in .music_play2{ background-position: -30px 0; } .footer_in .music_next{ width: 19px; height: 20px; background-position: 0 -52px; } .footer_in .music_progress_info{ display: inline-block; width: 670px; height: 40px; position: relative; top: 10px; } .music_progress_info .music_progress_top{ width: 100%; height: 30px; line-height: 30px; color: #fff; } .music_progress_top .music_progress_name{ float: left; opacity: 0.5; } .music_progress_top .music_progress_name:hover{ opacity: 1; } .music_progress_top .music_progress_time{ float: right; opacity: 0.5; } .music_progress_info .music_progress_bar{ width: 100%; height: 4px; background: rgba(255,255,255,0.5); margin-top: 5px; position: relative; } .music_progress_bar .music_progress_line{ width: 0px; height: 100%; background: #fff; } .music_progress_line .music_progress_dot{ width: 14px; height: 14px; border-radius: 50%; background: #fff; position: absolute; top: -5px; left: 0px; } .footer_in .music_mode{ width: 26px; height: 25px; background-position: 0 -205px; } .footer_in .music_mode2{ width: 23px; height: 20px; background-position: 0 -260px; } .footer_in .music_mode3{ width: 25px; height: 19px; background-position: 0 -74px; } .footer_in .music_mode4{ width: 26px; height: 25px; background-position: 0 -232px } .footer_in .music_fav{ width: 24px; height: 21px; background-position: 0 -96px; } .footer_in .music_fav2{ background-position: -30px -96px; } .footer_in .music_down{ width: 22px; height: 21px; background-position: 0 -120px; } .footer_in .music_comment{ width: 24px; height: 24px; background-position: 0 -400px; } .footer_in .music_only{ width: 74px; height: 27px; background-position: 0 -281px; } .footer_in .music_only2{ background-position: 0 -310px; } .footer_in .music_voice_info{ display: inline-block; width: 100px; height: 40px;' line-height: 40px; position: relative; top: 10px; } .music_voice_info .music_voice_icon{ width: 26px; height: 21px; background-position: 0 -144px; position: absolute; left: 0; top: 10px; } .music_voice_info .music_voice_icon2{ background-position: 0 -182px; } .music_voice_info .music_voice_bar{ width: 70px; height: 4px; background: rgba(255,255,255,0.5); position: absolute; right: 0; top: 18px; } .music_voice_bar .music_voice_line{ width: 70px; height: 100%; background: #fff; } .music_voice_line .music_voice_dot{ width: 14px; height: 14px; border-radius: 50%; background: #fff; position: relative; top: -5px; left: 70px; } .mask_bg{ position: absolute; left: 0; top: 0; z-index: -2; width: 100%; height: 100%; background: url("../images/lnj.jpg") no-repeat 0 0; background-size: cover; filter: blur(100px); } .mask{ position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background: rgba(0,0,0,0.35); } ._mCS_1 .mCSB_scrollTools .mCSB_dragger_bar{ width:8px; }

css实现后效果

js歌曲列表读入功能实现：主要点：先利用html，css布局基本list，再使用custom scrollbar插件导入列表再用ajax本地请求导入 js：

js实现后歌曲栏，鼠标悬停特效功能：

hover本质mousenter悬停高亮，js的淡入淡出事件动态添加的用事件委托delegate（如content_list下的list_meau等）

css js: css,js实现后效果

播放按钮，同步功能主要点：事件委托，动态添加播放和序号动画切换功能：主要点：排它，切换类播放功能（便于维护，单独工具类封装）思路： js：

底部上首下首播放功能：主要点：封装到player，js调用删除后序列重新排序功能（防止重新排序bug）：主要点分情况，删除正在播放的，删除播放前面的，删除播放后面的 js: 点击切换歌词信息，背景功能：未使用AJAX网络请求，本地json切换 js

进度条功能：（单独封装，便于维护与复用） js（单独封装的js-player）: 时间同步功能：主要点：audio默认属性 js代码直接调用封装的js-player

进度条同步功能：歌曲同步功能：主要点bug1：进度条回弹 bug2：进度条拖拽，歌曲播放不流畅效果通过回调函数，调用

音乐声音控制： js：

js-player

bug1：解决 bug2：进度条超过范围解决2：（判断是否合法）歌词同步功能：主要点：歌词解析歌词同步