HTML5播放器
思路都在注释里了,想法跟着注释走!
HTML部分:
<div class="main">
<!--创建audio对象-->
<audio id="my_music" src="http://www.xuxiangbo.com/music/song.mp3"></audio>
</div>
<div class="ctrl">
<!--音乐时长 数字方式显示-->
<div class="song_info"><span id="ed_time">00:00</span> / <span id="full_time"></span></div>
<!--进度条-->
<div class="time_line"><!--外层div代表音乐总时长-->
<div class="time_line_ed"><!--加ED的代表已经播放的-->
<div class="time_line_ed_tit"></div><!--进度条最右侧的小圆点-->
</div>
</div>
<!--控制器 没什么说的-->
<div class="ctrl_btn">
<button class="ctrl_button" title="上一曲">上一曲</button>
<button class="ctrl_button" title="播放" style="font-weight:bolder;font-size:30px">播放/暂停</button>
<button class="ctrl_button" title="下一曲">下一曲</button>
<span class="ctrl_vol"><a class="vol_off">音量</a></span>
</div>
</div>
</div>
CSS部分没什么难度,主要就是进度条的两个DIV嵌套,代码:
#my_music{
display: none;
}
.ctrl{
position: absolute;
bottom: 100px;
left: 50%;
margin-left: -500px;
width: 1000px;
height: 100px;
overflow: hidden;
}
.time_line{
width: 1000px; /*1000px方便计算进度百分比,数学好的可以随便搞*/
height: 5px;
background: #fff;
border-radius: 20px;
position: relative;/*父级 .ctrl 用了绝对定位,这边可以用相对定位*/
top: 10px;
cursor: pointer;
}
.time_line_ed{
position: absolute;/*这个定位...为什么是absolute,忘记了,好尴尬....*/
left: -985px;
width: 1000px;
height: 5px;
border-radius: 20px;
background: #007979;
cursor: pointer;
}
.time_line_ed_tit{
width: 5px;
height: 5px;
background: #fff;
border: 5px solid #007979;
border-radius: 50%;
position: absolute;
top: -5px;
right: 0;
}
.ctrl_btn{
position: absolute;
top: 60px;
}
.ctrl_btn button{
background: none;
border: 0;
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 10px;
}
.ctrl_btn button:hover{
color: #007979;
}
.ctrl_btn button:focus{
outline: none;
}
.ctrl_vol a{
font-size: 22px;
color: #007979;
margin-left: 20px;
cursor: pointer;
}
.ctrl_vol span{
display: inline-block;
width: 10px;
height: 8px;
background: #fff;
cursor: pointer;
position: relative;
bottom: 3px;
}
JS部分:window.onload = function (){ //获取音乐对象 var my_music = document.getElementById('my_music'); //获取音乐时间,要给一个canplay事件,否则会网络不好的时候会返回NAN my_music.addEventListener("canplay",function(){ //设置初始音量 my_music.volume = 0.5; //格式化音乐时长 duration var time_min = parseInt(my_music.duration/60); if (time_min<10) { time_min = "0" + time_min; //小于十的数字前面加0 }; var time_sen = parseInt(my_music.duration%60); if (time_sen<10) { time_sen = "0" + time_sen; }; var time = time_min + ":" + time_sen; document.getElementById('full_time').innerHTML = time;//输出音乐时间 }) //已播放时长 function show_timed(){ //格式化已播放的时间 currentTime var timed_min = parseInt(my_music.currentTime/60); if (timed_min<10) { timed_min = "0" + timed_min; }; var timed_sen = parseInt(my_music.currentTime%60); if (timed_sen<10) { timed_sen = "0" + timed_sen; }; var timed = timed_min + ":" + timed_sen; document.getElementById('ed_time').innerHTML = timed;//输出已播放的时间 } setInterval(show_timed,100); //进度条 var time_line_ed = document.getElementsByClassName('time_line_ed')[0]; function move(){ //计算已播放的百分比 乘1000(CSS里面设置的time_line的宽度,减去小圆点的15,所以是985) var jindu = my_music.currentTime/my_music.duration*985 - 985; time_line_ed.style.left = jindu + "px";//请忽略这个高端大气上档次的变量名... } setInterval(move,100);//让进度条动起来 //进度条点击事件 var time_line = document.getElementsByClassName('time_line')[0]; time_line.addEventListener("click",function(){ var e = event || window.event; var pos = time_line.getBoundingClientRect(); var dutime = e.clientX - pos.left;//获取点击位置 var ddd = dutime/985*my_music.duration; my_music.currentTime = ddd;//根据百分比让 进度条 和 已播放时间 同步 }) //控制器 播放/暂停 var crtl_button = document.getElementsByClassName('ctrl_button'); crtl_button[1].addEventListener("click",function(){ //判断当前状态,paused 执行函数 播放(play()) or 暂停(pause()) , if (my_music.paused){ my_music.play(); this.style.color = "#007979"; this.setAttribute('title','暂停'); }else{ my_music.pause(); this.style.color = "#ffffff"; this.setAttribute('title','播放'); } }) //当前播放完毕事件 暂停、恢复按钮状态 my_music.addEventListener("ended",function(){ my_music.pause(); crtl_button[1].style.color = "#ffffff"; crtl_button[1].setAttribute('title','播放'); }) //音量控制 var vol_num = 0; var vol = document.getElementsByClassName('ctrl_vol')[0]; for (var i = 0; i < 10; i++) { //输出音量色块 每一个色块代表 10%的音量 var append_span = document.createElement("span"); vol.appendChild(append_span); } var vol_btn = vol.getElementsByTagName("span"); for (var i = 0; i < vol_btn.length; i++) { if (i < 5) { vol_btn[i].style.background = "#007979"; //默认50%音量,所以输出5个带颜色的 } } for (var i = 0; i < vol_btn.length; i++) { vol_btn[i].index = i + 1; vol_btn[i].addEventListener("click",function(){//判断点击色块的 索引 my_music.volume = this.index/10; for (var x = 0; x < vol_btn.length; x++) { if (x < this.index) { vol_btn[x].style.background = "#007979"; }else{ vol_btn[x].style.background = "#fff"; } } vol_num = this.index; }) }; var vol_off = document.getElementsByClassName('vol_off')[0]; vol_off.addEventListener("click",function(){ if (my_music.volume) { my_music.volume = 0; this.innerHTML = "静音"; for (var i = 0; i < vol_btn.length; i++) { vol_btn[i].style.background = "#fff"; } }else{ if (vol_num) { my_music.volume = vol_num/10; this.innerHTML = "音量"; for (var i = 0; i < vol_num; i++) { vol_btn[i].style.background = "#007979"; } }else{ my_music.volume = "0.5"; this.innerHTML = ""; for (var i = 0; i < 5; i++) { vol_btn[i].style.background = "#007979"; } } } }) }
原生js撸的不多,工作一直都用jq来着,最近打算把扔掉的原生重新捡起来,所以代码写的比较懒散,大牛们有兴趣给优化一下的,欢迎联系我。代码仅供参考,请勿直接复制使用,以免出现不必要的意外。