HTML Audio

Makale İçerik Listesi

Saniyeden Timestamp

  1. <audio> tagi içerisindeki dosyanın uzunluğu ilk anda tam yüklenmediği için NaN olarak çıkar.
  2. Ama data'nın yüklendiği anda ateşlenen olaylar vardır. Onlardan bizim için en anlamlısı onloadeddata onu algılamak için audio tagine ekliyorum. (onloadeddata iOS'ta çalışmıyor. onloadedmetadata eventini kullanabilirsin.)
    <audio id="ap-1" onloadeddata="audioLoaded()">
       <source src="audio.mp3" type="audio/mpeg">
    </audio>
  3. Diğer eventler için 
    <audio oncanplay="onCanPlayFunction()"
           oncanplaythrough="onCanPlayThroughFunction()"
           onloadeddata="onLoadedData()"
           src="myaudio.ogg"
           controls>
        <a href="myaudio.ogg">Download</a>
    </audio>
  4. Şimdi bu datanın bize vereceği bilgiyi alıp işleyelim. 
    function getTimestamp(duration) {
        let minutes = Math.floor(duration / 60);
        let seconds = Math.floor(duration - (minutes * 60));
        
        if (minutes < 10) {minutes = "0"+ minutes;}
        if (seconds < 10) {seconds = "0"+ seconds;}
        
        return minutes+':'+seconds;
    }
    
    function audioLoaded() {
       document.querySelector('#' + event.target.id + '-text').innerHTML =  getTimestamp(event.target.duration);
    }

Saatli Timestamp

  1. String.prototype.toHHMMSS = function () {
        var sec_num = parseInt(this, 10); // don't forget the second param
    
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);
    
        if (hours   < 10) {hours   = "0"+hours;}
        if (minutes < 10) {minutes = "0"+minutes;}
        if (seconds < 10) {seconds = "0"+seconds;}
    
        return hours+':'+minutes+':'+seconds;
    }
    
    alert("5678".toHHMMSS());
    

Referanslar

  1. Saniyeden timestamp çıkartmak - link
  2.