您的位置：首页 > Web前端 > HTML5

html5 audio音频播放全解析

2015-12-20 20:34 501 查看
1.html5audio的语法以及属性和方法
使用语法
亲您的浏览器不支持html5的audio标签
属性
src是歌曲的路径
controls播放控制如果给标签里写了controls="controls"那么网页会显示audio自带的播放控件，如果没写就不会显示.
loop歌曲循环在标签里添加该属性歌曲循环如果你的歌曲是从后台调取的的也可以在ajax里设置loop=true/false来控制;
autoplay当歌曲加载后自动播放，但是只有pc端可以实现移动端不行(pc端的浏览器要比移动端的完善很多，对有些属性支持也会好很多)
以上是标签内的属性当然也可以作为对象属性来调取控制auido.*

audio不单单是个标签他也是window下的一个对象，对象就有属性和方法，作为对象他有哪些常用的方法呢
对象属性：
currentTime获取当前播放时间
duration获取歌曲的总时间
play是否在播放返回true/false
pause是否暂停返回true/false
对象方法：
play()播放歌曲
pause()暂停歌曲
load()重新加载歌曲

以上这些属性和方法只是audio最常用的一部分，也是今天的demo里面要用到的，如果想了解更多关于audio的属性和方法可以去w3shool看下http://www.w3school.com.cn/jsref/dom_obj_audio.asp
2.html5audio的一些事件
play播放事件可判断歌曲是否正在播放中
pause暂停事件判断歌曲是否暂停
loadstart，durationchange，loadeddata，progress，canplay，canplaythrough。（这些事件在加载过程中是按以上顺序触发的）
以上这些事件可以通过事件监听对其做相应处理

3.完整的音频播放页面

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194

"en"
>


"UTF-8"
>

"viewport"
content=
"width=device-width,initial-scale=1user-scalable=0"
/>

"shortcuticon"
href=
"img/logo.png"
>



*{margin:0;padding:0;}

body{-webkit-tap-highlight-color:rgba(0,0,0,0);font-family:
"微软雅黑"
}

