主要功能：
1、支持点击进度条调整播放的位置
2、显示音乐的播放时间
3、暂停播放等~
js
//以下显示的136为音频的总时长
var vm = new Vue({
el: '#container',
data: {
progress_g_w:0,
circle_w:0,
pause:true,
current_time:0,
audio_w:'',
audio_w_g:'',
nowAudioTime:0,
},
created:function(){
},
mounted:function(){
this.touch_move();
},
filters:{
time:function(s){
var MM = Math.floor(s / 60);
var SS = s % 60;
if (MM < 10)
MM = "0" + MM;
if (SS < 10)
SS = "0" + SS;
var min = MM + ":" + SS;
return min.split('.')[0];
}
},
methods: {
audio_p:function(){
var that=this;
var audio_l=document.getElementById('audio');
that.audio_w=document.querySelector('.progress').offsetWidth;
var that = this;
audio_l.addEventListener("timeupdate", function() {
that.current_time = (audio_l.currentTime<=1)?1:audio_l.currentTime ;
var scales = (audio_l.currentTime / 136)>=1?1:(audio_l.currentTime / 136);
that.progress_g_w = scales*100 +'%';
that.audio_w_g=document.querySelector('.progress_g').offsetWidth;
//如果绿色进度条的宽度小于5px
if(that.audio_w_g<=5){
that.circle_w = 0;
}else if(that.audio_w_g>=(that.audio_w-5)){
that.circle_w = 'calc(100% - 10px)';
}else{
that.circle_w = 'calc('+(scales*100) +'% - 5px)';
}
}, false)
audio_l.addEventListener("ended", function() {
that.pause=true;
audio_l.currentTime = 0;
that.progress_g_w =0;
that.current_time=0;
that.circle_w = 0;
}, false)
},
play:function(){//点击播放
var that=this;
var audio_l=document.getElementById('audio');
if(audio_l.paused) {
audio_l.play();
that.audio_p();
that.pause=false;
} else {
audio_l.pause();
that.pause=true;
}
},
touch_move:function(){ //拖拉进度条
var that =this;
var width = document.querySelector('.progress').offsetWidth;
var audio=document.querySelector('audio');
/*audio.addEventListener("loadedmetadata", function() {*/
// 拖拽事件
var touch = document.querySelector('.circle');
touch.addEventListener("touchstart",handleStart,false);
touch.addEventListener("touchmove",handleMove,false);
touch.addEventListener("touchend",handleEnd,false);
var x1,y1,oldTime,newTime,olfLeft,newLeft;
function handleStart(e){
e.preventDefault();
var touches = e.changedTouches;
x1 = touches[0].pageX;
y1 = touches[0].pageY;
olfLeft=document.querySelector('.circle').offsetLeft;
document.getElementById("audio").pause();
that.pause=true;
}
function handleMove(e){
e.preventDefault();
var x2 = e.changedTouches[0].pageX;
var y2 = e.changedTouches[0].pageY;
newLeft = x2-x1;
nowLeft = olfLeft+newLeft;
if(nowLeft<0){
nowLeft = 0;
}
if(nowLeft>width){
nowLeft = width;
}
document.querySelector('.progress_g').style.width=nowLeft+"px";
document.querySelector('.circle').style.left=(nowLeft-(nowLeft>(width-10)?10:5))+"px";
var per = nowLeft/width;
that.nowAudioTime = 136*per;//音频应该显示的时间
that.current_time=that.nowAudioTime;
audio.currentTime = that.nowAudioTime;
}
function handleEnd(e){
touch.removeEventListener("touchmove",handleEnd,false);
document.querySelector('audio').currentTime = that.nowAudioTime;
console.log(document.querySelector('audio').currentTime);
document.querySelector('audio').play();
that.pause=false;
}
/*})*/
},
}
})
html
<div id="container">
<div class="main_box">
<div class="audio_box "><!--audio1-->
<div class="audio_detail">
<audio src="images/music.mp3" controls id="audio"></audio>
<b :class="{pause:!pause}" @click="play()"></b>
<div class="audio_p">
<div class="progress">
<div class="circle" v-bind:style="{ left: circle_w}"></div>
<div class="progress_g" v-bind:style="{ width: progress_g_w }"></div>
</div>
<div class="time clearfix">
<span>{{current_time | time}}</span>
<span><!--音频的时长--></span>
</div>
</div>
</div>
</div>
</div>
</div>
css
#audio{
width: 0px;
height:0px;
}
.audio_box{
width: 100%;
height: 1.23rem;
/*background: url(../images/audio_2_03.png) no-repeat;*/
background-size: 100% 100%;
margin-top: 1.6rem;
}
.audio_box.audio1{
height: .92rem;
background: url(../images/audio1_06.png) no-repeat;
background-size: 100% 100%;
}
.audio_box.audio1 .audio_txt{
padding-top: .13rem;
}
.audio_box .audio_txt{
font-size: .17rem;
color: #ffffff;
padding: .18rem .25rem 0 .5rem;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.audio_detail{
padding-left: .5rem;
position: relative;
padding-right: .13rem;
padding-top: .16rem;
}
.audio_detail b{
display: block;
position: absolute;
width: .3rem;
height: .3rem;
background: url(../images/icon.png) no-repeat 0 0;
background-size: 2.5rem;
left: .12rem;
top: .04rem;
}
.audio_detail b.pause{
background: url(../images/icon.png) no-repeat 0 -.4rem;
background-size: 2.5rem;
}
.audio_p{
position: absolute;
left: 0.5rem;
top: .2rem;
width: calc(100% - .63rem)
}
.progress{
width: 100%;
height: .02rem;
border-radius: .02rem;
background-color: white;
position: relative;
}
.progress .circle{
width: .1rem;
height: .1rem;
background: #41ff9d;
position: absolute;
border-radius: 50%;
left: calc(30% - .05rem);
top: -.04rem;
position: relative;
}
.progress .circle:after{
width: .3rem;
height: .3rem;
display: block;
content: '';
position: absolute;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
.progress_g{
position: absolute;
left: 0;
top: 0;
width: 30%;
height: .02rem;
border-radius: .02rem;
background-color: #41ff9d;
}
.time span{
float: left;
font-size: .11rem;
color: #45a08e;
margin-top: .1rem;
}
.time span:nth-of-type(2){
float: right;
}
未实现功能（音频加载完成之后才能拖拽）
网友评论