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