介绍
这篇文章给大家分享的是有关html5中音频播放的实现方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
undefinedundefinedundefined
<标题> html5音频音频播放
<时尚>
*{保证金:0;填充:0;}
身体{-webkit-tap-highlight-color: rgba (0, 0, 0, 0);字体类型:“微软雅黑”}
h2{宽度:100%;字体大小:1.5 em;text-align:中心;行高:3他们;颜色:# 47 c9af;}
#音频{宽度:100%;}
#控制{宽度:150 px;身高:150 px;行高:150 px;text-align:中心;border - radius: 200 px;边界:没有;颜色:# fff;margin-top: -75 px;margin-left: -75 px;左:50%;上图:50%;位置:绝对的;不必:# 888 0 0 8 px;}
.color_gray{背景:# e4e4e4}
hide{显示:没有;}
,告诉{显示:块;}
.play{背景:# f06060;}
.pause{背景:天蓝色}/*进度条样式*/.progressBar{宽度:100%;高度:10 px;保证金:30 px汽车30 px汽车;位置:绝对的;左:0;底部:35 px;}
.progressBar p{:绝对;}
.progressBar .progressBac{宽度:100%;高度:10 px;左:0;上图:0;背景:# e4e4e4;}
.progressBar。speed{宽度:100%;高度:10 px;左:-100%;背景:# f06060;}
.progressBar .drag{宽度:30 px;高度:30 px;左:0;前:-10像素;背景:天蓝色;透明度:0.8;border - radius: 50 px;不必:# fff 0 0 5 px;}/*时间样式*/#时间{宽度:100%;高度:20 px;位置:绝对;左:0;底部:30 px;颜色:# 888;}
.tiemDetail{:绝对;右:10 px;上图:0;}
# songInfo{溢出:隐藏;宽度:200 px;高度:50 px;行高:50 px;text-align:中心;颜色:# 34495 e;margin-top: -25 px;margin-left: -100 px;左:50%;上图:70%;位置:绝对的,}
.shareImg{:绝对;左:100000 px;}>
<>脚本
$(函数(){
getSong ();
})//获取歌曲链接并插入dom中
函数getSong () {
var音频=. getelementbyid(“音频”);
音频。src=" http://frontman.qiniudn.com/songnotime.mp3 ";
音频。循环=true;//歌曲循环
playCotrol ();//播放控制函数
}//点击播放/暂停
函数点击(){
var音频=. getelementbyid(“音频”);
$(" #控制”).click(函数(){
如果($(" #控制”).hasClass(“玩”)){
$(" #控制”).addClass .removeClass(“暂停”)(“玩”);
audio.play();//开始播放
dragMove();//并且滚动条开始滑动
$(" #控制”). html(“暂停播放”);
其他}{
$(" #控制”).addClass .removeClass(“玩”)(“暂停”);
$(" #控制”). html(“点击播放”);
audio.pause ();
}
})
}//播放时间
函数timeChange(时间、timePlace){//默认获取的时间是时间戳改成我们常见的时间格式
var timePlace=. getelementbyid (timePlace);//分钟
var/60分钟=时间;
var分钟=方法(分钟);
如果(分钟<10){
分钟=" 0 " +分钟;
}//秒
var第二=时间% 60;
秒=方法(第二次);
如果(秒<10){
秒=" 0 " +秒;
}
var全时工作的=" " +分钟+ " " + ":" + " " + " " +秒
timePlace。innerHTML=全时工作的;
}//播放事件监听
函数playCotrol () {
音频。addEventListener (“loadeddata”//歌曲一经完整的加载完毕(也可以写成上面提到的那些事件类型)
函数(){
$(" #控制”).addClass .removeClass(“玩”)(“color_gray”);
$(" #控制”). html(“点击播放”);
addListenTouch ();//歌曲加载之后才可以拖动进度条
var全时工作的=audio.duration;
timeChange(全时工作的,“全时工作的”);
setInterval(函数(){
var currentTime=audio.currentTime;
$ (" # .currentTime”)。html (timeChange (currentTime currentTime));
}, 1000);
点击();
},假);
audio.addEventListener(“暂停”,
函数(){//监听暂停
$(" #控制”).addClass .removeClass(“玩”)(“暂停”);
$(" #控制”). html(“点击播放”);
如果(音频。currentTime==audio.duration) {
audio.stop ();
音频。currentTime=0;
}
},假);
audio.addEventListener(“玩”,
函数(){//监听暂停
$(" #控制”).addClass .removeClass(“暂停”)(“玩”);
$(" #控制”). html(“暂停播放”);
dragMove ();
},假);
音频。addEventListener(“结束”,函数(){
警报(0)
},假)
}//进度条
这里我用的是事件实现进度拖动如果不太熟悉的联系可以看下我之前写的一个小演示http://www.cnblogs.com/leinov/p/3701951.html
var startX, x, aboveX=0;//触摸时的坐标//滑动的距离//设一个全局变量记录上一次内部块滑动的位置//1拖动监听触摸事件
函数addListenTouch () {
. getelementbyid(“拖”)。addEventListener (“touchstart touchstart”,假);
. getelementbyid(“拖”)。addEventListener (“touchmove touchmove”,假);
. getelementbyid(“拖”)。addEventListener (“touchend touchend”,假);
var拖=. getelementbyid(“拖”);
var速度=. getelementbyid(“速度”);
}//touchstart、touchmove touchend事件函数
函数touchStart (e) {
e.preventDefault ();
var=联系e.touches [0];
startX=touch.pageX;
}
函数touchMove (e){//滑动
e.preventDefault ();
var=联系e.touches [0];
x=联系。pageX - startX;//滑动的距离//drag.style。webkitTransform='翻译(' + 0 + ' px, ' + y + ' px)”;//也可以用css3的方式
drag.style。左=aboveX + x +“px”;//speed.style。左=- ((window.innerWidth)——(aboveX + x)) +“px”;
}
函数touchEnd (e){//手指离开屏幕
e.preventDefault ();
aboveX=方法(drag.style.left);
var=联系e.touches [0];
var dragPaddingLeft=drag.style.left;
var=dragPaddingLeft变化。null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
nullhtml5中音频播放的实现方法
