<!--全局 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. 建立EF访问数据库架构时,出现One or more validation errors were detected during model generation

    原因是因为我在写实体类的时候没有为实体类中的属性声明一个主键,即用[key]特性标注在属性上,这样DbContext才能为我们在数据库上找到对应的主键 using System.ComponentMo ...

  2. Linux 常用服务器命令

    1.查看端口号是否被占用 netstat -lnp|grep 端口 或 lsof -i :端口 2查看进程对应的端口号 netstat -nap | grep 进程号

  3. Spark中分布式使用HanLP(1.7.0)分词示例

    HanLP分词,如README中所说,如果没有特殊需求,可以通过maven配置,如果要添加自定义词典,需要下载“依赖jar包和用户字典". 分享某大神的示例经验: 是直接"java ...

  4. spring配置文件拆分策略及方法

    一.拆分策略 如果一个开发人员负责一个模块,我们采用公用配置(包括数据源.事务等)+每个系统模块一个单独配置文件(包括Dao.Service.Web控制器)的形式 如果是按照分层进行的分工,我们采用公 ...

  5. zookeeperAPI的常用方法

    zookeeper支持三种部署方式: 1 单机 2 集群 3 伪集群 删除节点 zkClient.delete(path);

  6. nginx+php设置大文件请求上传(502及504问题处理)

    502问题 php-fpm 修改项: request_terminate_timeout 位置: eg: /etc/php5/fpm2/pool.d/www.conf ; The timeout fo ...

  7. java实现spark常用算子之count

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  8. Eclipse安装Hadoop插件配置Hadoop开发环境

    一.编译Hadoop插件 首先需要编译Hadoop 插件:hadoop-eclipse-plugin-2.6.0.jar,然后才可以安装使用. 第三方的编译教程:https://github.com/ ...

  9. js 数据类型的判断

    1. typeof 运算符 typeof 可以判断基本数据类型: typeof 123; // "number" typeof 'abc'; // "string&quo ...

  10. 使用CSS设置背景图片,图片比较大,完全显示在一个DIV中

    做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...