HTML5音频标签-在位置处开始和结束 [英] HTML5 Audio Tag - Start and end at position

问题描述

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

I have a number of <audio> tags in my code and I would like to know if there is a way that I can set each one to have a custom start and end position as they all load the same file.

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

This should happen without user interaction. effectively I need to deploy and <audio> tag and have something like data-start="04.22" data-end="09.45"

推荐答案

有一个src属性中可以使用nofollow noreferrer> timerange参数.

There is a timerange parameter available in MediaElement's src attribute which does exactly this.

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

请注意，如果启用这些元素上的控件，则用户将能够搜索到不同的位置.

Note that if you enable the controls on these elements, then the user will be able to seek to different positions.

示例:

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'));
}

这篇关于HTML5音频标签-在位置处开始和结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！