h5 audio播放问题,audio获取缓存进度条
<!--全局 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)
// 计算百分比 展示进度
}
h5 audio播放问题,audio获取缓存进度条的更多相关文章
- iOS适配UIViewView/WKWebView,H5生成长图,仿微信进度条
前段时间撸代码猥琐发育的时候,设计师老王给了张截图某宝APP上一个生成长图分享的功能,正好公司有这个需求,于是在立马开始操练起来!在万能的度娘上搜集整理资料后发现很多文章介绍的方案对WKWebView ...
- 阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 文档地址:https://player.alicdn.com/aliplayer/index. ...
- html5 vedio 播放器,禁掉进度条快进快退事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 模仿迅L看看<音频播放器> 实现点击进度条,跳转播放
<Style x:Key="btnFallback" TargetType="{x:Type Button}"> <Setter Proper ...
- 手机 简易浏览器 WebView的基本使用 返回 缓存 进度条
public class MainActivity extends AppCompatActivity { private WebView webView; private String url = ...
- H5音乐播放器
前段时间无聊用JavaScript基于H5的audio写一个音乐播放器.误喷,技术有限,文笔不好之处希望各位大神海涵. 1.HTML代码: <div id="music" c ...
- 自制 h5 音乐播放器 可搜索
闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...
- 自动适配H5容器(UIViewView/WKWebView),生成长图,防微信进度条
前段时间撸代码猥琐发育的时候,设计师老王给了张截图某宝APP上一个生成长图分享的功能,正好公司有这个需求,于是在立马开始操练起来!在万能的度娘上搜集整理资料后发现很多文章介绍的方案对WKWebView ...
- PureBasic—数控编辑框与调节块和进度条
三个有关上下限问题的控件,它们也是主要控件的组成部分,分别为:SpinGadget() 数控编辑框TrackBarGadget() 调节块控件ProgressBarGadget() ...
随机推荐
- 云计算Openstack介绍(1)
一.云计算的前世今生 所有的新事物都不是突然冒出来的,都有前世和今生.云计算也是IT技术不断发展的产物. 要理解云计算,需要对IT系统架构的发展过程有所认识. 请看下 IT系统架构的发展到目前为止大致 ...
- Kinect数据
原文链接 Kinect V1 和 V2 比较 Kinect V1 和 V2 的外观比较 Kinect V1 和 V2 的参数比较 Kinect V1 和 V2 随距离增加的误差分布 Kinect V1 ...
- spring5源码分析系列(一)——spring5框架模块
spring总共大约20个模块,这些模块被整合在核心容器(Core Container).AOP和设备支持.数据访问及集成.Web.报文发送.Test 6个模块集合. 组成Spring框架的每个模块集 ...
- ioctl接口内容操作
int ioctl( int fd, int request, .../* void *arg */ ) 详解 第三个参数总是一个指针,但指针的类型依赖于request 参数.我们可以把和网络相关的请 ...
- PTA(Basic Level)1023.组个最小数
给定数字 0-9 各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1,三个 5,一个 8,我们得到的最小的数就 ...
- ABC136E Max GCD
Thinking about different ways of thinking. --- LzyRapx 题目 思路比较容易想到. Observations: 每次操作过后和不变. 枚举和的因子 ...
- selenium Grid2环境搭建和基本使用
Selenium Grid简介 利用Selenium Grid可以使主节点(hub)的测试用例在不同主机即分支点(node)运行.可以使一份测试用例在不同环境下(操作系统.浏览器)执行自动化测试.Se ...
- spring请求多方式
<!-- 使表单可以使用GET,.POST. HEAD.OPTIONS.PUT.DELETE.TRACE方式提交--> <filter> <filter-name> ...
- n=C(2,n)+k(构造)( Print a 1337-string)Educational Codeforces Round 70 (Rated for Div. 2)
题目链接:https://codeforc.es/contest/1202/problem/D 题意: 给你一个数 n ( <=1e9 ),让你构造137713713.....(只含有1,3,7 ...
- python-redis缓存-pool
#连接池 import redis pool=redis.ConnectionPool(host='192.168.71.140', port=6379) r = redis.Redis(connec ...