碼上快樂

相關內容    簡體    繁體

audio標簽的樣式修改

本文轉載自   查看原文   2020-10-05 17:57   821    H5C3

由於H5的流行，現在移動端大多數的需求都可以使用audio來播放音頻，但您可能只是需要很簡單的播放/停止效果，但不同的瀏覽器上的audio樣式卻不盡人意，那么要怎么改變這個樣式呢，其實它的原理比較簡單，就是把寫audio的時候不要用controls屬性，隱藏原生的audio， 然后用div之類標簽，定義css樣式美化起來用來顯示播放器的效果，最后用js捕獲audio事件，基本就是src路徑、pause暫停、load加載、play播放這些。下面是audio標簽的一些相關API：

控制函數功能說明

  • load()：加載音頻、視頻軟件，通常不必調用，除非是動態生成的元素，用來在播放前預加載
  • play()：加載並播放音頻、視頻文件，除非文件已經暫停在其他位置，否則默認重頭開始播放
  • pause()：暫停處於播放狀態的音頻、視頻文件

audio 可腳本控制的特性值

src：音頻文件路徑。
autoplay：設置音頻是否自動播放 （默認有此屬性為自動播放已經加載的的媒體文件），或查詢是否已設置為autoplay
autobuffer：設置是否在頁面加載時自動緩沖音頻，如果設置了autoplay，則忽略此特性
loop：設置音頻是否要循環播放。，或查詢是否已設置為loop
currentTime：以s為單位返回從開始播放到目前所花的時間，也可設置currentTime的值來跳轉到特定位置 controls：
顯示或者隱藏用戶控制界面（屬性供添加播放、暫停和音量控件。 ） volume：在0.0到1.0間設置音量值，或查詢當前音量值
muted：設置是否靜音

controls ： 是否顯示播放控件，不同的瀏覽器的控件外觀不相同
duration ： 影片總時長(s)
ended: 是否播放到最后結尾了
muted：是否靜音
volumn: 0~1 音量設置，默認是最大值，且是js對象的屬性，不能在標簽上直接寫
pasued : 當期那是否處於暫停狀態
poster: 指定視頻第一幀播放前的電影海報
preload 值視頻預加載的方案
    > 取值：metadata 元數據，只預加載視頻的寬度、時長、第一幀內容
    >      auto  自動預加載、時長、第一幀內容、並緩沖一定時長
    >      none:不預加載任何內容 

只讀屬性屬性說明

  1. duration：獲取媒體文件的播放時長，以s為單位，如果無法獲取，則為NaN
  2. paused：如果媒體文件被暫停，則返回true，否則返回false
  3. ended：如果媒體文件播放完畢，則返回true
  4. startTime：返回起始播放時間，一般是0.0，除非是緩沖過的媒體文件，並一部分內容已經不在緩沖區
  5. error：在發生了錯誤后返回的錯誤代碼
  6. currentSrc：以字符串形式返回正在播放或已加載的文件，對應於瀏覽器在source元素中選擇的文件

對於這些屬性，主流的瀏覽器都支持。可是別以為就沒有了兼容性，在音頻播放流中，有兩個陣營。firefox 和 opera 支持 ogg 音頻，safari 和 ie 支持 mp3。幸好Google的chrome都支持。

代碼如下：

<style>
         *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            -webkit-tap-highlight-color:transparent;
        }
        body{
            background:#2b2938;
        }
        .btn-audio{
            margin: 90px auto;
            width: 186px;
            height: 186px;
            background:url(images/voice_stop.png) no-repeat center bottom;
            background-size:cover;
        }
    </style>
</head>
<body>
     <div class="btn-audio"><audio id="mp3Btn"><source src="images/audio.mp3" type="audio/mpeg" /></audio></div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
    <script>
    $(function(){
        //播放完畢
        $('#mp3Btn').on('ended', function() {
            console.log("音頻已播放完成");
            $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
        })
        //播放器控制
        var audio = document.getElementById('mp3Btn');
        audio.volume = .3;
        $('.btn-audio').click(function() {
            event.stopPropagation();//防止冒泡
            if(audio.paused){ //如果當前是暫停狀態
                $('.btn-audio').css({'background':'url(images/voice_play.png) no-repeat center bottom','background-size':'cover'});
                audio.play(); //播放
                return;
            }else{//當前是播放狀態
                $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
                audio.pause(); //暫停
            }
        });
    })
    </script>
通過以上方法，audio的樣式修改的問題就解決啦，你可以換成你想要的顯示效果。

自定義播放器

HTML  
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定義播放器</title>
    <link rel="stylesheet" href="./css/zidingyi.css">
</head>

<body>
    <div class="box">
        <video src="http://edge.ivideo.sina.com.cn/35267794003.mp4?KID=sina,viask&Expires=1600876800&ssig=S8%2B5ZV4tJU&reqid="></video>
        <div class="menu">
            <!-- 播放器 -->
            <div class="play">播放</div>
            <!-- 時間 -->
            <div class="timer">0:0/0:0</div>
            <!-- 進度條 -->
            <div class="progressBar">
                <!-- 播放進度 -->
                <div></div>
                <!-- 播放的標記 -->
                <i></i>
            </div>
            <!-- 倍數 -->
            <div class="times">倍數</div>
            <div class="time-ul">
                <ul>
                    <li>2</li>
                    <li>x1.5</li>
                    <li>x1.25</li>
                    <li>正常</li>
                </ul>
            </div>
            <div class="vol add">音量加</div>
            <div class="vol event">音量減</div>
        </div>
    </div>
    <script src="./js/zidingyi.js"></script>
</body>

</html>

　JS

