首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在不加载js的情况下获取音频时长?

在不加载 JavaScript 的情况下获取音频时长是一个挑战,因为通常音频时长的获取需要通过 JavaScript 来操作 Audio 对象。然而,有一些间接的方法可以尝试:

基础概念

音频时长通常是指音频文件从开始到结束的时间长度,以秒或分钟为单位。这个信息通常包含在音频文件的元数据中。

相关优势

  • 快速获取:不需要等待 JavaScript 加载和执行。
  • 减少资源消耗:不加载额外的脚本,减少页面加载时间。

类型

  • 服务器端获取:通过服务器端脚本来读取音频文件的元数据。
  • 预加载信息:在 HTML 中预先嵌入音频时长信息。

应用场景

  • 静态网站:在不支持 JavaScript 或禁用 JavaScript 的环境中。
  • 性能敏感的应用:需要快速显示音频时长,而不等待 JavaScript 加载。

问题与解决方案

问题:为什么不能直接在不加载 JavaScript 的情况下获取音频时长?

原因:浏览器安全限制和 HTML 标准不允许在没有 JavaScript 的情况下直接访问文件元数据。

解决方案

  1. 服务器端获取
    • 使用服务器端脚本(如 Python、PHP 等)读取音频文件的元数据,然后将时长信息嵌入到 HTML 中。
    • 示例(Python):
    • 示例(Python):
    • 将获取到的时长信息嵌入到 HTML 中:
    • 将获取到的时长信息嵌入到 HTML 中:
  • 预加载信息
    • 在 HTML 中预先嵌入音频时长信息,而不是动态获取。
    • 示例:
    • 示例:

参考链接

通过上述方法,可以在不加载 JavaScript 的情况下获取音频时长。选择哪种方法取决于具体的应用场景和需求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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.7K21
  • HTML5新特性

    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.7K30

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

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

    4K20

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

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

    76530

    (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位移 利用css3transition-duration控制弹幕速度 文字碰撞和重叠检测 websocket实时获取弹幕数据 视频直播性能 视频首屏打开耗时 视频延迟 直播页面的交互性能

    1.3K40

    HTML基础

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

    1K30

    H5多媒体能力

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

    1.9K11

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

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

    2.2K80

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

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

    5K43

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

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

    3.6K20

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

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

    4.9K40

    资源加载(上)

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

    3.1K71

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

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

    3.3K110

    基于端智能播放QoE优化

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

    58310

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

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

    1.9K60

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

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

    2.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就代表在客户端时候才注入,默认

    17610

    播放器秒开优化丨音视频工业实战

    我们如何在 FFmpeg 中统计 DNS 耗时呢?...如果在客户端发出请求(:http://www.example.com/abc.flv)时候,服务端是通过 302/307 调度方式返回直播资源真实地址(:http://www.realservice.com...如果我们提前获取短视频文件长度,通过设置 HTTP 请求 Range 则可以省去第一次 Get 请求来优化首帧时长。...音频数据很容易满足条件,因为如果采样率是 44.1k 音频,那么 1s 数据平均有 44 个音频包,0.25s 数据就能达到 11 个音频包。...如果视频采集编码帧率较低(美颜、AR 情况下由于处理消耗较大可能采集帧率较低),只有 10-15,那就需要接近 1s 数据才能达到 11 帧,缓冲区需要这么多数据才能开始播放,这个时长太大。

    3.3K31
    领券