<!--全局 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. python-Web-django-短信登陆

    until: import json, urllib from urllib.parse import urlencode # 发送短信 def request2(mobile,num, m=&quo ...

  2. 【POJ - 3126】Prime Path(bfs)

    Prime Path 原文是English 这里直接上中文了 Descriptions: 给你两个四位的素数a,b.a可以改变某一位上的数字变成c,但只有当c也是四位的素数时才能进行这种改变.请你计算 ...

  3. Fiddler-打断点(bpu)

    一.断点 1.为什么要打断点? 比如一个购买的金额输入框,输入框前端做了限制大于100,那么我们测试的时候,需要测试小于100的情况下.很显然前端只能输入大于100的.这时我们可以先抓到接口,修改请求 ...

  4. Python input/output boilerplate for competitive programming

    The following code is my submission for Codeforces 1244C The Football Season. import io import sys i ...

  5. c++练习之模板类的练习

    编写一维数组模板.可以无限扩展,任意数据类型,可以进行插入,删除,查找,排序等操作 #include<iostream> using std::cout; using std::cin; ...

  6. 经典网络流题目模板(P3376 + P2756 + P3381 : 最大流 + 二分图匹配 + 最小费用最大流)

    题目来源 P3376 [模板]网络最大流 P2756 飞行员配对方案问题 P3381 [模板]最小费用最大流 最大流 最大流问题是网络流的经典类型之一,用处广泛,个人认为网络流问题最具特点的操作就是建 ...

  7. 最长上升子序列(Longest increasing subsequence)

    问题描述        对于一串数A={a1a2a3…an},它的子序列为S={s1s2s3…sn},满足{s1<s2<s3<…<sm}.求A的最长子序列的长度. 动态规划法 ...

  8. redis 学习(7) -- 有序集合

    redis 学习(7) -- 有序集合 zset 结构 有序集合:有序.不能包含重复元素 每个节点包含:score和value两个属性,根据score进行排序 如图: zset 重要 API 含义 命 ...

  9. (转)MQTT 入门介绍

    原文链接:https://blog.csdn.net/qq_2887... MQTT 入门介绍 一.简述 MQTT(Message Queuing Telemetry Transport,消息队列遥测 ...

  10. Django框架——基础之模型系统(ORM的介绍和字段及字段参数)

    1.ORM简介 1.1 ORM的概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM ...