h5的audio自定义样式（转）

最新推荐文章于 2024-05-31 22:11:41 发布

提莫大大魔王

最新推荐文章于 2024-05-31 22:11:41 发布

阅读量3.2k

点赞数 1

分类专栏： css笔记 html5 文章标签： audio html5

html5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css笔记

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>audio</title> 
    <style>
    /* 进度条 */
    .range {
        width: 5.875rem;
        height: 0.15rem;
        background: #2386e4;
        border-radius: 0.25rem;
        -webkit-appearance: none !important;
        position: absolute;
        top: 3.55rem;
        left: 6rem; 
    }
    /* 进度滑块 */
    .range::-webkit-slider-thumb {
        width: 0.5rem;
        height: 0.5rem;
        background: #fff;
        border: 1px solid #f18900;
        cursor: pointer;
        border-radius: 0.25rem;
        -webkit-appearance: none !important;
    }
    </style>

</head>
<body>
    <audio src='test.mp3' id='ao'></audio>
    <span class='cur'></span><input type="range" min=0 max=100 class='range' value=0><span class='max'></span>
    <button class='play'>play</button>
    <button class='pause'>pause</button>

   <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    </script>
    <script>
    //将秒数转为00:00格式
    function timeToStr(time) {
        var m = 0,
        s = 0,
        _m = '00',
        _s = '00';
        time = Math.floor(time % 3600);
        m = Math.floor(time / 60);
        s = Math.floor(time % 60);
        _s = s < 10 ? '0' + s : s + '';
        _m = m < 10 ? '0' + m : m + '';
        return _m + ":" + _s;
    }
    //触发播放事件
    var audio=document.getElementById('ao');

    $('.play').on('click',function(){
        var duration=audio.duration;
        $(".range").attr({'max':duration});
        $('.max').html(timeToStr(duration));
        audio.play();
        function timer(){
          var t=parseInt(Math.round(audio.currentTime));
          $(".range").val(t);
          $('.cur').text(timeToStr(t));
          t=parseInt(audio.currentTime);
          if(t<duration){
            setTimeout(timer, 1000);
          }else{
            clearTimeout(timer);
          }
        }
        timer();
    });
    $('.pause').on('click', function(){
        audio.pause();
    })
    //监听滑块，可以拖动
    $(".range").on('change',function(){
        audio.currentTime=this.value;
        console.log(this.value)
        $(".range").val(this.value);
    });
    </script>
    </body>
</html>

提莫大大魔王

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
h5的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;style&gt; /* 进度条 */ .range { width: 5.875rem;
复制链接

扫一扫

专栏目录