音乐播放主要用到HTML5元素中的audio属性
接下来我们开始写:
先布好局
<div class="music">
<div class="musicL">
<i class="iconfont icon-shangyishou"></i>
<span class="play" id="play">
<i class="iconfont icon-bofang"></i>
</span>
<i class="iconfont 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>
<audio id="audio" autoplay="autoplay"></audio>
<div class="music_list">
<ul>
<li class="title"><span><b>歌曲列表</b></span></li>
</ul>
</div>
加上样式
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.music {
width: 500px;
height: 40px;
background: #242424;
margin: 20px auto;
line-height: 40px;
}
.musicL {
float: left;
}
.iconfont {
color: #fff;
margin: 0 10px
}
.progress {
float: left;
font-size: 14px;
width: 300px;
height: 40px;
margin-left: 10px;
color: #fff;
}
.progress span {
margin: 0 4px;
}
.load {
display: inline-block;
width: 200px;
height: 5px;
background: #ddd;
cursor: pointer;
position: relative;
top: -2px;
}
.circle {
width: 0px;
height: 5px;
background: red;
position: relative;
left: 0;
top: 0;
}
.round {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: crimson;
left: 0px;
border: 3px solid #fff;
top: -5px;
margin-left: -7px;
}
.music_list {
width: 500px;
background: #242424;
margin: -20px auto;
border-top: 2px solid #dc143c;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
color: #fff;
}
.music_list li {
height: 40px;
border-bottom: 1px solid #ccc;
line-height: 40px;
cursor: pointer;
}
.music_list li span {
margin: 0 10px;
width: 220px;
float: left;
}
.music_list .title span {
font-size: 18px;
}
.music_list li:hover {
border-left: 2px solid crimson;
background: rgba(255, 255, 255, 0.5);
}
.music_list ul .title:hover {
border-left: 0px;
background: #242424;
}
.music .musicL i {
cursor: pointer;
}
这样播放器的基本样子就出来了,
最后把功能完善一下,
var oUp = document.getElementsByClassName("icon-shangyishou")[0]
var oDo = document.getElementsByClassName("icon-xiayishou")[0]
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 oList = document.getElementsByClassName("music_list")[0]
var oUl = oList.getElementsByTagName("ul")[0]
var _this = null
var num = 0
var arr = ["video/4.mp3", "video/3.mp3", "video/2.mp3", "video/1.mp3"]
var arr2 = ["明年今日", "爱的故事上集", "That Girl", "走马"]
var arr3 = ["陈奕迅", "陈涵", "龙千里", "陈粒"]
oAudio.src = arr[num]
for(var i = 0; i < arr.length; i++) {
var str = '<li index=' + i + '>' + '<span>' + arr2[i] + '</span>' + arr3[i] + '</li>'
oUl.innerHTML += str
}
var oLi = oUl.getElementsByTagName("li")
//转换总时长
oAudio.addEventListener("canplay", function() {
oTotal.innerHTML = getMin(this.duration)
})
//播放列表
for(var i = 0; i < oLi.length; i++) {
oLi[i].ondblclick = function() {
oAudio.src = arr[this.getAttribute("index")]
_this = this
}
}
//点击开始播放
oPlay.onclick = function() {
if(oAudio.paused) {
oAudio.play()
oPlay.innerHTML = '<i class="iconfont icon-zanting"></i>'
} else {
oAudio.pause()
oPlay.innerHTML = '<i class="iconfont icon-bofang"></i>'
}
}
//监听进度变化
oAudio.ontimeupdate = function() {
var pre = Math.floor(oAudio.currentTime / oAudio.duration * 200)
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
}
//拖拽原点
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
}
return false
}
//播放结束
oAudio.addEventListener("ended", function() {
num++
oAudio.src = arr[num]
if(num > arr.length) {
num = 0
}
console.log(oAudio.src)
oAudio.play()
})
//获取分钟的函数
function getMin(time) {
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
}
_this = oLi[0]
//上一首
oUp.onclick = function() {
var now = _this.getAttribute("index")
now--
if(now < 0) {
now = arr.length - 1
}
console.log(now)
_this = oLi[now]
oAudio.src = arr[now]
oAudio.play()
console.log(oAudio.src)
}
//下一首
oDo.onclick = function() {
var now = _this.getAttribute("index")
now++
if(now > arr.length - 1) {
now = 0
}
_this = oLi[now]
console.log(now)
oAudio.src = arr[now]
oAudio.play()
console.log(oAudio.src)
}
这里要注意的是文件路径不要错
上一首与下一首原理跟图片一样,都是改变下标来切换