Question

我的代码中有多个<audio>代码，我想知道是否有办法让每个代码都设置为自定义开始和结束位置，因为它们都加载了相同的文件。

这应该在没有用户交互的情况下发生。实际上，我需要部署<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

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

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

Answer 3

以下是您要找的内容。我有四个选项可供您选择，每个选项的难度都比以前少一些。我根据你的需要推荐最后一个。

开始时间以秒为单位，在此示例中为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);

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

3 个答案: