音頻(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

本文介紹到此結束,其實還有好多別的控制,比如音量大小,快退快進等。原理明白后,一切都好說。有些時候就是這樣,感覺是個龐然大物,其實了解之后并沒有想象的復雜。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容