HTML5音频标签 - 启动和

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