audio自定义样式，控制操作面板的暂停，播放，获取音频的时长，以及根据时长进行进度条展示

最新推荐文章于 2024-03-09 16:06:57 发布

coodingcc

最新推荐文章于 2024-03-09 16:06:57 发布

阅读量5.4k

点赞数 1

分类专栏：前端文章标签： jquery audio 自定义

本文链接：https://blog.csdn.net/cristina_song/article/details/83031877

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>audio实例</title>
    <script src="./js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <div class="btn-audio"><audio id="mp3Btn"><source src="./music1.mp3" type="audio/mpeg" /></audio></div>
    <div class="progress">
        <!--进度条-->
        <div class="loader-container"></div>

        <div class="controls">
            <span class="played-time">00:00</span>
            <span class="audio-time" id="audioTime">0</span>
        </div>

    </div>
</body>
</html>
<script type="text/javascript">
    $(function(){
        //播放完毕
        $('#mp3Btn').on('ended', function() {
            console.log("音频已播放完成");
            $('.loader-container').css('width','100%');
            $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
        })
        //播放器控制
        var audio = document.getElementById('mp3Btn');
        audio.volume = .100;
        $('.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(); //暂停
            }
        });
        //获取时长
        //loadedmetadata事件为音频/视频文件加载完数据后触发
        // duration 获取音频的时长，单位为s
        // transTime为封装好的一个函数，目的是将秒转换为几分几秒的格式
        $('#mp3Btn').on("loadedmetadata",function () {
               // alert(audio.duration)
                $('#audioTime').text(transTime(this.duration));
        });
        //监听音频播放时间并更新进度条
        audio.addEventListener('timeupdate',updateProgress,false);
    })
    //转换音频时长分/秒显示
    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]; //js获取的方式
        var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100);//当前时间/总长 再乘以一个100变成百分数
        $('.loader-container').css('width', value * 0.907 + '%');//0.907 ：进度条div的宽度除以背景img的宽度，如果他们俩的长度一样，就直接value就可以。
        $('.played-time').html(transTime(audio.currentTime));
    }
</script>
<style type="text/css">
html,body{
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background:#2b2938;
}
.btn-audio{
    margin: 90px auto;
    width: 186px;
    height: 186px;
    background:url(images/voice_stop.png) no-repeat center bottom;
    background-size:cover;
}
.loader-container {
    height: 100%;
    /*进度条长度*/
    width: 0;
    background: -webkit-linear-gradient(left,#f8dc4b,#d95a3d);
    background: -moz-linear-gradient(left,#f8dc4b,#d95a3d);
    background: -o-linear-gradient(left,#f8dc4b,#d95a3d);
    background: -ms-linear-gradient(left,#f8dc4b,#d95a3d);
    background: linear-gradient(left,#f8dc4b,#d95a3d);
    border-radius:7px;
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
    animation: loader 1s linear;
}
.progress{
    width: 70%;
    height: 7px;
    border-radius:7px;
    margin-left: 15%;
    margin-top: 30%;
    background: -webkit-linear-gradient(left,#e4e3e4,#e4e5e4);
    background: -moz-linear-gradient(left,#e4e3e4,#e4e5e4);
    background: -o-linear-gradient(left,#e4e3e4,#e4e5e4);
    background: -ms-linear-gradient(left,#e4e3e4,#e4e5e4);
    background: linear-gradient(left,#e4e3e4,#e4e5e4);
}

.controls span{color: #b3b5b7; font-size: 12px; display: inline-block; width: 34px;}

</style>

coodingcc

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
audio自定义样式，控制操作面板的暂停，播放，获取音频的时长，以及根据时长进行进度条展示

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;audio实例&lt;/title&gt; &lt;script src="./js/jquery-1.9.1.min.js"&gt;&lt;/sc
复制链接

扫一扫