<!--全局 audio -->
<audio
id="audio"
@playing="audioReady"
@timeupdate="audioUpdateTime"
@pause="audioPaused"
@ended="audioEnd"
@error="audioError"/> // 监听微信端页面加载 触发音频load
document.addEventListener('DOMContentLoaded', () => {
const audio = document.getElementById('audio')
audio.load()
document.addEventListener('WeixinJSBridgeReady', () => {
audio.load()
}, false)
})
audioUpdateTime(e) {
// 更新时间和进度条 (默认一秒会执行多次 需要处理一秒只执行一次更新)
let time = 0
if (parseInt(e.target.currentTime) !== Number(time)) {
time = parseInt(e.target.currentTime)
const audio = document.getElementById('audio')
const timeRanges = audio.buffered
// 获取已缓存的时间 timeRanges.end(timeRanges.length - 1)
     // 计算百分比 展示进度
       parseInt(timeRanges.end(timeRanges.length - 1) * 100 / audio.duration * 100) / 100)
    }

h5 audio播放问题,audio获取缓存进度条的更多相关文章

  1. iOS适配UIViewView/WKWebView,H5生成长图,仿微信进度条

    前段时间撸代码猥琐发育的时候,设计师老王给了张截图某宝APP上一个生成长图分享的功能,正好公司有这个需求,于是在立马开始操练起来!在万能的度娘上搜集整理资料后发现很多文章介绍的方案对WKWebView ...

  2. 阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 文档地址:https://player.alicdn.com/aliplayer/index. ...

  3. html5 vedio 播放器,禁掉进度条快进快退事件

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

  4. 模仿迅L看看<音频播放器> 实现点击进度条,跳转播放

    <Style x:Key="btnFallback" TargetType="{x:Type Button}"> <Setter Proper ...

  5. 手机 简易浏览器 WebView的基本使用 返回 缓存 进度条

    public class MainActivity extends AppCompatActivity { private WebView webView; private String url = ...

  6. H5音乐播放器

    前段时间无聊用JavaScript基于H5的audio写一个音乐播放器.误喷,技术有限,文笔不好之处希望各位大神海涵. 1.HTML代码: <div id="music" c ...

  7. 自制 h5 音乐播放器 可搜索

    闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...

  8. 自动适配H5容器(UIViewView/WKWebView),生成长图,防微信进度条

    前段时间撸代码猥琐发育的时候,设计师老王给了张截图某宝APP上一个生成长图分享的功能,正好公司有这个需求,于是在立马开始操练起来!在万能的度娘上搜集整理资料后发现很多文章介绍的方案对WKWebView ...

  9. PureBasic—数控编辑框与调节块和进度条

    三个有关上下限问题的控件,它们也是主要控件的组成部分,分别为:SpinGadget()        数控编辑框TrackBarGadget()    调节块控件ProgressBarGadget() ...

随机推荐

  1. CentOS7使用阿里云源安装Docker

    安装步骤 1.删除已安装的Docker # Uninstall installed docker sudo yum remove docker \ docker-client \ docker-cli ...

  2. 【Python开发】Python中的class继承

    继承是面向对象的重要特征之一,继承是两个类或者多个类之间的父子关系,子进程继承了父进程的所有公有实例变量和方法.继承实现了代码的重用.重用已经存在的数据和行为,减少代码的重新编写,python在类名后 ...

  3. linux中su和sudo区别

    su切换用户,切换成root用户,要输入root用户的密码 su - 用户名 sudo  涉及到 /etc/sudoers文件 ,内容如下: # User privilege specificatio ...

  4. Processor 介绍

    1.概述 Sink Group允许用户将多个Sink组合成一个实体. Flume Sink Processor 可以通过切换组内Sink用来实现负载均衡的效果,或在一个Sink故障时切换到另一个Sin ...

  5. java.io.IOException 断开的管道 解决方法 ClientAbortException: java.io.IOException: Broken pipe

    今天公司技术支持的童鞋报告一个客户的服务不工作了,紧急求助,于是远程登陆上服务器排查问题. 查看采集数据的tomcat日志,习惯性的先翻到日志的最后去查看有没有异常的打印,果然发现了好几种异常信息,但 ...

  6. C++多线程基础学习笔记(四)

    一.创建多个子线程 前面三章讲的例子都是只有一个子线程和主线程,然而实际中有多个子线程.那么下面介绍如何创建多个子线程. #include <iostream> #include < ...

  7. React 中的函数式思想

    函数式编程简要概念 函数式编程中一个核心概念之一就是纯函数,如果一个函数满足一下几个条件,就可以认为这个函数是纯函数了: 它是一个函数(废话): 当给定相同的输入(函数的参数)的时候,总是有相同的输出 ...

  8. js判断设备,跳转app应用、android市场或者AppStore

    js移动设备判断方法大全 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" > ...

  9. Codeforces 1194E. Count The Rectangles

    传送门 看到 $n<=5000$,直接暴力枚举左右两条竖线 然后考虑怎么计算高度在某个范围内,左端点小于等于某个值,右端点大于等于某个值的横线数量 直接用权值树状数组维护当前高度在某个区间内的横 ...

  10. java中jar包的使用

    1:在工程目录下新建一个文件lib  导入jar包在里面 2:在jar包上右键  ——>build path——>add to bulid path OK!