纯前端语言编写音乐播放器
html代码
index.html
<!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 class="play-bottom">
<!-- 播放控制 -->
<div class="play-control">
<a href="javascript:;" class="btn-pre" id="btnpre"></a>
<a href="javascript:;" class="btn-play" id="btnPlay"></a>
<a href="javascript:;" class="btn-next" id="btnnext"></a>
</div>
<!-- 进度条 -->
<div class="progress-info">
<div class="play-info">
<a href="" id="playingName"></a>
</div>
<div class="play-length">
<div class="play-current">00:00</div>
<div class="play-progress">
<div class="play-panel"></div>
<div class="progress-control">
<a href="javascript:;" class="dot"></a>
</div>
</div>
<div class="play-duration">05:22</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>
<!--引入数据文件-->
<script src="js/data.js"></script>
<!--引入核心js文件-->
<script src="js/index.js"></script>
</body>
</html>
css代码
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;
}
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-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.5);
}
.volume-control{
position: absolute;
top: 0;
left:0;
width:5%;
height: 3px;
background: #fff;
}
.dot{
position: absolute;
display: inline-block;
right: 0;
top: -3px;
height: 10px;
width: 5px;
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: #fff;
}
JavaScript代码
data.js
//json对象(不是字符串)
var musics = [
{
ablum: "海阔天空",
artist: "Beyond",
id: 1,
name: "大地",
path: "musics/1592373302464.mp3",
size: 4147913,
style: "摇滚",
uptime: 1592373302000
},
{
ablum: "xxx",
artist: "GALA ",
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: "Bruno Mars ",
id: 4,
name: "Just The Way You Are",
path: "musics/1592383891287.mp3",
size: 3602925,
style: "摇滚",
uptime: 1592383891000
},
{
ablum: "xxx",
artist: "Jason Chen",
id: 5,
name: "童话",
path: "musics/1592383916578.mp3",
size: 4143707,
style: "流行",
uptime: 1592383916000
},{
ablum: "海阔天空",
artist: "Beyond",
id: 1,
name: "大地",
path: "musics/1592373302464.mp3",
size: 4147913,
style: "摇滚",
uptime: 1592373302000
},
{
ablum: "xxx",
artist: "GALA ",
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: "Bruno Mars ",
id: 4,
name: "Just The Way You Are",
path: "musics/1592383891287.mp3",
size: 3602925,
style: "摇滚",
uptime: 1592383891000
},
{
ablum: "xxx",
artist: "Jason Chen",
id: 5,
name: "童话",
path: "musics/1592383916578.mp3",
size: 4143707,
style: "流行",
uptime: 1592383916000
},{
ablum: "海阔天空",
artist: "Beyond",
id: 1,
name: "大地",
path: "musics/1592373302464.mp3",
size: 4147913,
style: "摇滚",
uptime: 1592373302000
},
{
ablum: "xxx",
artist: "GALA ",
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: "Bruno Mars ",
id: 4,
name: "Just The Way You Are",
path: "musics/1592383891287.mp3",
size: 3602925,
style: "摇滚",
uptime: 1592383891000
},
{
ablum: "xxx",
artist: "Jason Chen",
id: 5,
name: "童话",
path: "musics/1592383916578.mp3",
size: 4143707,
style: "流行",
uptime: 1592383916000
},{
ablum: "海阔天空",
artist: "Beyond",
id: 1,
name: "大地",
path: "musics/1592373302464.mp3",
size: 4147913,
style: "摇滚",
uptime: 1592373302000
},
{
ablum: "xxx",
artist: "GALA ",
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: "Bruno Mars ",
id: 4,
name: "Just The Way You Are",
path: "musics/1592383891287.mp3",
size: 3602925,
style: "摇滚",
uptime: 1592383891000
},
{
ablum: "xxx",
artist: "Jason Chen",
id: 5,
name: "童话",
path: "musics/1592383916578.mp3",
size: 4143707,
style: "流行",
uptime: 1592383916000
}
]
index.js
//创建音频播放器对象
var player = document.createElement('audio');
//记录当前正在播放的歌曲的索引
var currentIndex = 0;
//声明一个标记,记录歌曲的播放状态(是否播放)
var isplay = false;
//绑定数据到页面中
//循环遍历歌曲列表,根据数目在页面中生成对应的html代码
(function () {
var html = '';
for (var i = 0; i < musics.length; i++) {
var m = musics[i];
//根据循环的次数创建对应的歌曲项
html += `<tr class="music-item" data-index="${i}">
<td class="tb-space" style="text-align: center"></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插入到指定的dom节点中
document.getElementById('tbody').innerHTML = html;
//初始化播放器
player.src = musics[currentIndex].path;
})();
//为列表项触发点击事件
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();
})
//使用函数闭包的方式获取点击的列表项索引
// trs[i].addEventListener('click',(function(index){
// return function(){
// alert(index)
// }
// }(i)))
}
//开始播放
function startPlay() {
//设置为播放状态
isplay = true;
//播放
player.play();
//修改当前的背景色
trs[currentIndex].style.backgroundColor = '#f0f0f0';
//修改当前的gif
trs[currentIndex].getElementsByTagName('td')[0].innerHTML = '<img src="imgs/playing.gif">'
// this.querySelector('td:nth-child(1)')
//将播放按钮的背景图片设置为暂停图标
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 = '';
}
//暂停播放
function pausePlay() {
//将播放状态标记为false
isplay = 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;
//记录歌曲当前的音量
var volume = 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', function () {
// //获取最新的播放进度
// now = player.currentTime;
// //计算进度的百分比
// var p = now / total * 100 + '%';
// //为进度条元素设置宽度
// document.querySelector('.progress-control').style.width = p;
// //更新最新播放时间
// document.querySelector('.play-current').innerText = fmtTime(now);
// })
//为播放器绑定播放完成事件
player.addEventListener('ended', function () {
console.log('歌曲播放完成...')
//清除上一首播放状态
clearStatus();
currentIndex++;
if (currentIndex >= musics.length) {
currentIndex = 0;
}
//重新为播放器设置播放源
player.src = musics[currentIndex].path;
//继续播放
startPlay();
});
//为播放器绑定播放下一首事件
document.getElementById('btnnext').addEventListener('click', function () {
clearStatus();
currentIndex++;
if (currentIndex >= musics.length) {
currentIndex = 0;
}
//重新为播放器设置播放源
player.src = musics[currentIndex].path;
//继续播放
startPlay();
});
//为播放器绑定播放上一首事件
document.getElementById('btnpre').addEventListener('click', function () {
clearStatus();
currentIndex--;
if (currentIndex <= 0) {
currentIndex = musics.length;
}
//重新为播放器设置播放源
player.src = musics[currentIndex].path;
//继续播放
startPlay();
});
//当播放进度改变时执行以下函数
player.addEventListener('timeupdate', updateProgress);
function updateProgress() {
//获取当前最新的进度
now = this.currentTime;
//根据歌曲的当前播放进度和总进度获取进度条的实时宽度
var width = now / total * 100 + '%';
//设置进度条的css中width属性
document.querySelector('.progress-control').style.width = width;
//将时间显示到界面中
document.querySelector('.play-current').innerText = fmtTime(now);
}
//当声音改变是执行以下函数
player.addEventListener('volumechange', updatevolume);
function updatevolume() {
//设置当前的音频播放器的音量为0
volume = this.volume;
//根据当前的音量和默认音量获取音量的实施大小
var width = volume / 1 * 100 + '%';
//设置音量条的css中width属性
document.querySelector('.volume-control ').style.width = width;
}
// 滑动音量键改变音量大小
(function (box,bar) {
//监控变量，监控鼠标是否按下
var status = false;
//鼠标按下事件监听
document.querySelector(box).addEventListener('mousedown', function (e) {
//解除音量改变事件
player.removeEventListener('volumechange', updatevolume);
move(e)
// status = true;
})
//鼠标抬起事件监听
document.addEventListener('mouseup', function () {
//更新播放进度
player.volume = volume;
//重新音量改变事件
player.addEventListener('volumechange', updatevolume);
status = false;
})
//鼠标移动时事件监听
document.querySelector(box).addEventListener('mousemove', function (e) {
if (status == true) {
move(e);
}
})
//鼠标滑动执行
function move(e) {
//点击事件与左边缘的距离
var eventLeft = e.offsetX;
document.querySelector(bar).style.width = eventLeft + 'px';
var w = window.getComputedStyle(document.querySelector('.volume-panel ')).width;
//获取音量当前所在位置
volume = eventLeft / parseInt(w) ;
//设置鼠标状态为按下
status = true;
}
})('.volume-panel ', '.volume-control');
// 滑动进度条改变歌曲播放进度
(function (box, bar) {
//监控变量，监控鼠标是否按下
var status = false;
//鼠标按下事件监听
document.querySelector(box).addEventListener('mousedown', function (e) {
//解除播放器时间更新事件
player.removeEventListener('timeupdate', updateProgress);
move(e)
// status = true;
})
//鼠标抬起事件监听
document.addEventListener('mouseup', function () {
//更新播放进度
player.currentTime = now;
//重新绑定播放器时间更新事件
player.addEventListener('timeupdate', updateProgress);
status = false;
})
//鼠标移动时事件监听
document.querySelector(box).addEventListener('mousemove', function (e) {
if (status == true) {
move(e);
}
})
//鼠标滑动执行
function move(e) {
//点击事件与左边缘的距离
var eventLeft = e.offsetX;
document.querySelector(bar).style.width = eventLeft + 'px';
var w = window.getComputedStyle(document.querySelector('.play-panel')).width;
//获取播放器当前所在位置
now = eventLeft / parseInt(w) * total;
//设置鼠标状态为按下
status = true;
}
})('.play-length', '.progress-control');//参数为可触发事件的进度条所在盒子类，进度条类
//工具函数,格式化歌曲的播放时间为 mm:ss
function fmtTime(time) {
//将秒为单位时间转换为毫秒单位
time *= 1000;
//使用毫秒数构建一个日期对象
time = new Date(time);
var m = time.getMinutes();
var s = time.getSeconds();
m = m < 10 ? '0' + m : m;
s = s < 10 ? '0' + s : s;
return m + ":" + s;
}
//工具函数,格式化歌曲大小
function fmtSize(size) {
size = size / (1024 * 1024);
//保留小数点后一位
size = size.toFixed(1);
return size + 'MB';
}
//保留一位小数点
function returnFloat1(value) {
value = Math.round(parseFloat(value) * 10) / 10;
if (value.toString().indexOf(".") < 0) {
value = value.toString() + ".0";
}
return value;
}
效果图:
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
