HTML5 音频标签 - 开始和结束位置

2024-04-25

我有多个<audio>我的代码中的标签,我想知道是否有一种方法可以将每个标签设置为具有自定义start and end位置,因为它们都加载相同的文件。

这应该在没有用户交互的情况下发生。我需要有效地部署和<audio>标签并有类似的东西data-start="04.22" data-end="09.45"


有一个时间范围参数 https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery#Specifying_playback_range可在 MediaElement 中使用src属性正是这样做的。

://url/to/media.ext#t=[starttime][,endtime]

请注意,如果启用这些元素上的控件,则用户将能够寻找不同的位置。

例子 :

var url = 'https://upload.wikimedia.org/wikipedia/commons/4/4b/011229beowulf_grendel.ogg';
var slice_length = 12;
var audio, start, end;
for (var i = 0; i < 10; i++) {
  start = slice_length * i; // set the start
  end = slice_length * (i + 1); // set the end
  // simply append our timerange param
  audio = new Audio(url + '#t=' + start + ',' + end);
  audio.controls = true; // beware this allows the user to change the range

  document.body.appendChild(document.createTextNode(start + 's ~ ' + end + 's'));
  document.body.appendChild(document.createElement('br'));
  document.body.appendChild(audio);
  document.body.appendChild(document.createElement('br'));
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML5 音频标签 - 开始和结束位置 的相关文章

  • jQuery触发新添加的html代码

    示例我有 2 个 html 输入 div class wrap div
  • 如何为 Safari 浏览器设置媒体查询

    media only screen and min width 480px and max width 767px 这是我的媒体查询如何修复它 如何设置 safari 网络浏览器 媒体查询不是为了浏览器检测而进行的 使用 javascrip
  • 调用 DynamoDB 中的用户数据时渲染得太晚

    所以我试图从dynamoDB 我正在使用一个GraphQL API访问我的数据库 在提供的代码的注释部分中 我提到我已经尝试过users 1 friends map 它确实返回正确的朋友列表数组 但用户似乎直到朋友列表渲染后才被设置 我应该
  • Javascript:确认、确定、取消按钮上的自定义文本

    我有一个验证 我想显示 继续 和 返回 而不是 确定 和 取消 但我无法找到准确的解决方案 任何人都可以帮助我
  • 使用 JavaScript 或 jQuery 设置文本框的最大长度

    我想用 JavaScript 或 jQuery 更改文本框的最大长度 我尝试了以下方法 但似乎没有帮助 var a document getElementsByTagName input for var i 0 i
  • JS:按每个类别的最大值过滤对象数组

    什么是最有效 优雅的方式来实现类似sql的过滤效果 我想过滤它们并只获取某个组中最大值的对象 这是我的代码 它可以工作 但可能不是最好的方法 uniqueValues arr gt new Set arr getMaxTimeOf arr
  • 是否可以防止出现文件对话框?为什么?

    假设我有输入 类型 文件 元素 我想拦截 onclick 事件并防止在不满足条件时出现文件对话框 是否可以 如果不是的话 为什么 Soufiane 的代码要求您的页面上有一个名为 jQuery 的 Javascript 库 如果您没有 您可
  • 有没有办法检测 Alt 键被按在哪一侧(右或左)?

    Is there a way that we can detect which side the Alt key was pressed on i e distinguish between left or right Alt I saw
  • 为什么控制台不显示从选择器返回的 jQuery 对象的方法?

    我知道如果我输入 正文 我得到一个 jQuery 对象 然而 在 chrome 的控制台上 我只能看到 jQuery 对象的内部数组 尽管事实上 jQuery 方法是可以访问的 例如 body hide 为什么控制台没有向我显示所有可访问的
  • Doctype的实际使用

    虽然我在 w3 org 上浏览了大量有关 Doctype 的信息并了解不同类型的 doctype 过渡型 严格型 框架集 我还是不太清楚在页面上使用Doctype的实际用途是什么 I mean 是为了阻止开发商 在代码中使用某些标签 例如
  • Angular ui-router:链接不可点击

    我尝试运行 angular ui router 来处理我的视图 但我遇到了问题 以下视图的两个链接不可点击 带有链接标签的角度更改变量 但我无法单击 我有这样的观点 h1 App h1
  • jQuery醉酒:手动触发器和delayIn

    我正在使用 jQuery 的 Tipsy 插件 每当我尝试使用手动触发器和delayIn调用醉酒时 delayIn似乎不起作用 interest tipsy trigger manual gravity n html true delayI
  • Highcharts.js 中的列之间的空间

    我有一个柱形图 其中对于每个 X 值我有两个系列 但该图显示每个 X 值之间的间距很宽 在 Highchart 中如何使列和 y 轴之间有 1px 的空间 Update pointPadding 0 2 to pointPadding 0
  • grunt:如何生成 HTML 形式的 jshint 输出

    我正在尝试使用 grunt 运行 jshint 这可行 但现在我希望输出为 HTML 这是我的 grunt 文件 module exports function grunt Project configuration grunt initC
  • Javascript Concat 多维数组

    我正在尝试连接一个多维数组 以便可以迭代并显示所有数据 有一篇关于如何访问嵌套数据的非常好的帖子here https stackoverflow com questions 11922383 access process nested ob
  • 谷歌距离矩阵 API

    我正在尝试获取direction in traffic 使用常规路线 API 不会返回该值 我发现有一个字段distancematrixapi 就是这样做的 当我从自己的机器上运行该代码时 该代码可以工作 但是一旦上线 我就会看到有关的错误
  • 将范围传递给 forEach

    我正在尝试使用回调方法addToCount而不是匿名函数forEach 但我无法访问this count其中 返回undefined function Words sentence this sentence sentence this c
  • 使用 RequireJS 的条件注释仅加载 IE7/8 jQuery

    我在我的项目中使用 Require JS 它加载 jQuery 和其他一些与整个网站和所有浏览器相关的 JavaScript 文件 但是 我需要在 Internet Explorer 7 和 8 上使用一些条件 jQuery 我尝试将其放在
  • 将聊天文本中的成对符号替换为 html 标签,以设置粗体、斜体和删除线样式

    我正在尝试制作 Whatsapp 风格的文本帖子 当用户创建这样的文本时 Hi how are you where are you 然后这个文本会像这样自动改变 Hi你好吗你在哪 我知道我可以使用 php 正则表达式来做到这一点 如下所示
  • 从 url 加载图像并绘制到 HTML5 Canvas

    我在从 javascript 中的 url 加载图像时遇到问题 下面的代码可以工作 但我不想从 html 加载图像 我想使用纯 JavaScript 从 url 加载图像 var c document getElementById myCa

随机推荐