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> ；今⽇推荐</a></li>
<li><a href=""><i class="icon-font icon-rank"></i> ；排⾏榜</a></li>
<li><a href=""><i class="icon-font icon-playing"></i> ；正在播放</a></li>
<li><a href=""><i class="icon-font icon-history"></i> ；播放历史</a></li>
<li><a href=""><i class="icon-font icon-fav"></i> ；我的收藏</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>
<!--底部歌曲播放控制，⾳量，进度等-->
<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
html播放音乐代码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 = ateElement('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插⼊指定位置
//初始化播放源
player.src = musics[currentIndex].path;
})()
function fmtSize(size){
size = size/(1024*1024);
size = Fixed(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();
player.play();
/
/设置颜⾊
trs[currentIndex].style.backgroundColor='#f0f0f0';
//设置播放图标
trs[currentIndex].getElementsByTagName('td')[0].innerHTML='<img src="imgs/playing-list.gif" alt="">'; //将播放按钮的背景图⽚设置为暂停图标
//将正在播放的歌曲名显⽰到底部控制区域
}
function clearStatus(){
//还原上⼀⾸正在播放的歌曲列表背景项背景⾊
trs[currentIndex].style.backgroundColor ='';
//清除当前⾏下的第⼀个单元格的内容（清除图标）
trs[currentIndex].getElementsByTagName('td')[0].innerHTML='<img src="" alt="">';
}
function pausePlay(){
//将播放状态标记为false
isplay =false;
//暂停播放
player.pause();
}
//播放控制
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){
发表评论