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

Question

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

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

Answer 1

MediaElement 的属性中有一个timerange 参数可以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'));
}