html+js+css+mysql实现音乐播放器

实现原理

使用html写出界面，css装饰，js实现音乐播放和控制，音乐从data.js中读取相对路径，在js中使用player播放存在项目中的音乐。

主界面（index）

<!DOCTYPE html>
<html lang="en"><head><title></title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/reset.css"><link href="css/index.css" rel="stylesheet"></head><body><!-- 顶部logo和搜索 --><div class="top"><div class="container"><div class="logo"><h1><a href=""></a></h1></div><div class="search"><i class="icono-search"></i><input type="text" placeholder="输入查询关键字"></div></div></div><div class="play-main"><div class="container main-wrap"><!-- 左侧功能栏 --><div class="left-side"><ul class="side-menu"><li><a href="" class="active"><i class="icon-font icon-recommend"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;今日推荐</a></li><li><a href=""><i class="icon-font icon-rank"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;排行榜</a></li><li><a href=""><i class="icon-font icon-playing"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正在播放</a></li><li><a href=""><i class="icon-font icon-history"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;播放历史</a></li><li><a href=""><i class="icon-font icon-fav"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我的收藏</a></li></ul></div><!-- 歌曲列表 --><div class="list"><table><!-- 列表头 --><thead><tr class="tb-head"><th class="tb-space"></th><th>歌曲</th><th>演唱者</th><th>专辑</th><th>大小</th><th class="tb-space"></th></tr></thead><!-- 列表项 --><tbody id="tbody">       </tbody></table></div><!-- 歌曲信息 --><div class="right-side"><!-- 专辑封面 --><div class="album-cover"><a href=""><img src="imgs/校长 - 带你去旅行.jpg" alt="专辑封面"></a></div><!-- 歌词 --><div class="album-lrc"><ul><li class="lrc-line">带你去旅行 - 校长</li><li class="lrc-line">作词：朱贺</li><li class="lrc-line">作曲：朱贺</li><li class="lrc-line">编曲：王柏鸿</li><li class="lrc-line">今天妆令人特别着迷</li><li class="lrc-line">Oh 我说 baby</li><li class="lrc-line">出门前换上新的心情</li><li class="lrc-line">Oh 我的 lady</li><li class="lrc-line">你喜欢有小情绪</li><li class="lrc-line">像晴天的乌云</li><li class="lrc-line">头发长见识短的惊奇</li><li class="lrc-line">表情丰富令人着迷</li><li class="lrc-line">你的一切我都好奇像秘密</li><li class="lrc-line">安全带系好带你去旅行</li><li class="lrc-line">穿过风和雨</li><li class="lrc-line">我想要带你去浪漫的土耳其</li><li class="lrc-line">然后一起去东京和巴黎</li><li class="lrc-line">其实我特别喜欢迈阿密</li><li class="lrc-line">和有黑人的洛杉矶</li><li class="lrc-line">其实亲爱的你不必太过惊奇</li><li class="lrc-line">一起去繁华的上海和北京</li><li class="lrc-line">还有云南的大理保留着回忆</li><li class="lrc-line">这样才有意义</li><li class="lrc-line">今天妆令人特别着迷</li><li class="lrc-line">Oh 我说 baby</li><li class="lrc-line">出门前换上新的心情</li><li class="lrc-line">Oh 我的 lady</li><li class="lrc-line">你喜欢有小情绪</li><li class="lrc-line">像晴天的乌云</li><li class="lrc-line">头发长见识短的惊奇</li><li class="lrc-line">表情丰富令人着迷</li><li class="lrc-line">你的一切我都好奇像秘密</li><li class="lrc-line">安全带系好带你去旅行</li><li class="lrc-line">穿过风和雨</li><li class="lrc-line">我想要带你去浪漫的土耳其</li><li class="lrc-line">然后一起去东京和巴黎</li><li class="lrc-line">其实我特别喜欢迈阿密</li><li class="lrc-line">和有黑人的洛杉矶</li><li class="lrc-line">其实亲爱的你不必太过惊奇</li><li class="lrc-line">一起去繁华的上海和北京</li><li class="lrc-line">还有云南的大理保留着回忆</li><li class="lrc-line">这样才有意义</li><li class="lrc-line">我想要带你去浪漫的土耳其</li><li class="lrc-line">然后一起去东京和巴黎</li><li class="lrc-line">其实我特别喜欢迈阿密</li><li class="lrc-line">和有黑人的洛杉矶</li><li class="lrc-line">其实亲爱的你不必太过惊奇</li><li class="lrc-line">一起去繁华的上海和北京</li><li class="lrc-line">还有云南的大理保留着回忆</li><li class="lrc-line">这样才有意义</li></li></ul></div></div></div></div><!-- 底部歌曲播放控制，音量，进度等 --><div class="play-bottom"><!-- 播放控制 --><div class="play-control"><a href="javascript:;" class="btn-pre" id="btn-pre"></a><a href="javascript:;" class="btn-play" id="btnPlay"></a><a href="javascript:;" class="btn-next" id="btn-next"></a></div><!-- 进度条 --><div class="progress-info"><div class="play-info"><a href="javascript:;" id="playingName">  </a></div><div class="play-length"><div class="play-current">00:00</div><div class="play-progress" id="jdt"><div class="play-panel"></div><div class="progress-control"><a href="javascript:;" class="dot"></a></div></div><div class="play-duration">00:00</div></div></div><!-- 声音控制 --><div class="play-volume"><div class="volume-icon"></div><div class="volume-wrap"><div class="volume-panel"></div><div class="volume-control"><a href="javascript:;" class="dot"></a></div></div>    </div><div class="play-state" id="play-state"><img src="imgs/0.png" alt=""></div></div>
<!--        引入数据文件--><script src="js/data.js"></script>
<!--        引入核心文件--><script src="js/index.js"></script></body>
</html>