h1{width:100%;font-size:1.5em;text-align:center;line-height:3em;color:
#47c9af;}

#audio{width:100%;}

#control{width:150px;height:150px;line-height:150px;text-align:center;border-radius:200px;border:none;color:#fff;margin-top:-75px;margin-left:-75px;left:50%;top:50%;position:absolute;box-shadow:#888008px;}

.color_gray{background:
#e4e4e4}

.hide{display:none;}

.show{display:block;}

.play{background:
#f06060;}

.pause{background:skyblue}


.progressBar{width:100%;height:10px;margin:30pxauto30pxauto;position:absolute;left:0;bottom:35px;}

.progressBardiv{position:absolute;}

.progressBar.progressBac{width:100%;height:10px;left:0;top:0;background:
#e4e4e4;}

.progressBar.speed{width:100%;height:10px;left:-100%;background:
#f06060;}

.progressBar.drag{width:30px;height:30px;left:0;top:-10px;background:skyblue;opacity:0.8;border-radius:50px;box-shadow:
#fff005px;}


#time{width:100%;height:20px;position:absolute;left:0;bottom:30px;color:#888;}

.tiemDetail{position:absolute;right:10px;top:0;}

#songInfo{overflow:hidden;width:200px;height:50px;line-height:50px;text-align:center;color:#34495e;margin-top:-25px;margin-left:-100px;left:50%;top:70%;position:absolute;}

.shareImg{position:absolute;left:100000px;}






$(
function
(){

getSong();

})


//获取歌曲链接并插入dom中

function
getSong(){

var
audio=document.getElementByIdx_x(
"audio"
);

audio.src=
"http://frontman.qiniudn.com/songnotime.mp3"
;

audio.loop=
true
;
//歌曲循环

playCotrol();
//播放控制函数


}


//点击播放/暂停

function
clicks(){

var
audio=document.getElementByIdx_x(
"audio"
);

$(
"#control"
).click(
function
(){

if
($(
"#control"
).hasClass(
"play"
)){

$(
"#control"
).addClass(
"pause"
).removeClass(
"play"
);

audio.play();
//开始播放

dragMove();
//并且滚动条开始滑动

$(
"#control"
).html(
"暂停播放"
);

}
else
{

$(
"#control"
).addClass(
"play"
).removeClass(
"pause"
);

$(
"#control"
).html(
"点击播放"
);

audio.pause();

}

})

}


//播放时间

function
timeChange(time,timePlace){
//默认获取的时间是时间戳改成我们常见的时间格式

var
timePlace=document.getElementByIdx_x(timePlace);

//分钟

var
minute=time/60;

var
minutes=parseInt(minute);

if
(minutes<10){

minutes=
"0"
+minutes;

}

//秒

var
second=time%60;

seconds=parseInt(second);

if
(seconds<10){

seconds=
"0"
+seconds;

}

var
allTime=
""
+minutes+
""
+
":"
+
""
+seconds+
""

timePlace.innerHTML=allTime;

}


//播放事件监听

function
playCotrol(){

audio.addEventListener(
"loadeddata"
,
//歌曲一经完整的加载完毕(也可以写成上面提到的那些事件类型)

function
(){

$(
"#control"
).addClass(
"play"
).removeClass(
"color_gray"
);

$(
"#control"
).html(
"点击播放"
);

addListenTouch();
//歌曲加载之后才可以拖动进度条

var
allTime=audio.duration;

timeChange(allTime,
"allTime"
);

setInterval(
function
(){

var
currentTime=audio.currentTime;

$(
"#time.currentTime"
).html(timeChange(currentTime,
"currentTime"
));

},1000);

clicks();

},
false
);


audio.addEventListener(
"pause"
,

function
(){
//监听暂停

$(
"#control"
).addClass(
"play"
).removeClass(
"pause"
);

$(
"#control"
).html(
"点击播放"
);

if
(audio.currentTime==audio.duration){

audio.stop();

audio.currentTime=0;

}

},
false
);

audio.addEventListener(
"play"
,

function
(){
//监听暂停

$(
"#control"
).addClass(
"pause"
).removeClass(
"play"
);

$(
"#control"
).html(
"暂停播放"
);

dragMove();

},
false
);

audio.addEventListener(
"ended"
,
function
(){

alert(0)

},
false
)

}


//进度条

这里我用的是事件实现进度拖动如果不太熟悉touch的可以看下我之前写的一个小demohttp:
//www.cnblogs.com/leinov/p/3701951.html

var
startX,x,aboveX=0;
//触摸时的坐标//滑动的距离//设一个全局变量记录上一次内部块滑动的位置


//1拖动监听touch事件

function
addListenTouch(){

document.getElementByIdx_x(
"drag"
).addEventListener(
"touchstart"
,touchStart,
false
);

document.getElementByIdx_x(
"drag"
).addEventListener(
"touchmove"
,touchMove,
false
);

document.getElementByIdx_x(
"drag"
).addEventListener(
"touchend"
,touchEnd,
false
);

var
drag=document.getElementByIdx_x(
"drag"
);

var
speed=document.getElementByIdx_x(
"speed"
);

}


//touchstart,touchmove,touchend事件函数

function
touchStart(e){

e.preventDefault();

var
touch=e.touches[0];

startX=touch.pageX;

}

function
touchMove(e){
//滑动

e.preventDefault();

var
touch=e.touches[0];

x=touch.pageX-startX;
//滑动的距离

//drag.style.webkitTransform='translate('+0+'px,'+y+'px)';//也可以用css3的方式

drag.style.left=aboveX+x+
"px"
;
//

speed.style.left=-((windows.innerWidth)-(aboveX+x))+
"px"
;

}

function
touchEnd(e){
//手指离开屏幕

e.preventDefault();

aboveX=parseInt(drag.style.left);

var
touch=e.touches[0];

var
dragPaddingLeft=drag.style.left;

var
change=dragPaddingLeft.replace(
"px"
,
""
);

numDragpaddingLeft=parseInt(change);

var
currentTime=(numDragpaddingLeft/(windows.innerWidth-30))*audio.duration;
//30是拖动圆圈的长度，减掉是为了让歌曲结束的时候不会跑到window以外

audio.currentTime=currentTime;

}

//3拖动的滑动条前进

function
dragMove(){

setInterval(
function
(){

drag.style.left=(audio.currentTime/audio.duration)*(windows.innerWidth-30)+
"px"
;

speed.style.left=-((windows.innerWidth)-(audio.currentTime/audio.duration)*(windows.innerWidth-30))+
"px"
;

},500);

}


html5audio音频播放demo
"audio"
src=
""
loop=
"loop"
autoplay=
"autoplay"
>


"control"
class=
""
>loading


"progressBar"
>


"progressBac"
>



"speed"
id=
"speed"
>



"drag"
id=
"drag"
>


"time"
>

"tiemDetail"
>"currentTime"
id=
"currentTime"
>00:00
/
"allTime"
id=
"allTime"
>00:00


"songInfo"
>没时间-Leinov

"shareImg"
>"img/html5audio.jpg"
alt=
""
>


"js/zepto.js"
>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航