自微网站首页,房地产销售技巧和话术,如何网站点击率,做网站需要学会什么软件前言#xff1a;音乐播放器是前端开发中的一个经典项目#xff0c;通过它可以掌握很多核心技术#xff0c;如音频处理、DOM操作、事件监听、动画效果等。这个项目不仅能提升前端开发的技能#xff0c;还能让开发者深入理解JavaScript与HTML的协同作用。 页面展示#xff1… 前言音乐播放器是前端开发中的一个经典项目通过它可以掌握很多核心技术如音频处理、DOM操作、事件监听、动画效果等。这个项目不仅能提升前端开发的技能还能让开发者深入理解JavaScript与HTML的协同作用。 页面展示
歌曲页面列表(html代码): 录视频时音乐有点卡顿大家看视频效果就行 git链接密码生成器: 用来生成密码的小项目 下面有详细的注释讲解大家可以对照着上图中的结构进行理解当然也可以自己写大家了解我的思路就行 div classwrapperdiv classplayer-warp!-- 歌曲信息卡片隐藏页面 --div classplayer-infodiv classinfodiv classnameh4我记得/h4/divdiv classsinger-album赵雷-署前街少年/divdiv classmusic-progress!-- 时间显示 --div classmusic-progress-top!-- 当前时间 --span classcurrent-time00:00/span!-- 歌曲总时间 --span classtime05:29/span/div!-- 音乐进度线 --div classmusic-progress-bar!-- 绘制播放线 --div classmusic-progress-line/div/div/div/div/div!-- 歌曲控制页面 --div classplayer-controldiv classcoverimg src alt/div!-- 控制按钮 --div classcontroli idprevBtn classiconfont#xe844;/ii idplayBtn classiconfont paused#xe848;/ii idnextBtn classiconfont#xe845;/ii idopenModal classiconfont#xe8bf;/i/div/div/div/div!-- 设置音乐背景页面 --div classbg/div!-- 绘制歌曲列表 --div classmodaldiv classmodal-box!-- 设置模块头部内容 --div classmodal-box-topdiv classmodal-titleh3音乐列表/h3/divdiv classmodal-close!-- 放置让模块消失的图标 --i classiconfont#xe8b9;/i/div/divdiv classmodal-wrapper!-- 容器 --ul classsong-list/ul/div/div/div!-- 音乐--audio src/audioscript src./js/jquery.js/script 页面功能介绍 点击播放按钮音乐开始播放歌曲信息将自然弹出页面中的圆形图片开始旋转 点击前进和后退按钮音乐和页面信息将进行相应改变点击模块列表内容可播放该音乐
js功能实现 家人们我是通过jQuery实现的 1.使用ajax请求音乐数据 通过ajax请求数据并且调用更新页面数据的函数在页面中显示第一个歌曲 添加音乐列表 let musicList [];let currentIndex 0; // 当前播放音乐的下标// Ajax 获取音乐数据$.ajax({type: GET,url: ./music.json,success: function (data) {musicList data;render(musicList[currentIndex]); // 渲染当前音乐renderMusicList(musicList); // 渲染音乐列表}});2.页面渲染信息函数 获得jQuery包装级对象包装级对象并且通过text方法在对象中添加数据 // 渲染音乐详情function render(data) {$(.name h4).text(data.name);$(.time).text(data.time);$(.singer-album).text(${data.singer} - ${data.album});$(.cover img).attr(src, data.cover);$(audio).attr(src, data.audio_url);$(.bg).css({background: url(${data.cover}) no-repeat center center,background-size: cover});}3.播放和暂停音乐 设置点击播放按钮将暂停按钮变成播放按钮并且显示歌曲信息大家可以通过上面视频了解 // 绑定播放按钮事件$(#playBtn).on(click, togglePlay); // 播放与暂停音乐function togglePlay() {//返回dom对象let audio $(audio).get(0);if (audio.paused) {$(#playBtn).removeClass(paused).addClass(running).html(#xe847;);$(.player-info).animate({ top: -95% }, slow);$(.cover).css({ animation-play-state: running });audio.play();} else {$(#playBtn).removeClass(running).addClass(paused).html(#xe848;);$(.player-info).animate({ top: 0% }, slow);$(.cover).css({ animation-play-state: paused });audio.pause();}}4.渲染音乐列表 通过js动态添加歌曲列表 // 渲染音乐列表function renderMusicList(list) {$(.song-list).empty();$.each(list, function (index, item) {let isPlaying (index currentIndex !$(audio).get(0).paused);let $li $(li id${index} class${index currentIndex ? playing : }span${index 1}.${item.name} - ${item.singer}/span span classiconfont${isPlaying ? #xe784; : #xe781;}/span/li);$(.song-list).append($li);});}
5.更新播放函数 这个方法会被重复利用所以封装起来 更新当前音乐信息更新列表 // 更新并播放音乐function updateAndPlay() {render(musicList[currentIndex]);$(#playBtn).trigger(click); renderMusicList(musicList); }6.上下按钮点击事件 点击前进和后退按钮更换歌曲事件通过currentIndex变化更换当前歌词因为当前歌词是通过currentIndex下标进行控制的 // 绑定上一首、下一首按钮事件$(#prevBtn).on(click, playPrev);// 播放上一首音乐function playPrev() {currentIndex (currentIndex 0) ? currentIndex - 1 : musicList.length - 1;updateAndPlay();}$(#nextBtn).on(click, playNext);// 播放下一首音乐function playNext() {currentIndex (currentIndex musicList.length - 1) ? currentIndex 1 : 0;updateAndPlay();}7.更新音乐条的进度 根据当前音乐的时间获得值的百分比赋值给进度表的宽度 // 格式化时间function formatTime(time) {let min Math.floor(time / 60);let sec Math.floor(time % 60);return ${min 10 ? 0 : }${min}:${sec 10 ? 0 : }${sec};}// 更新播放时间和进度条$(audio).on(timeupdate, function () {let audio $(audio).get(0);let currentTime audio.currentTime || 0;let duration audio.duration || 0;$(.current-time).text(formatTime(currentTime));$(.time).text(formatTime(duration));let value (currentTime / duration) * 100;$(.music-progress-line).css({ width: value % });});
8.显示模块列表 点击两个小图标点开音乐列表和关闭音乐列表 // 打开和关闭音乐列表弹窗$(#openModal).on(click, function () {$(.modal).css({ display: block });renderMusicList(musicList); // 渲染音乐列表});$(.modal-close).on(click, function () {$(.modal).css({ display: none });});
9.点击音乐列表播放音乐事件 点击列表相应歌曲播放点击歌曲 // 点击音乐列表播放对应歌曲$(.song-list).on(click, li, function () {currentIndex parseInt($(this).attr(id));updateAndPlay(); // 播放选择的音乐});
10.音乐结束事件 这个我设置的是 playNext () 播放下一个歌曲大家还可以自己进行其他操作 // 监听音乐播放完毕的事件自动播放下一首$(audio).on(ended, function () {playNext();});
源代码 上面HTML代码和JavaScript代码都是完整的,大家可以直接取上面的 CSS:
* {margin: 0;padding: 0;
}body {user-select: none;background-color: #dadada;
}/* 动画 */
keyframes circle {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}.wrapper {width: 360px;height: 80px;margin: auto;margin-top: 200px;
}.player-warp {position: relative;
}.player-info {width: 90%;height: 100%;position: absolute;/* top: -95%; */top: 0;left: 5%;z-index: -1;background-color: rgba(255, 255, 255, 0.15);box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);backdrop-filter: blur(3.5px);border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0.17);display: flex;justify-content: flex-end;
}.player-info .info {padding: 5px;width: 60%;font-size: 15px;
}/* 进度条%比 */
.info .music-progress {width: 100%;
}.music-progress .music-progress-top {display: flex;color: #ff668c;justify-content: space-between;
}/* 绘制歌曲进程背景 */
.music-progress .music-progress-bar {width: 100%;height: 3px;background-color: #b8b8b8;border-radius: 10px;margin-top: 3px;
}/* 绘制覆盖线 */
.music-progress .music-progress-line {width: 0%;height: 90%;background-color: #ff5a94;
}.player-warp .player-control {width: 360px;height: 80px;background-color: #ffffff;border-radius: 15px;display: flex;z-index: 10;
}.player-control .cover {position: relative;/* margin-left: 20px; */left: 30px;width: 104px;height: 100px;border-radius: 50px;background-color: #ffffff;margin-top: -60px;animation: circle 5s infinite linear;animation-play-state: paused;
}.player-control img {position: absolute;top: 5%;left: 5%;width: 90%;height: 90px;border-radius: 50%;
}.player-control .cover::before {content: ;display: inline-block;width: 15px;height: 15px;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #fff;
}.player-control .control {margin-left: 20px;width: 70%;display: flex;align-items: center;justify-content: space-around;
}.player-control .control i {display: block;color: #b05757;font-size: 45px;margin-right: 6px;cursor: pointer;transition: all 0.4s;
}.control i:hover {color: #e2a3a3 !important;
}.bg {position: absolute;top: 0;left: 0;z-index: -2;width: 100%;height: 100%;background: url(http://p2.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw/2946691234868155.jpg) no-repeat center center;transform: scale(2);/* 模糊 */filter: blur(50px);transition: all 1s;
}li {list-style: none;
}.modal {width: 100%;height: 100%;background-color: rgba(128, 128, 128, 0.25);/* 设置固定定位 */position: fixed;top: 0;right: 0;display: none;
}.modal .modal-box {width: 30%;height: 100%;background-color: #fff;position: absolute;top: 0;right: 0;padding: 5px;
}.modal-box .modal-close .iconfont {font-size: 23px;
}.modal-box .modal-box-top {width: 100%;height: 40px;display: flex;align-items: center;justify-content: space-between;margin-bottom: 5px;
}.modal-box .modal-wrapper li {cursor: pointer;display: block;height: 30px;line-height: 30px;display: flex;justify-content: space-between;margin-bottom: 4px;background-color: rgba(230, 230, 230, 0.37);border-bottom: 1px solid rgb(83, 83, 83);
}.modal-box .modal-wrapper li span {display: block;font-size: 18px;
}.modal-box .modal-wrapper li .iconfont {font-size: 28px;
}.modal-box .modal-wrapper li .iconfont:hover {font-size: 30px;
}.playing span {color: #00ddc3;
} 到这里就讲完了感谢大家的观看
