学习了前端知识和jquery以后，发现jquery的确可以给java开发带来很大的便利，下面就用jquery结合html+css3来做一个简易的音乐播放器
，话不多说，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- 设置移动端应用必备 -->
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>云音乐</title>
<!-- 引入font-awesome字体图标库 -->
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 引入样式文件 -->
<link rel="stylesheet" href="./css/index.css">
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="app" class="column">
<img class="music-img" src="img/06.jpg" alt="专辑封面">
<div class="head center">不谓侠</div>
<!-- 歌曲列表的结构区域 -->
<div class="list">
<div class="item row">
<div class="item-icon center">
<span class="fa fa-music"></span>
</div>
<div class="item-name">不谓侠</div>
<div class="item-size">4.5MB</div>
</div>
</div>
<!-- 底部歌曲播放状态显示以及控制区域 -->
<div class="foot column">
<!-- 进度条可触发区域 -->
<div class="progress-box center">
<!-- 进度条轨道 -->
<div class="progress-bg">
<!-- 当前进度 -->
<div class="progress">
<div class="dot"></div>
</div>
</div>
</div>
<!-- 歌曲播放时间显示:当前时间，总时长-->
<div class="time-box row">
<div class="time-now">01:12</div>
<div class="time-total">04:05</div>
</div>
<!-- 歌曲播放控制按钮 -->
<div class="btn-box row">
<button class="btn-play-type"><span class="fa fa-list"></span></button>
<button class="btn-play-prov"><span class="fa fa-fast-backward fa-2x"></span></button>
<button class="btn-play-pause"><span class="fa fa-play-circle-o fa-4x"></span></button>
<button class="btn-play-next"><span class="fa fa-fast-forward fa-2x"></span></button>
<button></button>
</div>
</div>
</div>
<span id="toast" class="center">提示文本</span>
<!-- 引入脚本文件 -->
<script>
$(function () {
let baseurl = "http://www.softeem.top:8080/music/";
let nowIndex = 0;
let playType = 0;
let isplay = false;
let player = $("<audio></audio>")
//显示歌曲的所有数据
$.get(baseurl + "list", function (data) {
data = JSON.parse(data);
// console.log(data[0].path)
readerData(data);
$('.item').each(function (i, e) {
// console.log(e)
$(e).on('click', function () {
if (nowIndex == i) {
return;
}
$(".item")[nowIndex].className = 'item row';
$(".item-icon")[nowIndex].className = 'item-icon center';
nowIndex = i;
player.src = baseurl + data[i].path;
$(player).prop("src", player.src)
startPlay(data);
$(player).on("loadeddata", function () {
total = this.duration;
$('.time-total').text(fmtTime(total))
})
$(player).on("timeupdate", function () {
now = this.currentTime;
$(".time-now").text(fmtTime(now))
let w = `${now / total * 100}%`;
$('.progress').css("width", w);
})
//播放方式切换
$(player).on('ended', function () {
next(data);
})
$(player).on('ended', function () {
prev(data);
})
//暂停
$('.btn-play-pause').on('click', function () {
if (isplay) {
toast('暂停');
isplay = false;
player.get(0).pause();
$('.btn-play-pause>span').prop('class', 'fa fa-play-circle-o fa-4x')
} else {
toast('播放');
startPlay(data);
}
})
$('.progress-box').on('click', function (h) {
let x = h.offsetX;
let w = window.innerWidth;
now = x / w * total;
$(player).get(0).currentTime = now;
})
})
})
$('.btn-play-type').on("click", function () {
if (playType === 0) {
playType = 1;
toast('随机播放');
$('.btn-play-type>span').prop("class", 'fa fa-random')
} else if (playType === 1) {
playType = 2;
toast('单曲循环');
$('.btn-play-type>span').prop("class", 'fa fa-history')
} else {
playType = 0;
toast('列表循环');
$('.btn-play-type>span').prop("class", 'fa fa-list')
}
})
//歌曲播放完下一曲
$(player).on('ended', function () {
next();
})
$('.btn-play-next').on('click', function () {
toast('下一曲');
next(data);
})
$('.btn-play-prov').on('click', function () {
toast('上一曲');
prov(data);
})
})
function readerData(data) {
let html = '';
$(data).each(function (i, e) {
html += `<div class="item row">
<div class="item-icon center">
<span class="fa fa-music"></span>
</div>
<div class="item-name">${e.name}</div>
<div class="item-size">${(e.size / 1024 / 1024).toFixed(1)}MB</div>
</div>`;
})
$(".list").html(html);
}
function startPlay(data) {
isplay = true;
player.get(0).play()
// console.log( data[nowIndex])
$('.item').get(nowIndex).className = 'item row playing-item';
$('.item-icon').get(nowIndex).className = 'item-icon center playing';
$('.head').text(data[nowIndex].name);
$('.btn-play-pause>span').get(0).className = 'fa fa-pause-circle-o fa-4x';
}
//日期格式化函数
function fmtTime(time) {
//根据提供的歌曲播放时间包装为一个Date对象
time = new Date(time * 1000);
//获取date中的分和秒
let m = time.getMinutes();
let s = time.getSeconds();
//设置分秒至少显示两位
m = m < 10 ? `0${m}` : m;
s = s < 10 ? `0${s}` : s;
return `${m}:${s}`;
}
//下一曲
function next(data) {
$(".item")[nowIndex].className = 'item row';
$(".item-icon")[nowIndex].className = 'item-icon center';
if (playType === 0) {
//列表
nowIndex = Math.abs(++nowIndex % data.length);
} else if (playType === 1) {
nowIndex = parseInt(Math.random() * data.length);
}
player.src = baseurl + data[nowIndex].path;
$(player).prop("src", player.src)
startPlay(data);
}
function prov(data) {
$(".item")[nowIndex].className = 'item row';
$(".item-icon")[nowIndex].className = 'item-icon center';
if (playType === 0) {
//列表
nowIndex = Math.abs(--nowIndex % data.length);
} else if (playType === 1) {
nowIndex = parseInt(Math.random() * data.length);
}
player.src = baseurl + data[nowIndex].path;
$(player).prop("src", player.src)
startPlay(data);
}
function toast(msg) {
$('#toast').text(msg).css("visibility", "visible")
let flag = window.setTimeout(function () {
$('#toast').css("visibility", "hidden")
clearTimeout(flag);
}, 1000)
}
})
</script>
</body>
</html>
下面是实现部分截图
有很多地方还有待改进，例如还是有很多地方采用了原生的js，并没有完全把jquery的特性发挥出来。后续会不断改进。
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
