html5显示音频当前时间

2023-12-04

我想显示 html 5 音频元素的当前时间以及该元素的持续时间。我一直在互联网上查找,但找不到一个功能脚本,可以让我显示音频文件的长度以及当前的时间,例如1:35 / 3:20。

有人有什么想法吗:)?


这是一个例子:

<audio id="track" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg"
       ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
    <p>Your browser does not support the audio element</p>
</audio>
<span id="tracktime">0 / 0</span>
<button onclick="document.getElementById('track').play();">Play</button>

这应该适用于 Firefox 和 Chrome,对于其他浏览器,您可能需要添加替代编码。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html5显示音频当前时间 的相关文章

  • php在html页面中创建额外空间

    我是网络开发新手 我真的被这个愚蠢的问题困扰了 当我在 html 代码之前插入 php 代码时 如下所示 它在我的页面顶部创建了额外的空白空间 并将整个内容 推下 是否有可能以某种方式避免创建额外的空间 如果 php 代码位于 html 的
  • 为什么“dtoa.c”包含这么多代码?

    我将是第一个承认我对低级编程的整体知识有点稀疏的人 我理解许多核心概念 但我不经常使用它们 话虽这么说 我对需要多少代码感到非常惊讶dtoa c http www netlib org fp dtoa c 在过去的几个月里 我一直致力于用
  • 如何使用 CSS 将 div 置于表格中心?

    我正在尝试向我的网站之一添加幻灯片 整个页面布局在一个 HTML 表格中 我非常讨厌它并且没有选择 我想将我的幻灯片放在该特定列的中心 我的 CSS 如下所示 slideshow position relative slideshow IM
  • django ajax post 403被禁止

    使用 django 1 4 当我尝试从我的 javascript 做我的 django 服务器上的帖子时 我收到 403 错误 我的 get 工作正常 尽管问题仅出在帖子上 也尝试过 csrf exempt但没有运气 更新 我现在可以发布我
  • 禁用任何类型的浏览器窗口滚动?

    有没有办法禁用滚动 不仅仅是滚动条 还有浏览器窗口的全部功能 根据您对 Keit 的回答 您不想在打开灯箱时滚动处于活动状态 如果是这种情况 您可以使用以下 css 在打开灯箱的同时向正文添加一个类 这个解决方案的好处是它保留了滚动 空间
  • Rails 4 - 带有 dependent-fields-rails 的条件 JS

    我正在尝试弄清楚如何在我的 Rails 4 应用程序中使用 dependent fields rails gem 我迷路了 我已将 underscore js 包含在我的供应商 javascripts 文件夹中 并更新了我的 applica
  • 对数字和字母元素的数组进行排序(自然排序)

    假设我有一个数组 var arr 1 5 ahsldk 10 55 3 2 7 8 1 2 75 abc huds 我尝试对其进行排序 我得到了类似的东西 1 1 10 2 2 3 5 55 7 75 8 abc ahsldk huds 注
  • 在外部单击时关闭弹出 div

    我有一个弹出 div 仅在单击特定按钮时显示 单击同一按钮时它甚至会隐藏 我的问题是 我还想在单击外部任何地方时隐藏 div 我无法这样做 因为弹出 div 位于主包装类内部 并且无法通过在包装类上使用 click 事件并使其隐藏来做到这一
  • 页面不会居中对齐

    我遇到了 CSS 问题 http www luukratief design nl dump parallax index html http www luukratief design nl dump parallax index htm
  • Google 地图 v3 中标准缩放控件的样式

    有没有一种简单的方法可以在 Google Maps JavaScript API v3 中设置缩放控件的样式 我想要的只是改变标准图像 http maps gstatic com intl en ALL mapfiles mapcontro
  • while 循环元素状态 cypress

    我有一个问题 我想单击一个按钮直到它消失 但次数可能会有所不同 所以我想检查可见性状态 当可见 true时单击按钮 当可见 false时结束测试 但问题是我不知道如何循环从获取元素到末尾的所有链 单击按钮一次 由于中断而停止 如果我删除中断
  • 单击react.js 切换列表的背景颜色

    我正在尝试创建一个具有以下功能的列表 悬停时更改列表项的背景颜色 单击时更改列表项的背景颜色 在单击的元素之间切换背景颜色 即列表中只有一个元素可以具有 clicked 属性 我已经执行了 onhover 1 和 2 功能 但无法实现第三个
  • 在 中动态添加链接样式表 [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 如何将链接
  • nvd3.js - 无法更改折线图中线条的颜色

    我正在尝试更改 nvd3 折线图不同线条的颜色here http nvd3 org livecode index html codemirrorNav但我无法理解该怎么做 我想将示例中的 2 条线的颜色更改为绿色和青色 我试过 nv add
  • HTML / CSS 如何将图像图标添加到输入类型=“按钮”?

    我使用下面的 CSS 但它将图像放在按钮的中心 使用任何方式左对齐或右对齐图标
  • 使用 JavaScript 从 URL 变量读取来加载不同的 CSS 样式表

    我试图在我的 WordPress 博客上使用两个不同的样式表 以便在通过 Web 访问页面时使用一个样式表 而在通过我们的 iOS 应用程序访问博客内容时使用另一个样式表 现在 我们将 app true 附加到来自 iOS 应用程序的 UR
  • 响应式菜单:悬停子菜单显示错误

    简而言之 我根据教程创建了一个响应式菜单 当您将鼠标悬停在投资组合按钮上时 菜单应该显示子菜单 而在移动模式下 您需要按该按钮才能显示子菜单 效果很好 问题是该教程有一个错误 如果您在桌面模式下按组合按钮 子菜单将不会再次显示 除非您按 单
  • 如何在 jQuery 中检查复选框是否被选中?

    我需要检查checked复选框的属性 并使用 jQuery 根据选中的属性执行操作 例如 如果age复选框被选中 然后我需要显示一个文本框来输入age 否则隐藏文本框 但下面的代码返回false默认情况下 if isAgeSelected
  • jQuery fadeOut 一个 div,fadeIn 另一个 div 在其位置

    我正在尝试一个简单的 jQuery 脚本来淡出一个 div 并淡入另一个 div 但由于某种原因 第一个 div 永远不会淡出 这可能是代码的一个明显问题 但我似乎无法弄清楚 div div div div
  • Angular 5 中 Observable.ForkJoin 的重复 Http 请求

    我有一个 Angular 5 应用程序 组件中包含以下代码 ngOnInit Observable forkJoin this highlightedInsight this insightService getHighlightedIns

随机推荐

  • 如何使用 Python 获取 SVG 路径的高度、宽度和长度?

    我有一个 svg 其中有大量这样的路径
  • FCM 字段“数据”必须是 JSON 数组

    您好 我正在与邮差一起制作我的 json 对象 FCM 消息 但是当我尝试发送时 to fzvihT7dFUI APA91bFVhnWAxXVjlWiiHIs9ZUyL1DE2hZO6GpItJtReh3hcKF1kD6mLuQq9fNP9
  • repz ret:为什么这么麻烦?

    的问题repz ret已经在这里介绍了 1 以及其他来源 2 3 还算满意 然而 在阅读这两个来源时 我找到了以下问题的答案 是什么actual定量比较中的惩罚ret or nop ret 尤其是在后一种情况下 当大多数函数要么有 100
  • 应用程序兼容主题的弹出菜单分隔线

    我使用了应用程序兼容主题样式
  • 在同一行上获取 2 个 div

    我试图让 2 个 div 位于同一行 我已经 div class header div class clear hideSkiplink div class menuDiv div div div
  • 创建带有滚动条的下拉列表

    我有一个包含选项列表的 HTML 下拉列表 当用户单击下拉列表时 应该会看到带有滚动条的前五个选项 我想使用 JavaScript 和 CSS 来实现这一点 由于我对这些不熟悉 请建议我如何使用滚动条显示下拉列表 以便能够滚动并从下拉列表中
  • RegOpenKeyEx() 错误

    我正在使用 Qt 和 mingw 来编写一个更改注册表的程序 但是当我调用时 RegOpenKeyEx HKEY LOCAL MACHINE SOFTWARE Microsoft Windows NT CurrentVersion Defa
  • 实体框架 Fluent API 不考虑基类属性

    EF 6 1 我们刚刚启动了一个有很多继承的项目 选定的继承数据库映射类型是每个层次结构的表 问题是 当尝试使用 add migration 生成迁移时 会引发以下错误 The foreign key component VersionId
  • 如何向 Rails 应用程序添加 IP 限制?

    有没有办法向 Rails 应用程序添加 IP 限制 某种类型的机架中间件 出于安全原因 只有设定的 IP 列表才能访问 Rails 应用程序 Thanks 使用此处描述的路由约束 http guides rubyonrails org ro
  • 对两个条件查询使用相同的谓词

    我想使用相同的数组运行一对查询Predicate 一是统计记录数 一是获取某一页记录 对我来说 这似乎是一个非常正常的用例 所以一定有一个很好的方法来做到这一点 但我还没有找到它 这是获取实体的部分 CriteriaBuilder crit
  • 检索喜欢某个 URL/网页的 Facebook 用户

    如何检索在外部网站上单击 赞 按钮的 Facebook 用户列表 假设我有一个喜欢按钮
  • 如何将 OL 中的一项向右对齐,而其他项在左侧对齐?

    我在 OL 元素中使用 Bootstrap 的面包屑类 除了面包屑信息之外 我还想在 OL 右侧添加最后更新信息 我使用了 text align right 但它不起作用 是否可以 谢谢您的帮助 这是我的代码 ol class breadc
  • 如何从字典列表创建三个单独的值列表,其中每个字典具有三个键

    我是Python新手 对于经验丰富的开发人员和编码人员来说 我的问题可能很简单 但我一直无法找到答案 我正在通过数据库查询检索一些数据 我成功地将查询返回的每一行组织为具有三个键和每个键对应值的字典 本质上 我已将查询返回的所有数据行组织到
  • ACR122u直接通讯无反应

    我正在尝试通过发送直接命令来使用 java 访问我的 ACR122u 奇怪的是我没有得到任何响应 也没有错误 这是我的代码 final static int IOCTL SMARTCARD ACR122 ESCAPE COMMAND 0x0
  • 如何关闭TextInputPanel

    我正在移植 WPF 应用程序以在 Windows 8 平板电脑上运行 我想让文本输入面板在文本框获得焦点时出现 并在文本框失去焦点时消失 让它出现是没有问题的 但我似乎无法让它关闭 我已在进程上尝试了 Kill 和 CloseMainWin
  • Android M 一次请求多个权限

    您好 我正在更新我的应用程序贾夫纳神庙 这样它就可以支持Android M设备 v 6 0及以上 有没有办法可以一次请求多个权限 例如 我想获得同时读取手机状态和位置信息的权限 使用这种方式我可以一一请求许可 但我想在应用程序开始时立即保留
  • MySQL 将字段添加到 Enum

    我必须向数据库表添加一些枚举选项 问题是 我必须对多个表和数据库执行此操作 并且它们可能并不都具有相同的枚举数据类型 是否有理由编写更改表查询或类似于将选项附加到枚举数据类型的内容 如果没有办法纯粹在 MySQL 中完成此操作 您将如何使用
  • 我可以在 C# 中使用 linq 压缩 if 语句吗?

    在 sql 中 我可以制作如下 if 语句 如果 MY STATE 在 1 2 3 4 在 C 中我必须输入 if MY STATE STATE CT MY STATE STATE MA MY STATE STATE VA MY STATE
  • 在 jQuery 中让元素靠近屏幕中间

    我在页面中有一个项目 div 列表 example div div div div div div div div div div div div div div div div div div
  • html5显示音频当前时间

    我想显示 html 5 音频元素的当前时间以及该元素的持续时间 我一直在互联网上查找 但找不到一个功能脚本 可以让我显示音频文件的长度以及当前的时间 例如1 35 3 20 有人有什么想法吗 这是一个例子