音频（audio）自定义样式以及控制操作面板

简介

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

本文介绍到此结束，其实还有好多别的控制，比如音量大小，快退快进等。原理明白后，一切都好说。有些时候就是这样，感觉是个庞然大物，其实了解之后并没有想象的复杂。