注意项:
1.歌曲请自备,开一个文件夹放入,写入数组路径要准确
2.仿网易云的播放器,图标css可去官网挖...(这个就是hhh)
3.在线图标可去阿里图标库拿,布局自己写,主要看JS逻辑,把html和css忽略吧
上JS代码:
<script>
var oTotal = document.getElementsByClassName("total_time")[0]
var oAudio = document.getElementById("audio")
var oPlay = document.getElementById("play")
var oCircle = document.getElementById("circle")
var oStart = document.getElementById("start_time")
var oRound = document.getElementById("round")
var oLoad = document.getElementById("load")
var oNext = document.getElementsByClassName("icon-xiayishou")[0]
var oPrev = document.getElementsByClassName("icon-shangyishou")[0]
var oMus = document.getElementById("music_list")
var oUl = oMus.getElementsByTagName("ul")[0]
var oLi = oUl.getElementsByTagName("li")
var oName = document.getElementById("musicName")
var oBtn = document.getElementById("icon-yinleliebiao")
var oML = document.getElementById("music_list")
var i = true
console.log(oLoad.offsetLeft)
var num = 0
var arr = ["music/1.mp3","music/2.mp3","music/3.mp3","music/4.mp3"] //数组存放歌曲
var arrText = ["My friend","绝不会忘记","幼稚完","明年今日"] //数组存放歌名
//初始化
oAudio.src = arr[num]
oName.innerHTML = arrText[num]
//转换总时长
oAudio.addEventListener("canplay",function(){
oTotal.innerHTML = getMin(this.duration) //获取当前歌曲总时长
})
//点击开始播放
oPlay.onclick = function(){
if(oAudio.paused){ //判断是否在播放
oAudio.play()
oPlay.innerHTML = '<i class="iconfontt icon-iconstop"></i>' //播放中切换暂停图标
}else {
oAudio.pause()
oPlay.innerHTML = '<i class="iconfontt icon-bofang"></i>' //暂停切换可播放图标
}
}
//监听进度变化
oAudio.ontimeupdate = function(){
var pre = Math.floor(oAudio.currentTime/oAudio.duration*200) //歌曲时长转换成进度条200px
oCircle.style.width = pre+"px"
oStart.innerHTML = getMin(oAudio.currentTime) //播放时间监听
oRound.style.left = oCircle.style.width
}
//点击进度变化
oLoad.onclick = function(e){
var l = e.clientX-oLoad.offsetLeft //当前点击位置减去进度条到网页左壁的长度
oAudio.currentTime = (l/200)*oAudio.duration //获取长度转换进度条百分比
console.log("2+click")
}
//拖拽原点
oRound.onmousedown = function(e){ //拖拽原理跟点击一样
document.onmousemove = function(e){
var l = e.clientX-oLoad.offsetLeft
oAudio.currentTime = (l/200)*oAudio.duration
}
document.onmouseup = function(){
document.onmousedown = null
document.onmousemove = null
console.log("up")
}
return false
}
//播放结束
oAudio.addEventListener("ended",function(){ //addEventListener() 方法用于向指定元素添加事件句柄。
num++ //播放结束自动跳到下一首
if(num>arr.length-1){
num=0
}
oAudio.src = arr[num]
oName.innerHTML = arrText[num]
oAudio.play()
oPlay.innerHTML = '<i class="iconfontt icon-iconstop"></i>'
})
//点击播放歌曲
for (var i = 0 ; i <oLi.length ; i++) { //注意当前点击下标和数组下标对齐
oLi[i].index = i
oLi[i].onclick =function(){
num = this.index
oAudio.src = arr[this.index]
oName.innerHTML = arrText[this.index]
oAudio.play()
oPlay.innerHTML = '<i class="iconfontt icon-iconstop"></i>'
}
}
//下一首
oNext.onclick = function(){
num++
if(num>arr.length-1){
num=0
}
oAudio.src = arr[num]
oName.innerHTML = arrText[num]
oAudio.play()
oPlay.innerHTML = '<i class="iconfontt icon-iconstop"></i>'
}
//上一首
oPrev.onclick = function(){
num--
if(num<0){
num=arr.length-1
}
oAudio.src = arr[num]
oName.innerHTML = arrText[num]
oAudio.play()
oPlay.innerHTML = '<i class="iconfontt icon-iconstop"></i>'
}
//列表
oBtn.onclick = function(){ //歌曲列表隐藏开关
if (i) {
oML.style.display = "block"
i = false
}else{
oML.style.display = "none"
i = true
}
}
//获取分钟的函数
function getMin(time){ //歌曲时长转换00:00模式
var m = Math.floor(time/60)
var s = Math.floor(time%60)
if(m<=9){
m="0"+m
}
if(s<=9){
s = "0"+s
}
return m+":"+s
}
</script>
HTML:
<div class="music">
<div class="musicL">
<i class="iconfontt icon-shangyishou"></i>
<span class="play" id="play">
<i class="iconfontt icon-bofang"></i>
</span>
<i class="iconfontt icon-xiayishou"></i>
</div>
<div class="progress">
<span class="start_time" id="start_time">00:00</span>
<div class="load" id="load">
<div class="circle" id="circle">
<div class="round" id="round">
</div>
</div>
</div>
<span class="total_time" id="total_time">00:00</span>
</div>
<div class="music_name">
<span id="musicName">My friend</span>
<i class="iconfont icon-yinleliebiao" id="icon-yinleliebiao"></i>
</div>
</div>
<audio id="audio"></audio>
<div class="music_list" id="music_list">
<ul>
<li>My friend</li>
<li>绝不会忘记</li>
<li>幼稚完</li>
<li>明年今日</li>
</ul>
</div>
CSS:
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
.music{
width: 550px;
height:48px;
background: url(img/playbar.png);
background-position: 0 0;
margin: 0 auto;
line-height:52px;
position: relative;
}
.musicL{
float: left;
}
.progress{
float: left;
font-size: 14px;
width: 300px;
height:40px;
margin-left:10px;
margin-top: 2px;
}
.load{
display: inline-block;
width: 200px;
height: 8px;
background:#ddd;
cursor: pointer;
position: relative;
top: -2px;
}
.circle{
width:0px;
height: 8px;
background: url(img/statbar.png);
background-position: left -66px;
position: relative;
left: 0;
top: 0;
}
.round{
position: absolute;
width: 22px;
height: 24px;
border-radius: 50%;
background: url(img/iconall.png);
background-position: 0 -280px;
right: -13px;
top: -7px;
margin-left: -10px;
}
.music_list{
width: 200px;
background: #DDDDDD;
margin: 0 auto;
position: absolute;
right: 685px;
display: none;
}
.music_list li{
height: 40px;
border-bottom: 1px solid #ccc;
line-height: 40px;
cursor: pointer;
}
.iconfontt{
background: url(img/playbar.png);
display: block;
float: left;
margin-right: 8px;
text-indent: -9999px;
}
.icon-shangyishou{
background-position: 0 -130px;
width: 28px;
height: 28px;
margin-top: 12px;
}
.icon-iconstop{
width: 36px;
height: 36px;
margin-top: 8px;
background-position: 0 -165px;
}
.icon-xiayishou{
background-position: -80px -130px;
width: 28px;
height: 28px;
margin-top: 12px;
}
.icon-bofang{
background-position: 0 -204px;
width: 36px;
height: 36px;
margin-top: 8px;
}
.start_time{
color: #a1a1a1;
margin-right: 5px;
}
.total_time{
color: #797979;
margin-left: 7px;
}
.music_name{
color: #e8e8e8;
}
.iconfont{
font-size: 20px;
}
.icon-yinleliebiao{
cursor: pointer;
}
做得略微简陋,看看就好,解释也很粗糙,相信你们看得懂的