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

Question

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

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

的东西

Answer 1

关于如何在特定时间播放音频文件，请参阅此答案：

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

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

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

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

HTML5 Audio Tag - Start and end at position

html

javascript

html5-audio