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

Question

我有一些 <audio>我的代码中的标记，我想知道是否有一种方法可以将每个标记设置为具有自定义的 start 和 end 位置，因为它们都加载同一个文件.

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

Answer 1

有一个timerange parameter在 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'));
}