HTML audio设置.currentTime而实际播放位置不准确

最新推荐文章于 2024-05-04 16:23:47 发布
最新推荐文章于 2024-05-04 16:23:47 发布
阅读量284 收藏
点赞数 1
文章标签： 前端 html audio currentTime
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m_n_n/article/details/135074833
版权

可能是因为 .mp3 文件为 VBR 编码，使用 Au 等工具将文件转为 CBR 编码即可，或其他文件格式。
Au导出选项

Mnnk
关注
＜audio＞标签 “timeupdate“属性调用卡顿的问题记录
Codger_Jy的博客
03-24 1370
问题背景及描述 在用vue写网页播放器的时候用了隐藏<audio>+element-ui组件的组合方式，过程中需要实现播放时间的同步。 发现通过timeupdate事件处理相关逻辑会导致音频卡顿。 问题解决尝试 节流（不是问题根源） 通过节流来解决问题，以1s为长度 // 节流方法 timer(callback, time) { let clock = null; return function () { if (!clock) { clock = setTimeout(() =&
前端提高篇(六十五)：HTML5练习1：个性音乐播放器（二）
2401_84434880的博客
05-01 666
2.面板左边的暂停播放效果else {图标名称以iconfont给的html里标注的为准3.面板中间的进度条随时间前移在计时器中需要使用总时长来计算当前进度条的width，不必要每次计时器工作都要获取一次duration，所以在oncanplay时，获取一次，并赋值给全局变量即可刷新的时候pro-activate宽度为0，radio在进度条的最左边，
html5 audio设置currentTime
huxiaoxiao_zero的专栏
04-23 1万+
html5 audio.currentTime值改变需要考虑的情况
html audio标签无效,HTML5的audio标签设置currentTime无效解决方案
weixin_35720618的博客
06-03 1059
上帝视角看民宿产业-马化腾00:0001:06在firefox、IE、中都有效，但是在chrome中无效，原因：这是一个与服务器有关的chrome报错解决方案：1、将的src引用的视频最好是在线网站视频完整引用地址 //(亲自测试有效)，查找在线音乐地址的方法：输入music.163.com打开，搜索音乐，如《偏爱》，右键查看元素，Network-->Media-->点击Name下...
audio组件的currttime值设置失败
最新发布
2301_78459015的博客
05-04 475
在组件的内部加上这条，大概意思就是说在浏览器运行这个页面之前，会先预加载着几个组件，这样浏览器就知晓了这几个组件的存在，也就解决了currenttime属性不存在的问题（纯属个人理解，如有不恰当的地方，求指正）。就是在当我连续敲击的时候，组件并不是连续的播放，原因可能是因为，在我敲击播放第一次之后的再次敲击时，此时的audio组件正处在播放状态中，所以没有达到连续播放的效果。在调用currenttime之前先执行了这样一行代码，最终问题被稀里糊涂的解决了，成功的实现了连续的击鼓。
【问题记录】audio标签变更currentTime属性值无效，currentTime变为0
taojin12的博客
08-16 2239
项目中使用console 输出的该值，如果在此处只是调用的话并不会生效。项目中对这俩值又没有太多需求，暂时只能这样做了，有好的解决方法的，欢迎大佬指出。在使用audio播放音频中，需要拖动进度条，来使音频可以快进，单纯的使用currentTimes改变属性值，是不会生效的。audio.currentTimes = 100 //这样改变不会生效。该属性可以寻址到音频的中的任何位置，即使该音频没有完成缓冲。可以使用audio中的seekable 属性，来设置。音频中可寻址（移动播放位置）的时间范围。....
关于audio标签设置currentTime属性无效，currentTime变为0
chenjixue的博客
10-17 4970
1.进度条的控制 主要分为监听鼠标的mousedown和mousemove事件 点击跳转进度条 主要是mousedown.e.currentTarget.getBoundingClientRect（应为事件绑定在父元素上，事件的触发为子元素冒泡触发，不能用target）获取进度条离页面左边的距离，e.clientX获取实际点击的坐标，两者相减得到真实的点击在进度条里面的坐标， 拖拽的的原理同上，只是说拖拽是个不断触发的过程而已 2.音频文件的显示数字的设置 主要是监听audio标签的loadedd
html5 audio demo【修复拖动进度条bug】
08-08
这使得用户可以自由控制音频播放进度，而不会出现播放异常或者进度条显示不准确的情况。在实际开发中，还可以添加更多功能，如音量控制、播放/暂停按钮的视觉反馈等，以提供更完整的音频播放体验。
css3-webkit-transform+JS模拟播放进度
11-02
我们可以通过`audio.currentTime`获取当前播放的时间，`audio.duration`获取总时长，然后根据比例更新进度条的状态。 3. 模拟播放进度： 在HTML中，我们可以创建一个代表进度条的元素，如`<div>`，并设置初始宽度...
HTML+CSS----------HTML5+CSS3
qq_31913969的博客
09-04 1019
html回忆录 1、网页的组成：图片、文字、超链接、视频、音频等 2、网页中web标准三层组成:结构(html)、表现(css)、行为(JS). 3、Chrome浏览器的内核：Blink；苹果内核：webkit; 4、HTML是超文本标记语言，是描述网页的一种语言，是一种标记，不是一种语言，是一套标记标签。 5、超文本指的是超越文本的限制，超级文本链接 6、内核渲染HTML和CSS 7、 8、 ...
audio.currentTime 和video.currentTime 失效的问题
花神的博客
07-19 1万+
最近在做移动端的项目时遇到，audio和video中的媒体文件的currentTime失效进而无法快进。 复现方法： 使用chrome在本地局域网如： http://192.168.1.104:8020/index.html打开 或者 在公司的服务器上打开页面时会出现这种情况但直接双击index.html打开和localhost下面打开是可以快进的，使用火狐和IE任何时候都是表现正常的这种情况很有
移动端video标签currentTime属性设置无效的解决方案
weixin_41614732的博客
04-17 7304
开发的时候遇到一个需求，需要视频在指定某一秒开始播放。 比如需要从第5秒开始播放视频，然后设置 var video = document.getElementsByTagName('video')[0]; video.currentTime = 5; video.play(); 然后发现pc端正常播放，移动端在浏览器则是重头开始播放，网上找了一些资料，使用了canplay 和loadedmeta...
HTML5中video元素详解
liu_chenglong的博客
06-25 4664
属性说明controls显示标准的 HTML5 视频/音频播放器控制条、控制按钮。autoplay让文件自动播放。loop让文件循环播放。preload属性是用来缓存大体积文件的。它有三个可选值：“none” 不缓存、“auto” 缓存、“metadata” 只缓存文件元信息poster视频封面这个属性在 ios 10中设置有用，其他的目前还不起作用，让视频在小窗内播放，也就是不是全屏播放IOS微信浏览器支持小窗内播放启用H5播放器，是wechat安卓版特性。
html5 video 定位播放,HTML5 video标签的播放控制
weixin_36238982的博客
06-10 2552
这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长、播放、暂停、获取影片的播放时间和设置播放点、音量的获取和设置等内容,需要的朋友可以参考下上一篇介绍了html5标签video(播放器)初始化需要做的一些工作，如何简单快速使用html5的播放器，本文将重点介绍如何用JS来操作video标签，也就是如何对video做一些简单基本的操作，包括了播放器的播放、暂停，音量的读...
浅谈html5 video 移动端填坑记
cuoban的学习空间
04-09 5282
本文介绍了html5 video 移动端填坑记，分享给大家，具体如下：?12345678910111213141516171819202122232425262728&lt;video id="video"  style="object-fit:fill"  autoplay  webkit-playsinline   playsinline   x5-video-player-type="h5"...
HTML5中Audio API在音乐应用中的使用限制与解决方案
AdolphMacDonald的博客
04-18 1056
通过采取适当的解决方案，如解决浏览器兼容性问题、处理音频格式支持问题、增强播放控制功能以及解决跨域问题等，开发者可以克服这些限制，为用户提供更好的音频体验。虽然Audio API提供了一些基本的播放控制功能，如播放、暂停和停止等，但对于更复杂的播放控制需求，如音量调节、播放速度调整等，API的支持并不完善。例如，可以使用滑块控件调节音量，或使用按钮控件调整播放速度等。（2）提示用户升级浏览器：对于不支持Audio API的浏览器，开发者可以在网页上显示提示信息，引导用户升级浏览器以获得更好的音频体验。
修改video播放按钮的位置
fengyiyangdeli的博客
04-06 902
【代码】修改video播放按钮的位置。
html5中audio的详细使用
热门推荐
一灯笔记
03-23 6万+
html5的audio功能上已经非常强大，回放，跳转，缓冲等以前只能用flash才能实现的功能，html5的audio都能轻松搞定 最近的一个项目使用到了这个功能，把我使用的情况写下来，供大家参考 audio 相关的 api 备用（当浏览器不支持audio时显示的内容） 控制函数功能说明 load()   加载音频、视频软件，通常不必调用，除非是动态生成的元素，用
audio标签设置currentTime属性无效
06-07
如果你设置`audio`标签的`currentTime`属性时无效，可能是因为该属性只能在`audio`标签的`loadedmetadata`事件触发之后才能生效。所以，你需要确保在设置`currentTime`属性之前，`audio`标签已经加载了音频数据。你...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值