文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS指定音频audio在某个时间点进行播放，获取当前音频audio的长度，音频时长格式转化

前言： 　　今天接到一个需求，需要获取某个.mp3音频文件的时间长度和指定音频audio在某个时间点进行播放（比如说这个视频有4分钟，我要让它默认从第2秒的时候开始播放），这里当然想到了H5中的audio...获取音频时长： function getAudioDuration(src) { let audio = document.createElement('audio') //生成一个...// 音频加载完成后的一系列操作 function duration() { var myVid = document.getElementById("videoDiv..."> $(function () { //js获取某个mp3音频文件的播放时长...duration(); console.log("转化为多少秒=》》", timeEvent("00:14:36")); }) // 音频加载完成后的一系列操作

11.5K21
您找到你想要的搜索结果了吗？
是的
没有找到

HTML５新特性

badInput：false， // 类型不匹配，如number中出现字符 typeMismatch：false， // 值缺失，如required验证失败 valueMissing：false...false，是否静音播放 ⑤. poster："''，在播放第一帧之前显示的海报 ⑥. preload：视频的预加载策略，可取值： A. auto：预加载视频的元数据以及缓冲一定时长 B. metadata...：仅预加载视频的元数据(尺寸、时长、第一帧内容)，没有视频缓冲 C. none：不预加载任何数据 以下为JS对象属性,不能用于标签 ①. currentTime：当前播放的时长 ②. duration：...，可取值 A. auto：预加载视频的元数据以及缓冲一定时长 B. metadata：仅预加载视频的元数据(尺寸、时长、第一帧内容)，没有视频缓冲 C. none：不预加载任何数据 以下为JS对象属性,...但是绘图往往需要按照一定顺序，如先绘背景，再绘上面的内容,所以必须等待所有图片全部加载完成，才能开始绘图. // 所有图片的总加载进度 var progress = 0; var

7.6K30

html5视频常用API接口「建议收藏」

属性，方便在JS中做判断，如下：大部分属性通过boolean值判断 API属性 事件说明 duration 返回媒体的播放总时长，单位秒 loop 是否循环播放 muted 是否静音 paused 是否暂停...canplay 当浏览器可以开始播放音频/视频时触发。 canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时触发。...durationchange 当音频/视频的时长已更改时触发。 emptied 当目前的播放列表为空时触发。 ended 当目前的播放列表已结束时触发。...error 当在音频/视频加载期间发生错误时触发。 loadeddata 当浏览器已加载音频/视频的当前帧时触发。 loadedmetadata 当浏览器已加载音频/视频的元数据时触发。...suspend 当浏览器刻意不获取媒体数据时触发。 timeupdate 当目前的播放位置已更改时触发。 volumechange 当音量已更改时触发。

3.9K20

在线视频协同：探究画面帧的准确性

durationchange 事件是当视频总时长发生改变时触发的。当视频加载前，总时长为默认值"NaN"，当视频加载完成后，durationchange 事件触发，总时长会变成视频的实际总时长。...此时，浏览器会解析 MP4 文件中的 moov box，并获取视频时长。因此，在 durationchange 事件触发时，可以获取到较为准确的 duration 。...第三次变更在加载到最后一片 ts 时调用。我们发现这三次变更的时长并不一致。因此我们需要在这三次变更中取一个更准确的时长作为视频时长。...第二次：在loadstart后loadedmetadata前readyState === 1时调用，hls.js解析完m3u8索引文件并通过#EXTINF计算出视频的实际时长。...我们发现，音频结束时长 - 音频首个best_effort_timestamp_time约等于第三次获取的duration。

72830

（1）Angular的开发

流行的ReactNative、Node.js、Angular.js、RXjs等技术 H5视频直播 ReactNative应用 JavaScript的新语法 高性能服务端框架 Webpack支撑大规模应用开发...Angular2 Vue.js 3D引擎架构 RxJs构建流式前端应用 内容元素content 图像image 音频audio 元信息metadata 编解码器codec 视频video...loadedmetadata 浏览器获取完毕媒体的时间长和字节数 loadeddata 当前帧的数据已经加载，但没有足够的数据来播放指定音频/视频的下一帧，会触发 progress 当浏览器正在下载指定的视频时...，会触发 canplay 当浏览器能够开始播放指定的视频时，会触发 canpalythrough 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的视频时，会触发 playing 当视频在已因缓冲而暂停或停止后就绪时...translateX位移 利用css3的transition-duration控制弹幕速度 文字碰撞和重叠检测 websocket实时获取弹幕数据 视频直播性能 视频首屏打开耗时 视频的延迟 直播页面的交互性能

1.3K40

H5多媒体能力

属性 autoplay [Boolean] 音频自动播放。 buffered 通过该属性获取已缓冲的资源的时间段信息。该属性包含一个 TimeRanges 对象。...可以是以下属性之一： none 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存； metadata 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的...| | stalled | 在尝试获取媒体数据，但数据不可用时触发。| | suspend |在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。...| | volumechange |在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）| | waiting | 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载...####哔哩哔哩 哔哩哔哩使用的是自己开源的播放器flv.js 不过基本上也是用的\元素 ####现在github上star最多的视频播放器一个是videojs/video.js,另一个是哔哩哔哩的flv.js

1.9K11

HTML基础

段落标签： 文本内容 是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。...自动播放 loop 循环播放 muted 静音 poster 预览图片设置 preload 预加载 none: 不预先加载任何数据 metadata: 只预先加载元数据 （视频总时长，第一帧画面图形等...） auto: 预先加载视频 音视频事件 事件名 说明 onloadedmetadata 当音频元数据加载完毕时触发，作用在于获取音视频文件的总时长 ontimeupdate 当音频播放时间变化时触发...onvolumechange 当声音改变时触发 音视频对象属性 可读可写属性 属性名 说明 currentTime 音频已经播放时长（返回未格式化的秒） volume 控制音量。...（ture 表示静音，false 表示非静音） playbackRate 播放速率 只读属性 属性名 说明 duration 音频总时长（返回未格式化的秒） paused 布尔值。音频文件是否暂停。

99230

如何从海量用户中轻松定位H5视频播放器问题？

部分属性和方法： 属性和方法 描述 currentTime 设置或返回视频中的当前播放位置（以秒计） duration 返回当前视频的长度（以秒计） load() 重新加载音频/视频元素 play()...最后，当视频播放器被调起，从video标签的current和duration 属性中获取当前时长和总时长来判断视频是否播放成功。...步骤2：获取到地址栏后，再通过UIAutomator加载自定义关于视频播放的相关JS脚本代码实现如下： ?...步骤3：成功注入自定义JS代码后，同样在地址栏中调用自定义JS脚本的相关视频函数可以实现视频的播放和获取播放时间，具体chrome浏览器验证视频播放流程如下： ?...问题3：ku6网站少量片源m3u8视频源不规范的问题。 根本原因: 获取的视频裸地址是.m3u8格式的，播放解析的m3u8文件后，里面文件不是ts类型，而是mp4类型。

2.1K80

视频直播技术干货：一文读懂主流视频直播系统的推拉流架构、传输协议等

获取压缩数据以后接下来需要将音视频压缩数据解码，获取非压缩的颜色数据和非压缩的音频抽样数据。...在我们获取TS文件之前：协议首先要求请求一个M3U8格式的文件，M3U8是一个描述索引文件，它以一定的格式描述了TS地址的指向，我们根据M3U8文件中描述的内容，就可以获取每一段TS文件的CDN地址，通过加载...获取到M3U8后：我们可以看一下里面的内容。首先开头是一些通用描述信息，比如第一个分片序列号、片段最大时长和总时长等，接下来就是具体TS对应的地址列表。...,mp4a.40.2"'); 如果FLV播放不被支持的情况下：需要降级到HLS，这时候需要判断浏览器环境是否在移动端，移动端通常不需要 hls.js 通过MSE解码的方式进行播放，直接将M3U8的地址交给...在蘑菇街App中，目前集成的X5内核版本比较老，在使用MSE的情况下会导致X5同层参数不生效。但如果集成新版本的X5内核，需要对大量的线上页面做回归测试，成本比较高，因此提供了一套折中的解决方案。

4.6K33

如何开发一款 H5 小程序直播？

这种情况不常见，但是确实是存在的，我们需要额外注意一下。如果我们在实践直播的时候拿到的流文件不播放，可能是播放器不支持这种嵌套。 m3u8分为动态列表，静态列表，全量列表。...第二行是版本的声明，默认是3，第三行是默认视频的时长，第四行是视频流块的个数，每次请求都会加1，再往下就是视频的ts文件，前面的9.901是这个ts文件的时长。...durationchange: 时长变化，表示可以获取视频时长了。...loadedmetadata: 当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件 loadeddata: 当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时...事件 canplaythrough: 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件 play: 暂停状态改变到播放状态就会触发play

3.5K20

HTML5 VideoAPI，打造自己的Web视频播放器

如果不设置autoplay属性，必须是用户单击播放按钮才会播放音频文件。...meta：告诉浏览器先获取音频文件开头的数据块，从而足以确定一些基本信息（比如音频的总时长） none：**告诉浏览器不必预先下载。恰当地利用这些值，可以节省带宽。...4.常用方法 方法名称 ：解释 play()：开始播放音频/视频 pause()：暂停当前播放的音频/视频 5.常用API属性 属性名称 ： 解释 duration：返回当前音频/视频的长度（以秒计...二、打造自己的播放器 我们使用JavaScript控制播放控件的行为（自定义播放控件），实现如下功能： 利用HTML+CSS制作一个自己的播放控件条，然后定位到视频最下方 视频加载loading效果...前面代码中其实已经设置了相关代码，此时我们只需要把获取到的毫秒数转换成我们需要的时间格式即可，提供getFormatTime()函数： function getFormatTime(time) {

4.8K40

语音识别类产品的分类及应用场景

2 语音识别能满足或支撑的需求层次 1、人与人之间的信息同步 转化成文字的语音信息，由于少了时间轴的约束，在同等量级的情况下，人类使用眼睛获取的速度远远快于耳朵。...产品形态：流式传输-同步获取 典型的应用场景：不涉及到多轮交互和多种语义说法的场景，比如，对于简单指令交互的智能家居和电视盒子，语音控制指令一般只有“打开窗帘”、“打开中央台”等；或者语音唤醒功能“Alexa...对于时长的限制，由语音云服务厂商自定义，一般有 典型应用场景1： A）主要在输入场景，如输入法、会议/法院庭审时的实时字幕上屏； B）与麦克风阵列和语义结合的人机交互场景，如具备更自然交互形态的智能音响...2）产品形态2：已录制音频文件上传-异步获取，音频时长一般 由于长语音的计算量较大，计算时间较长，因此采取异步获取的方式可以避免由于网络问题带来的结果丢失。...3）产品形态3：已录制音频文件上传-同步获取，音频时长一般小于 典型应用场景3： 作为前两者的补充，适用于无法用音频录制接口进行实时音频流上传，或者结果获取的实时性要求比较高的场景。

3.2K110

资源加载（上）

在没有添加第三方转换器的情况下，PixiJS.Assets 内部默认提供了以下几类资源的支持： 纹理 (Textures): avif, webp, png, jpg, gif 精灵表 (Sprite...子包类型定义 这个情况下，我们使用 AssetsPacks 类的实例时，能得到第一级子包名字的智能提示，然而无法获得子包内部资源名的智能提示，使用起来还是有些不便。...获取纹理素材，交给按键对象 btn.texture = await Assets.load('BTN_DEFAULT'); 如果在这个准备过程中，后台预加载已经完成，此时我们就可以立刻得到预加载好的素材...通过这些方法组合，我们可以实现按需分批加载的效果，减少首屏加载的等待时长——通常减少首屏等待时长都可以减少首屏退出率，提高留存。 例如，在开发时将资源根据场景划分子包。...实际上，如果我们不执行 AssetsManager.init() 做初始化的话，这些成员并没有真正加载完毕，只能拿到我们在 as 左侧设置的空对象。

2.7K71

基于端智能的播放QoE优化

越来越高的分辨率需要更高的网络带宽支持，如何在两者之间做好平衡是当务之急。在清晰度不断提高的情况下，带宽成本也不断提高，我们给用户带来的提升，用户可以感知到吗？...当我们使用带宽下载音频和视频流时，下行带宽是100，音频需要的带宽是20，视频需要的带宽是80，相当于带宽正好可以满足音频和视频两个流的下载，那么在这种情况下为什么还会发生卡顿？...当上层从传输层获取数据时，视频的消耗速度是80，音频的消耗速度是20，很明显视频流是供不应求的，同时音频的存储量则是在不断上涨的。...具体操作是通过控制音频和视频的receive buffer长度。从第图1开始，在初始情况下，我们会给视频和音频设置一个相对较小的接收区长度。...预加载真正适合的用户也是有限的，传统方案在用户网络好的时候不断预加载的内容，对于这些用户来说降低卡顿的收益是有限的，因为就算不预加载，他们也不会卡。

52610

基于react的H5音频播放器

---- 初步 最近刚好就做了音频播放器的需求，现将踩坑记录如右。 项目是基于React，镶嵌在页面。为此开发了组件audio.js。不过不管什么框架。逻辑都是一样的。 基础界面如下 ?...duration 返回当前音频/视频的长度（以秒计）。设置或返回是否在加载完成后随即播放音频/视频。 HTML 音频/视频事件 事件 描述 canplay 当浏览器可以开始播放音频/视频时触发。...进度条的大致原理就是获取音频的当前播放时长以及音频总时长的比例，然后通过这个比例与进度条宽度相乘，可以得到当前播放时长下进度条需要被填充的宽度。...let moveX = this.lectureAudio.duration / this.progressBar.clientWidth; //moveX是一个固定的常数，它代表着进度条宽度与音频总时长的关系...，我们可以通过获取触点移动的距离从而计算出此时对应的currentTime //下面是触点移动时会碰到的情况，分为正移动、负移动以及两端的极限移动。

8K10

Webview秒开探索：让你的H5“快人一步”

[Webview秒开探索：让你的H5“快人一步”.png] 本文为原创文章，引用请注明出处，欢迎大家收藏和分享 背景 如今的前端技术层出不穷，无论是react、vue等框架还是跨端解决方案，为使用场景和开发效率做了不少的提升...这篇文章就来聊下如何在常见的H5环境下，做到页面秒开。...按理说，这时候的：首屏时长=服务请求时长+服务获取异步数据时长+浏览器渲染页面时长。...，不但没有实现秒开效果，反而拖慢页面加载速度； 思考plus：有没有办法在实现SSR情况下又能保证页面秒开？...当然，redis也不是绝对可靠的，所以我们还需要做些补偿方案，例如在redis获取数据失败时，改调用接口获取数据等。 效果展示 ssr秒开方案 [111.gif] 普通异步加载 [222.gif]

1.8K60

播放器卡顿优化丨音视频工业实战

参考： 带宽估计[1] 1.2、H.265 降码率 H.265 相对于 H.264 压缩效率更高，在保持一定画质的情况下使用 H.265 替换 H.264 可以降低码率。...对于这种情况，我们发现音频 AVPacket 的 duration 字段值是正常的，所以可以使用音频缓冲区水位线来驱动起播，可以保证起播前的缓冲造成的卡顿时长是更符合预期的。...这里的水位对应的是视频缓冲时长或者音频缓冲时长。 比如，三级缓冲水位可以设置为：500ms、1000ms、5000ms。 第一级缓冲水位指的是播放器第一次加载多少视频数据后开始播放。...2.4、短视频缓存和预加载 短视频的卡顿大部分是由于网络原因导致的，加载本地数据比加载网络数据要更可靠，所以可以从缓存的角度来优化短视频的卡顿。...当然，如果产品上可以退后台继续采集音频，就使用系统的能力持续采集就好了。 2）退后台无法继续采集视频，这时候如果不推视频数据，那么可能会引起 CDN 和播放器的不兼容的问题。

2K20

Vue 2.x折腾记 - (13) Nuxt.js写一个常规音频的播放组件,动态注入微信,新浪微博的js-sdk

前言 只是一个常规的播放组件,需要考虑微信,微博这类环境的播放 微信和微博,若没有用其官方的js-sdk初始化,没法播放。...标签,引入对应js,然后用promise拿到成功加入head的状态 用vuex来维护播放状态 在对应的函数初始化音频的加载,之后就可以正常使用了 服务端的思路也差不多 考虑的东西多些,在之前客户端实现的基础上加以完善...用中间件这些来动态注入js-sdk 代码实现 客户端渲染实现的版本 版本1 全部耦合到组件内,虽然可以正常播放(包括微信和微博) 且不是单例模式,对于多音频页面,有毒 <div...this.audioElm.pause(); this.voicePlayMessage = '<em>音频</em><em>加载</em>资源错误!'...("voice/SetPlayer", player); }; nuxt.config.js 因为audio对象只有客户端才有,所以不能服务端初始化 设置ssr:false就代表在客户端的时候才注入,默认不写

15210
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券