HTML5音頻標簽-在位置處開始和結束

Question

我的代碼中有許多<audio>標記，我想知道是否有一種方法可以將每個設置為具有自定義的開始和結束位置，因為它們都加載相同的文件。

這應該在沒有用戶交互的情況下發生。 有效地，我需要部署和<audio>標簽，並具有類似data-start="04.22" data-end="09.45"

Answer 1

MediaElement的src屬性中有一個timerange參數可以做到這一點。

://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>-在特定時間點播放文件

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