var oVideo = document.querySelector('video');
var oPlay = document.querySelector('.play');
var time = document.querySelector('.timer');
var oProgressbar = document.querySelector('.progressBar');
var oTimes = document.querySelector('.times');
var ul = document.querySelector('.time-ul');
var li = ul.getElementsByTagName('li');
var oAdd = document.querySelector('.add');
var oEvent = document.querySelector('.event');


// 點擊播放或者暫停
oPlay.onclick = function() {
    if (oVideo.paused) {
        oVideo.play();
        this.innerHTML = '暫停';
    } else {
        oVideo.pause();
        this.innerHTML = '播放';
    }
}

// 時間
setInterval(function() {
    // 總時長
    var total = oVideo.duration;
    var nowtime = oVideo.currentTime;
    // 時間顯示到頁面
    time.innerHTML = parseInt(nowtime / 60) + ":" + String(parseInt(nowtime % 60)).padStart(2, 0) + '/' + parseInt(total / 60) + ':' + String(parseInt(total % 60)).padStart(2, 0);

    // 當前進度條的寬度
    var width = nowtime / total * oProgressbar.clientWidth;
    oProgressbar.getElementsByTagName('div')[0].style.width = width + 'px';
    oProgressbar.getElementsByTagName('i')[0].style.width = width + 'px';

}, 1000)

// 進度條
oProgressbar.onmouseenter = function() {
    this.style.height = '14px';
    this.style.top = '-14px';
    this.getElementsByTagName('div')[0].style.height = '14px';
    this.getElementsByTagName('i')[0].style.height = '18px';
}

oProgressbar.onmouseleave = function() {
    this.style.height = '2px';
    this.style.top = '-2px';
    this.getElementsByTagName('div')[0].style.height = '2px';
    this.getElementsByTagName('i')[0].style.height = '6px';
}

// 點擊進度條，跳轉進度
oProgressbar.onclick = function(e) {
    var location = e.layerX;
    var width = this.clientWidth;
    // 計算出目標時間
    var targetTime = location / width * oVideo.duration;
    // 設置當前時間
    oVideo.currentSrc = targetTime;
}

// 倍數
oTimes.onclick = function() {
    ul.style.display = 'block';
}
ul.onmouseleave = function() {
    ul.style.display = 'none';
}

// 給每一個li注冊點擊事件
for (var i = 0; i < li.length; i++) {
    // 下標
    li[i].index = i;
    li[i].onclick = function() {
        switch (this.index) {
            case 0:
                // 兩倍
                oVideo.playbackRate = 2;
                oTimes.innerHTML = 'x2';
                break;
            case 1:
                // 1.5倍
                oVideo.playbackRate = 1.5;
                oTimes.innerHTML = 'x1.5';
                break;
            case 2:
                // 1.25倍
                oVideo.playbackRate = 1.25;
                oTimes.innerHTML = 'x1.25';
                break;
            default:
                // 正常
                oVideo.playbackRate = 1;
                oTimes.innerHTML = '倍數';
                break;
                break;
        }
    }

}
// 音量
oAdd.onclick = function() {
    oVideo.volume = oVideo.volume + 0.1 >= 0 ? 0 : oVideo.volume + 1
}
oEvent.onclick = function() {
    oVideo.volume = oVideo.volume - 0.1 <= 0 ? 0 : oVideo.volume - 1
}

　　CSS

* {
    margin: 0;
    padding: 0;
}

.box {
    width: 598px;
    height: 280px;
    border: 1px solid black;
    position: relative;
    margin: 100px auto;
}

video {
    position: absolute;
    width: 598px;
    height: 280px;
}

.menu {
    position: absolute;
    width: 100%;
    height: 50px;
    margin-top: 230px;
    background-color: rgb(0, 0, 0, .5);
}

.play {
    border: 1px solid #fff;
    width: 50px;
    height: 28px;
    border-radius: 8px;
    position: absolute;
    margin-top: 12px;
    margin-left: 20px;
    line-height: 26px;
    text-align: center;
    color: #fff;
}

.timer {
    width: 50px;
    height: 28px;
    border-radius: 8px;
    position: absolute;
    margin-top: 12px;
    margin-left: 120px;
    line-height: 26px;
    text-align: center;
    color: #fff;
}

.times {
    border: 1px solid #fff;
    width: 50px;
    height: 28px;
    border-radius: 8px;
    position: absolute;
    margin-top: 12px;
    margin-left: 400px;
    line-height: 26px;
    text-align: center;
    color: #fff;
}

.progressBar {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: gray;
    top: -2px;
    left: 0;
}

.progressBar div {
    position: absolute;
    height: 2px;
    background-color: #f40;
    width: 120px;
    left: 0;
    top: 0;
}

.progressBar i {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background-color: #fff;
    left: 120px;
    top: -2px;
}

.time-ul {
    position: absolute;
    width: 90px;
    height: 100px;
    top: -110px;
    left: 380px;
    background-color: rgb(0, 0, 0, .5);
    display: none;
}

.time-ul li {
    display: inline-block;
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: center;
}

.time-ul li:hover {
    color: #f40;
    font-weight: bold;
}

.vol {
    position: absolute;
    width: 50px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    color: #fff;
    top: 50%;
    margin-top: -15px;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid #fff;
}

.add {
    left: 470px;
}

.event {
    left: 530px;
}

　　

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 動態修改a標簽的css樣式 A標簽跳轉鏈接並修改樣式 element中的標簽tab樣式修改 css修改select標簽默認樣式 如何修改select標簽的默認下拉箭頭樣式？ 關於 HTML vscode 修改標簽欄樣式為換行全部展示 js DOM（一）注冊事件、修改標簽屬性和樣式 input 標簽為checkbox時修改 checkbox的樣式 html5中的video標簽和audio標簽
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM