audio标签的样式修改

由于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;
}

　　

 

posted @ 2020-10-05 17:57  花开荼蘼Ⅴ彼岸未归  阅读(1987)  评论(0)  编辑  收藏  举报