h5 audio标签点击播放暂停并添加进度条显示

今天药忘吃喽~ 2023-05-31 02:50 1阅读 0赞

<div class="audio_con" onclick="playVid()" >
        <div class="audiobg"></div>
    </div>
    <audio  src="../js/1.mp3"  id="myaudio"></audio>

var myaudio = document.getElementById("myaudio");
        var settimer;        //设置定时器
        var duration = 0;    //音乐总时长
        var audiowidth = 0;    //进度条宽度
        myaudio.oncanplay = function () {      //audio加载完毕获取audio总时长
            duration = myaudio.duration;        
        };
        function playVid(){    
            if (myaudio.paused){    //如果是暂停状态，开始播放并每一秒中获新已播放时长
                myaudio.play();
                settimer = setInterval(function(){
                    var currentTime = myaudio.currentTime;
                    if( currentTime >= duration){    //已播放时长大于总时长
                        pauseVid();
                    }else{                           //换算百分比赋值给进度条宽度
                        audiowidth = currentTime/duration * 100;
                        $(".audiobg").css("width", audiowidth +'%')
                    }
                }, 1000);
            }else {
                pauseVid();
            }
        }
        function pauseVid(){       //进度条清零、音频暂停、音频时长清零、清除定时器
            $(".audiobg").css("width", 0 +'%')
            myaudio.pause();
            myaudio.currentTime = 0;
            clearInterval(settimer);
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 video标签播放视频不能拖动进度条问题

video标签播放视频不能拖动进度条解决方法：因为你的video的src不是直接使用视频文件的地址，而是通过后台接口返回文件流，后台返回流的时候没为respons

快来打我*/ 2023年07月10日 15:33/ 0 赞/ 33 阅读

相关 h5 audio标签点击播放暂停并添加进度条显示

<div class="audio_con" onclick="playVid()" > <div class="audiobg"></div>

今天药忘吃喽~/ 2023年05月31日 02:50/ 0 赞/ 2 阅读

相关使用H5中的video标签时，页面中间显示“暂停”图标；点击播放，图标消失；点击暂停，图标出现（play、pause、ended）

> 有时候我们在做项目的过程中会遇到这样的需求： > > 使用H5中的video标签播放一个视频，并在视频的中心位置放置一个暂停的图标，点击后视频播放，图标消失；再次点

超、凢脫俗/ 2023年01月23日 13:54/ 0 赞/ 763 阅读

相关 HTML5使用js jq控制<audio>的播放暂停

正所谓节后三天瘟！第一天上班脑子迷迷糊糊。一上来就写一端代码控制audio，凭借仅存的记忆，还不错！弄出来了！中间遇到了一点点小坑，特地拿出来晒晒，免得以后再吃亏！任务要求

野性酷女/ 2022年07月12日 01:21/ 0 赞/ 493 阅读

相关 h5 audio 背景音乐播放开关控制

现在的活动h5基本都会有bgm的需求，下面提供一个通用的做法。 ![这里写图片描述][70] ![这里写图片描述][70 1] 上面是开关的按钮，页面刚加载进来的时

迈不过友情╰/ 2022年05月31日 07:50/ 0 赞/ 726 阅读

相关 JavaScript多个h5播放器video，点击一个播放其他暂停

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

比眉伴天荒/ 2022年05月10日 02:58/ 0 赞/ 256 阅读

相关 H5视频，播放，暂停，重新播放

H5视频，播放，暂停，重新播放 ```<!DOCTYPE html> <html lang="en"> <head> <meta

落日映苍穹つ/ 2022年05月08日 00:10/ 0 赞/ 428 阅读

相关 h5圆形百分比进度条

但不支持IE浏览器：[http://www.htmleaf.com/html5/html5-canvas/201705154511.html][http_www.htmleaf

古城微笑少年丶/ 2022年04月23日 12:26/ 0 赞/ 320 阅读

相关 js之 H5 的 video 标签暂停播放视频

一、问题基于 video 标签播放的视频，大致功能是，点击预览按钮，弹出弹框，可以在线观看视频；如果关闭弹框，视频还是在播放。二、要求关

蔚落/ 2021年08月04日 11:07/ 0 赞/ 691 阅读

相关实现音乐播放器（播放/暂停、可拉动进度条）

html文件： <div class="m-box"> <audio src="img/mo.mp3" id='aud'></audio>

喜欢ヅ旅行/ 2021年07月24日 16:51/ 0 赞/ 950 阅读