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

Question

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

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

Answer 1

MediaElement 的 src 属性中有一个 timerange parameter 可用，它正是这样做的。

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

Answer 2

以下是您要查找的内容。我有四个选项，您可以从中进行选择，每个选项的难度都比以前的要小。我根据您的需要推荐最后一个。

开始时间以秒为单位，在本例中为 12 秒。您有一个播放时间，而不是结束时间，它以毫秒为单位。

    myAudio=document.getElementById('audio2');
    myAudio.addEventListener('canplaythrough', function() {
      if(this.currentTime < 72){this.currentTime = 72;}
      this.play();
      setTimeout(function(){
      document.getElementById('audio2').pause();

}, 3000); 

    });

<audio id="audio2" 
       preload="auto" 
       src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Drum.ogg" >
    <p>Your browser does not support the audio element</p>
</audio>

如果您真的想要一个结束时间，您可以编写一个函数，将您的输入从开始时间中减去，然后将其转换为毫秒。 下面是一个例子：

var startTime = 72;
var endTime = 75;
var delaySec = endTime - startTime;
var delayMillis = delaySec * 1000;
    myAudio=document.getElementById('audio2');
    myAudio.addEventListener('canplaythrough', function() {
      if(this.currentTime < startTime){this.currentTime = startTime;}
      this.play();
      setTimeout(function(){
      document.getElementById('audio2').pause();

}, delayMillis); 

    });

<audio id="audio2" 
       preload="auto" 
       src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Drum.ogg" >
    <p>Your browser does not support the audio element</p>
</audio>

在这一项中，您可以设置开始时间和结束时间（以秒为单位）。

或者您可以使用以分钟和秒为单位的开始时间来执行此操作。

var startMinute = 1;
var startSecond = 12;
var endMinute = 1;
var endSecond = 15;
var startinsec = startMinute * 60;
var startTime = startinsec + startSecond;
var endinsec = endMinute * 60;
var endTime = endinsec + endSecond;;
var delaySec = endTime - startTime;
var delayMillis = delaySec * 1000;
    myAudio=document.getElementById('audio2');
    myAudio.addEventListener('canplaythrough', function() {
      if(this.currentTime < startTime){this.currentTime = startTime;}
      this.play();
      setTimeout(function(){
      document.getElementById('audio2').pause();

}, delayMillis); 

    });

<audio id="audio2" 
       preload="auto" 
       src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Drum.ogg" >
    <p>Your browser does not support the audio element</p>
</audio>

这是另一个实际上应该更容易做的，因为你有多个文件：

audioControl('audio2', 1, 12, 1, 15);
    
function audioControl(elemID,sM, sS, eM, eS) {
var startinsec = sM * 60;
var startTime = startinsec + sS;
var endinsec = eM * 60;
var endTime = endinsec + eS;;
var delaySec = endTime - startTime;
var delayMillis = delaySec * 1000;
    myAudio=document.getElementById(elemID);
    myAudio.addEventListener('canplaythrough', function() {
      if(this.currentTime < startTime){this.currentTime = startTime;}
      this.play();
      setTimeout(function(){
      document.getElementById(elemID).pause();

}, delayMillis); 

    });
    
    }
    

<audio id="audio2" 
       preload="auto" 
       src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Drum.ogg" >
    <p>Your browser does not support the audio element</p>
</audio>

只要您想这样做，您只需运行以下命令：

audioControl(ElementID, StartMinute, StartSecond, EndMinute, EndSecond);

Answer 3

请参阅此答案以了解如何在特定时间播放音频文件：

HTML 5 <audio> - Play file at certain time point