<!--全局 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. Ubuntu18.04两步纯小白傻瓜无脑式安装Caffe

    前言 Ubuntu16安装caffe过于繁琐,然而Ubuntu18安装起来却仅仅两步而已 附上官方安装教程:http://caffe.berkeleyvision.org/install_apt.ht ...

  2. 前端数据Mock

    参考链接:https://www.clloz.com/programming/front-end/js/2019/05/10/data-mock/?utm_medium=hao.caibaojian. ...

  3. subprocess.call(cmd, shell=True)

    1.使用方法 subprocess.call() 执行由参数提供的命令. 我们可以用数组作为参数运行命令,也可以用字符串作为参数运行命令(通过设置参数shell=True) 注意,参数shell默认为 ...

  4. Oracle中ORA-01113,ORA-01110的简单解决

    分析和解决问题: 1.重起数据库: C:\Documents and Settings\Jacken>sqlplus /nologSQL> conn sys/123456 as sysdb ...

  5. [转帖]超能课堂:Intel平台芯片组变迁史

    https://www.expreview.com/69419.html 现在我们在购买电脑时一个最重要的硬件就是主板了.作为承载CPU等主要硬件的平台,其最重要的功能就是连接外围设备,扩展计算机.但 ...

  6. [转载]C++之using namespace std 详解与命名空间的使用

    来源:https://blog.csdn.net/Bruce_0712/article/details/72824668 所谓namespace,是指标识符的各种可见范围.C++标准程序库中的所有标识 ...

  7. springboot(十七)-使用Docker部署springboot项目

    Docker 技术发展为微服务落地提供了更加便利的环境,使用 Docker 部署 Spring Boot 其实非常简单,这篇文章我们就来简单学习下. 首先构建一个简单的 Spring Boot 项目, ...

  8. typeof,instanceof的区别,扩展知识:显示原型(prototype)与隐式类型(__protot__)

    3.typeof 和instanceof区别 1.typeof 主要用于判断对象类型 console.log(typeof null) //object console.log(typeof unde ...

  9. 打印canvas

    这里我是新开窗口打印,会存在一个问题:就是不关闭打印窗口回到父页面,父页面不响应的情况 所以,我另外写了一个监听离开新开窗口,弹窗提示的函数,提示用户关闭打印窗口,方可进行后续操作 额,发现问题更大了 ...

  10. Freemarker生成word文档的时的一些&,>,<报错

    替换模板ftl中的内容的时候,一些特殊的字符需要转移,例如: &,<,> value为字符串 value.replace("&","& ...