javascript

Date.js

var musics = [{"ablum":"晴天","artist":"周杰伦","id":1,"name":"晴天","path":"musics/1592373302464.mp3","size":4147913,"style":"怀旧","uptime":1592373302000},{"ablum":"xxx","artist":"毛不易 ","id":2,"name":"消愁","path":"musics/1592373330188.mp3","size":8357216,"style":"民谣","uptime":1592373330000},{"ablum":"123","artist":"陈奕迅","id":3,"name":"十年","path":"musics/1592373363687.mp3","size":12050851,"style":"伤感","uptime":1592373363000},{"ablum":"xxx","artist":"校长","id":4,"name":"带你去旅行","path":"musics/1592383891287.mp3","size":3602925,"style":"民谣","uptime":1592383891000},{"ablum":"xxx","artist":"陈奕迅","id":4,"name":"淘汰","path":"musics/1592383891289.mp3","size":3602925,"style":"民谣","uptime":1592383891000}]

index.js

//创建一个音频播放器对象
var player = document.createElement('audio');
//记录当前正在播放的歌曲的索引
var currentIndex = 0;
//声明一个标记，记录歌曲的播放状态
var isplay = false;(function f() {//绑定数据到页面中var html = '';
//循环遍历歌曲列表，根据歌曲数目在页面中生成对应的html代码for (var i = 0; i < musics.length; i++) {var  m = musics[i];html +=`<tr class="music-item" id="music-item" data-index="${i}"><td class="tb-space"></td><td class="tb-space"></td><td><a href="javascript:;">${m.name}</a></td><td><a href="javascript:;">${m.artist}</a></td><td><a href="javascript:;">${m.ablum}</a></td><td>${fmtSize(m.size)}</td><td class="tb-space"></td></tr>`;}//将生成的html插入指定位置document.getElementById('tbody').innerHTML=html;//初始化播放源player.src = musics[currentIndex].path;})()function fmtSize(size) {size = size/(1024*1024);size = size.toFixed(1);return size +'MB';
}//为列表触发点击事件中
var trs = document.querySelectorAll('.music-item');
for (var i=0 ;i < trs.length ;i++) {trs[i].addEventListener('click',function () {clearStatus();//获取元素上data-index属性的属性值（获取需要播放的歌曲列表项）var index = this.dataset.index;//记录当前正在播放的歌曲currentIndex = index;//需要获取播放的歌曲对象var m = musics[index];//为播放设置播放器player.src = m.path;//播放startPlay();})
}function  startPlay() {//将状态标记为正在播放isplay = true;//播放player.play();//设置颜色trs[currentIndex].style.backgroundColor='#f0f0f0';//设置播放图标trs[currentIndex].getElementsByTagName('td')[0].innerHTML='<img src="imgs/playing-list.gif" alt="">';//将播放按钮的背景图片设置为暂停图标document.getElementById('btnPlay').className = 'btn-pause';//将正在播放的歌曲名显示到底部控制区域document.getElementById('playingName').innerText = musics[currentIndex].name;}
function clearStatus() {//还原上一首正在播放的歌曲列表背景项背景色trs[currentIndex].style.backgroundColor = '';//清除当前行下的第一个单元格的内容（清除图标）trs[currentIndex].getElementsByTagName('td')[0].innerHTML='<img src="" alt="">';
}function pausePlay(){//将播放状态标记为falseisplay = false;//暂停播放player.pause();document.getElementById('btnPlay').className='btn-play';
}//播放控制
document.getElementById('btnPlay').addEventListener('click',function () {if(isplay){pausePlay();}else {startPlay();}
})//记录歌曲的当前播放时间
var now = 0;
//记录歌曲的总播放时间
var total = 0;
//当播放器数据被加载时触发
player.addEventListener('loadeddata',function () {//获取当前播放器的播放位置和总播放时长now = player.currentTime;total = player.duration;//将歌曲的播放时间显示在控制区域document.querySelector('.play-current').innerText = fmtTime(now);document.querySelector('.play-duration').innerText = fmtTime(total);
});//为播放器绑定播放进度改变事件
player.addEventListener("timeupdate",updateProgress);function updateProgress () {//获取最新的播放进度now = player.currentTime;//计算进度的百分比var p = now/total * 100 +'%';//为进度条元素设置宽度：document.querySelector('.progress-control').style.width = p;//更新最新播放时间document.querySelector('.play-current').innerHTML = fmtTime(now);
}//格式化歌曲的播放时间
function fmtTime(time) {//秒转化为毫秒time *= 1000;//使用毫秒数构建一个日期对象time = new Date(time);var min = time.getMinutes();var sec = time.getSeconds();min = min < 10? '0'+ min:min;sec = sec < 10? '0'+ sec:sec;return min+':'+sec;
}
//初始化播放状态为列表循环
var ps=0;
var played = new Array();document.getElementById('play-state').addEventListener('click',function () {ps = ps +1;if(ps%3==0){ps = 0;}document.getElementById('play-state').innerHTML = '<img src="imgs/'+ps+'.png" alt="">';
})//设置切到下一首歌事件
function nextMusic() {//记录播放的歌曲played[played.length++] = currentIndex;//将状态清空clearStatus();if(ps==0){currentIndex++;if(currentIndex >= musics.length){currentIndex = 0;}}if(ps==1){var ran = parseInt(Math.random()*musics.length);while(currentIndex==ran){ran = parseInt(Math.random()*musics.length);}currentIndex = ran;}if(ps==2){}//重新为播放器设置播放源player.src = musics[currentIndex].path;//继续播放startPlay();
}//设置切到上一首歌事件
function lastMusic() {//将状态清空clearStatus();if(played.length>0){currentIndex = played[played.length-1];played.pop();}//重新为播放器设置播放源player.src = musics[currentIndex].path;//继续播放startPlay();
}//设置当歌结束时事件
player.addEventListener('ended',nextMusic)
//切换到上一首歌
document.getElementById('btn-pre').addEventListener('click',lastMusic);
//切换到下一首歌
document.getElementById('btn-next').addEventListener('click',nextMusic);var now = 0;
var total = 0;
player.addEventListener('loadeddata',function () {now = player.duration;total = player.duration;console.log(now,total);
});//设置进度条拖动
(function(boxArea,bar) {var press = false;//鼠标按下监听(设置进度条区域)document.querySelector(boxArea,bar).addEventListener('mousedown',function (e) {//解除播放器的移动player.removeEventListener('timeupdate',updateProgress);//设置按下事件move(e);});//鼠标松开监听(设置进度条区域)document.querySelector(boxArea,bar).addEventListener('mouseup',function () {player.currentTime = now;player.addEventListener('timeupdate',updateProgress);press = false;});//鼠标拖动事件document.querySelector(boxArea,bar).addEventListener('mousemove',function (e) {if(press){move(e);}});//设置按下事件时改变位置事件
function move(e) {//点击事件和左边缘的距离var eventLeft = e.offsetX;document.querySelector(bar).style.width = eventLeft+'px';//进度条的长度var w = window.getComputedStyle(document.getElementById('jdt')).width;//设置百分比now = eventLeft/parseInt(w) * total;press = true;
}
})('.play-length','.progress-control')

css

index.css

.top{position: fixed;top: 0;left: 0;right: 0;height: 60px;background-color: #22425a;
}
.play-bottom{position: absolute;left: 0;right: 0;bottom: 0;height: 80px;background-color: #22425a;
}
.play-main{position: absolute;top:60px;left: 0;right: 0;bottom: 80px;background-color: #fff;
}
.container{position: relative;height: 100%;
}
.logo{float:left;width: 180px;height: 100%;padding-left:16px;
}
.logo h1{width: 164px;height: 100%;background: url('../imgs/xiami.png') no-repeat 0 50%;
}
.logo h1 a{display: block;width:100%;height: 100%;
}
.search{position: absolute;top:15px;left:240px;float: left;height: 30px;width:230px;border-radius: 15px;background-color: #aaaaaa;overflow: hidden;
}
.icono-search{position: absolute;top:8px;left:9px;display: block;width: 16px;height:16px;background: url('../imgs/search.png');
}.search input{position: absolute;left: 35px;height: 100%;width:180px;border:0;color:#fff;background: transparent;
}
.main-wrap{display: flex;
}
.left-side,.right-side{position: relative;float:left;flex: 1;min-width: 190px;
}
.list{float:left;flex: 6;padding:10px;min-width: 380px;
}
.list table{width: 100%;border-collapse: collapse;
}
.tb-head{color:rgba(0,0,0,0.3);
}
.tb-space{width:100px;
}
.tb-head th{border-color: rgba(0,0,0,0.1) !important;
}
.list{overflow: auto;
}
::-webkit-scrollbar{width: 5px;height: 5px;background-color: transparent;
}
::-webkit-scrollbar-thumb{width: 5px;background-color: rgba(0,0,0,0.1);border-radius:5px;
}
.list table tr th,.list table tr td{position: relative;padding: 10px 0;margin:0;border-bottom: 1px solid rgba(0,0,0,0.05);font-family: "微软雅黑";font-size: 10pt;text-align: left;white-space: nowrap;overflow: hidden;
}
.music-item a{color:#000;text-decoration: none;}
.music-item a:hover{text-decoration: underline;
}
.music-item:hover{background-color: #eee;
}/* 左侧菜单部分 */.icon-font{position: absolute;top:9px;display: inline-block;width: 18px;height: 18px;background-size: 100% 100%;
}
.icon-playing{background: url('../imgs/icon-playing.png') no-repeat;
}
.icon-recommend{background: url('../imgs/icon-recommend.png') no-repeat;
}
.icon-history{background: url('../imgs/icon-history.png') no-repeat;
}
.icon-rank{background: url('../imgs/icon-rank.png') no-repeat;
}
.icon-fav{background: url('../imgs/icon-fav.png') no-repeat;
}.side-menu{position: absolute;top:10px;left: 10px;right:10px;bottom: 10px;
}.side-menu a{position: relative;height: 36px;padding-left:10px;border-radius: 5px;line-height: 36px;
}
.side-menu a:hover{background-color: #eee;
}
.active{background-color: #ddd;
}/* 右侧歌曲信息样式 */
.album-cover{position: relative;top:20px;bottom: 20px;text-align: center;
}
.album-lrc{position: absolute;left: 0;right: 0;top:225px;bottom: 0;overflow: auto;
}
.album-lrc ul{text-align: center;font-size: 12px;
}
.lrc-line{padding: 4px;text-align: center;
}/*底部歌曲控制部分*/
.play-control{position: absolute;left: 0;height: 100%;width: 290px;text-align: center;
}
.play-control a{position: relative;display: inline-block;top:24px;width:32px;height: 32px;margin-left:32px;background-color: transparent;
}
.btn-play{background: url('../imgs/play-default.png') no-repeat;cursor: pointer;
}
.btn-play:hover{background: url('../imgs/play-active.png') no-repeat;
}
.btn-pause{background: url('../imgs/pause-default.png') no-repeat;cursor: pointer;
}
.btn-pause:hover{background: url('../imgs/pause-active.png') no-repeat;
}
.btn-pre{background: url('../imgs/pre-default.png') no-repeat;cursor: pointer;
}
.btn-pre:hover{background: url('../imgs/pre-active.png') no-repeat;
}
.btn-next{background: url('../imgs/next-default.png') no-repeat;cursor: pointer;
}
.btn-next:hover{background: url('../imgs/next-active.png') no-repeat;
}
/*播放方式*/
.play-state{position: absolute;right: 30px;top:15px;bottom: 20px;height: 40px;width: 40px;
}/* 声音控制 */
.play-volume{position: absolute;right: 0;top:0;bottom: 0;height: 100%;width: 290px;text-align: center;
}
.volume-icon{position: absolute;left:50px;top: 30px;width: 20px;height: 20px;background: url('../imgs/volume-default.png') no-repeat;cursor: pointer;
}
.volume-icon:hover{background: url('../imgs/volume-active.png') no-repeat;
}.volume-wrap{position: absolute;top: 38px;left:75px;width:100px;height: 3px;cursor:pointer;
}
.volume-panel{position: absolute;top: 0;left: 0;right:0;bottom:0;background: rgba(255,255,255,0.2);
}
.volume-control{position: absolute;top: 0;left:0;width:30px;height: 3px;background: #fff;
}
.dot{position: absolute;display: inline-block;right: 0;top: -3px;height: 10px;width: 10px;border-radius: 5px;background: #fff;
}/* 进度控制 */
.progress-info{position: absolute;left:290px;right: 290px;top: 0;bottom: 0;min-width:330px;
}.play-info{position: absolute;top:20px;width: 100%;height: 18px;line-height: 18px;
}
.play-info a{color:#fff;
}
.play-info a:hover{text-decoration: underline;
}
.play-length{position: absolute;top: 43px;width: 100%;height: 20px;font-size:10px;color:rgba(255,255,255,0.4);}
.play-current{position: absolute;left:0;width: 40px;
}
.play-duration{position: absolute;right: 0;width: 40px;text-align: right;
}
.play-progress{position: absolute;top:5px;left: 40px;right: 40px;height: 3px;cursor:pointer;
}
.play-panel{position: absolute;z-index: 1;top: 0;left: 0;right:0;bottom:0;width: 100%;background: rgba(255,255,255,0.2);
}
.progress-control{position: absolute;z-index: 2;top: 0;left:0;width:0%;height: 3px;background: aqua;
}

reset.css

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{margin:0;padding: 0;
}
body {font-family: Arial, sans-serif;
}
input,a,textarea{outline: none;
}
ul,ol{list-style: none;
}
a{display: block;color:rgb(152,152,152);text-decoration: none;font-size: 14px;
}

最后实现样式：
（实现自动切歌，进度条拖动，切歌，停歌，循环播放和随机循环）

html+js+css+mysql实现音乐播放器相关推荐

好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...
深圳java培训：使用原生JS重构简单的音乐播放器
深圳java培训:使用原生JS重构简单的音乐播放器上次,我们使用Jquery开发了一款简单的音乐播放器(如下图), 后来学生希望能够用原生的JS重构一次, 那么,下面就来看看如何使用原生的JS重构吧 ...
HTML5+JS实现简易的音乐播放器
HTML5+JS实现简易的音乐播放器播放器实现的功能播放/暂停音乐切换歌曲,上/下一首歌音量最大或静音音乐播放时间实时变化进度条拖拽歌曲图片切换播放器效果展示代码展示 html &l ...
vue写js代码_vue.js弹出式音乐播放器特效代码
码农那点事儿关注我们,一起学习进步 vue弹出式音乐播放器是一款基于vue.js实现的点击弹出式音乐播放器代码特效,点击图片即可弹出播放界面大图,可切换列表模式,上一首下一首音乐切换等功能. 下载源 ...
自定义css样式结合js控制audio做音乐播放器
最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器. 实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制: 1.通过play().pause()来控制音乐 ...
前端----利用html,css,js自制有趣的音乐播放器
最近在学前端,然后做了一个简易的音乐播放器,原本只是一个静态的网页,用a标签实现链接,embed标签引入mv,audio标签实现音乐播放,右边的marquee标签实现歌词滚动但是总觉得还不够,就加上了 ...
JavaScript CSS jQuery 网页音乐播放器
目录效果展示总结 index.html index.css index.js 效果展示总结音乐播放的功能基本实现了播放器最小化充分利用了弹性盒子,很好用专辑图像的旋转是使用CSS实现的,暂 ...
基于H5+js开发一款音乐播放器
前言:当下音乐播放器不胜其数,为了更好的掌握一些东西,我们来自己制作一个音乐播放器. 文章目录: 一.开发环境: 二.页面视图: 1.主文件入口(首页): 2.音乐播放界面: 三.功能实现 (1).i ...
原生html+js网页版简陋音乐播放器
本文属于html+js+css基础教程,今天准备撸一个简陋版的音乐播放器.主流的浏览器原本就支持影音播放功能非常强,这里是利用浏览器原本提供的音视标签audio实现个简陋的音乐播放器.由于教程不涉及到 ...

html+js+css+mysql实现音乐播放器

实现原理

主界面（index）

javascript

css

html+js+css+mysql实现音乐播放器相关推荐

最新文章

热门文章