简介
audio为html5中的新属性。定义声音，比如音乐或者其他的音频流。在ie8（包括）以及更早的版本并不支持。
我的自以为
一直以为自定义样式，就要添加相应的控制js代码，所以是望而却步。此次项目中正好出现了这一题目，而jacques同学则完美的呈现了这个音频效果。so决定学习一下，并且记录一下，有理解错误或者不能理解的地方还希望jacques给指教一下。
样式
audio默认提供一个控制面板，这个控制面板则可以由我们自己来定义其显示状态
html代码
<div class="Audio">
<audio id="audioTag" src="http://cdn.xxtao.com/cms/audio/yesterday once more.mp3" ></audio>
<div class="pgs">
<div class="pgs-play" id="progress" style="width: 20%;"></div>
<img src="images/progress.png">
</div>
<div class="controls">
<span class="played-time">00:00</span>
<button class="play-pause" id="playPause">
<span class="icon-btn icon-play"></span>
</button>
<span class="audio-time" id="audioTime">0</span>
</div>
</div>
css代码
.Audio{position: relative; width: 500px; margin: 0 auto;}
.pgs{width: 326px; margin: 0 auto 30px; background-color: #E3E8EE; text-align: center; position: relative; overflow: hidden; height: 35px;}
.pgs-play{position: absolute; top:0; left: 4.65%; width: 0; height: 100%; background-color: #4785f9; z-index: 1;}
.pgs img{width: 100%; position: relative; z-index: 2;}
.audio-name{position: absolute; top: 0; width: 100%; left: 0;text-align: center; color: #666; font-size: 12px;}
.controls{width: 100%; height: 40px; padding: 0; text-align: center;}
.play-pause{border: 0; outline: 0; padding: 0; width: 40px; height: 40px; margin: 0 28px; background: none; display: inline-block; vertical-align: middle;}
.icon-play{width: 40px; height: 40px; background: url(images/play.png) no-repeat; display: block; color: #478f59;}
.icon-pause{width: 40px; height: 40px; background: url(images/pruse.png) no-repeat; display: block; color: #478f59;}
.controls span{color: #b3b5b7; font-size: 12px; display: inline-block; width: 34px;}
.audio-time{display: inline-block; vertical-align: middle;}
呈现的页面
自定义音频页面
html和css上面没什么太多可说的。进度条那里主要运用的就是position定位，我以为灰色的进度和蓝色的进度分别用了两张图片，控制蓝色图片的宽度即可。然而我在查看样式的时候只发现了一张图片，原来灰色的进度图片中由灰色的线条组成，每一个组成的竖条都是透明的，因此能透过它下面的背景，设置进度时需要控制下面背景div的宽度。
js（重点来了）
一、首先要获取元素
var audio = $('#audioTag').get(0);
为什么要加0？因为js操作获得的是audio对象，jquery获得的是jquery对象，[0]对象才是对应的节点对象，所以不能直接用jquery对象操作。
二、控制按钮暂停和播放
pause/play控制按钮
$('#playPause').click(function(){
//改变暂停/播放icon
if(audio.paused){
audio.play();
$('.icon-btn').removeClass('icon-play').addClass('icon-pause')
} else{
audio.pause();
$('.icon-btn').removeClass('icon-pause').addClass('icon-play')
}
})
paused为音频的暂停事件，play为音频的播放事件
三、获取音频的总时长
音频总时长
$('#audioTag').on("loadedmetadata",function () {
//alert(audio.duration)
$('#audioTime').text(transTime(this.duration));
});
！注意：此处的$('#audioTag')加载loadedmetadata事件不需要get(0);
loadedmetadata事件为音频/视频文件加载完数据后触发
duration 获取音频的时长，单位为s
transTime为封装好的一个函数，目的是将秒转换为几分几秒的格式
//转换音频时长显示
function transTime(time) {
var duration = parseInt(time);
var minute = parseInt(duration/60);
var sec = duration%60+'';
var isM0 = ':';
if(minute == 0){
minute = '00';
}else if(minute < 10 ){
minute = '0'+minute;
}
if(sec.length == 1){
sec = '0'+sec;
}
return minute+isM0+sec
}
parseInt(duration/60) 是将秒转换为整分
duration%60 是取余，也就是整分后剩余的秒
minute+isM0+sec 就是分:秒（02:14）的格式
四、监听音频播放时间并更新进度条
进度条和播放时间
audio.addEventListener('timeupdate',updateProgress,false);
timeupdate 事件是在播放位置改变时触发
updateProgress为封装好的一个函数，里面处理了进度条的位置和当前播放时间
//更新进度条
function updateProgress() {
var audio =document.getElementsByTagName('audio')[0]; //js获取的方式
var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0);
$('.pgs-play').css('width', value * 0.907 + '%');
$('.played-time').html(transTime(audio.currentTime));
}
value是由当前时间/总长 再乘以一个100变成百分数
0.907来源：因为进度条的长度和音频的背景图片不相同，才有的这么一个比例（进度条div的宽度除以背景img的宽度）。如果他们俩的长度一样，就直接value就可以。
currentTime 获得当前播放时间，一般和timeupdate事件联合使用
五、点击进度条跳到指定播出位置
var pgsWidth = $('.pgs img').width()*0.907; //此0.907同上一个0.907
$('.pgs img').click(function (e) {
var rate = (e.offsetX - ($(this).width()-pgsWidth)/2)/pgsWidth;
audio.currentTime = audio.duration * rate;
updateProgress();
});
rate 原理待定
六、播放完成
audio.addEventListener('ended',audioEnded,false);
ended 为监听播放完成事件
audioEnded为封装好的一个函数，里面处理了置音频的播放时间等为初始值
//播放完成
function audioEnded() {
var audio =document.getElementsByTagName('audio')[0];
audio.currentTime=0;
audio.pause();
$('.play-pause>span').removeClass('icon-pause').addClass('icon-play');
}
七、至此，js部分全代码如下：
$(function(){
var audio = $('#audioTag').get(0);
//播放暂停控制
$('#playPause').click(function(){
//监听音频播放时间并更新进度条
audio.addEventListener('timeupdate',updateProgress,false);
//监听播放完成事件
audio.addEventListener('ended',audioEnded,false);
//改变暂停/播放icon
if(audio.paused){
audio.play();
$('.icon-btn').removeClass('icon-play').addClass('icon-pause')
} else{
audio.pause();
$('.icon-btn').removeClass('icon-pause').addClass('icon-play')
}
})
//读取视频长度,设置页面时长显示-loadedmetadata:指定视频/音频（audio/video）的元数据加载后触发
//audio.duration 获取音频的时长，单位为秒
$('#audioTag').on("loadedmetadata",function () {
//alert(audio.duration)
$('#audioTime').text(transTime(this.duration));
});
var pgsWidth = $('.pgs img').width()*0.907; //0.907是 进度条这个div和整个进度条图片宽度的比例
//点击进度条跳到指定点播放
$('.pgs img').click(function (e) {
var rate = (e.offsetX - ($(this).width()-pgsWidth)/2)/pgsWidth;
audio.currentTime = audio.duration * rate;
updateProgress();
});
})
//转换音频时长显示
function transTime(time) {
var duration = parseInt(time);
var minute = parseInt(duration/60);
var sec = duration%60+'';
var isM0 = ':';
if(minute == 0){
minute = '00';
}else if(minute < 10 ){
minute = '0'+minute;
}
if(sec.length == 1){
sec = '0'+sec;
}
return minute+isM0+sec
}
//更新进度条
function updateProgress() {
var audio =document.getElementsByTagName('audio')[0];
var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0);
$('.pgs-play').css('width', value * 0.907 + '%');
$('.played-time').html(transTime(audio.currentTime));
}
//播放完成
function audioEnded() {
var audio =document.getElementsByTagName('audio')[0];
audio.currentTime=0;
audio.pause();
$('.play-pause>span').removeClass('icon-pause').addClass('icon-play');
}
End
本文介绍到此结束，其实还有好多别的控制，比如音量大小，快退快进等。原理明白后，一切都好说。有些时候就是这样，感觉是个庞然大物，其实了解之后并没有想象的复杂。
网友评论