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

Posted 2023-02-25

【中文标题】HTML5 音频标签 - 在位置开始和结束

【英文标题】：HTML5 Audio Tag - Start and end at position

【发布时间】：2017-08-07 18:22:59

【问题描述】：

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

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

【问题讨论】：

使用 setitmeout() 以您的自定义时间开始音频

@noobcode 这不是延迟音频文件的开始，而是在特定时间播放。

html 5 <audio> - Play file at certain time point的可能重复

【参考方案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'));

【参考方案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);

【参考方案3】：

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

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

【讨论】：

这没关系，但我的问题是如何在没有用户干预的情况下从一个点开始并在一个点结束。

链接的答案如何不符合您的规范？它与用户交互没有任何关系。