Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't set currentTime in Chrome

For some reason in Chrome I can't set the currentTime property of the audio tag. I can alert the currentTime and it displays correctly but when I try to set the currentTime it reverts to zero. There is an event listener on a progress bar which triggers the alert shown below. It always displays as zero. In FireFox and IE the alert works just fine. What's the problem with Chrome?

$(document).ready(function(){document.getElementById('progressBar').addEventListener(
                                    'click',
                                    function(e) {

             document.getElementById("audio_id_1").currentTime = 10;
             alert(document.getElementById("audio_id_1").currentTime);
             ...
             ...

<audio id="audio_id_1" preload="metadata">
    <source src="test.mp3" type="audio/mp3" />
</audio>
like image 356
Conor Avatar asked Jan 28 '26 01:01

Conor


1 Answers

My chrome can seek "local" audios and videos well, whose source urls start wich "blob:"

So I solved this in such the redundant way:

  • download the whole media (XMLHttpRequest);
  • get the blob url (URL.createObjectURL);
  • change the source url of the media


    function makeChromeSeekable(){ 
        var player = document.getElementById("thevideo")                                                                                                                                                                          
        var uReader = new XMLHttpRequest()                                                                                                                                                             
        uReader.open ('GET', player.src, true)                                                                                                                                                        
        uReader.responseType = 'blob'                                                                                                                                      
        uReader.onload = () => {                                                                                                                                                                           
            player.src = URL.createObjectURL(uReader.response)                                                                                                                                                        
        }                                                                                                                                                                                                                                                                                                                                                                                                
        uReader.send()                                                                                                                                                                                 
    }    
    makeChromeSeekable()

PS: The video files mignt be too large for downloading, but audio files should always be feasible.

PS. I used to believe that blob data has to be converted as data(File.getDataURL), but now using blob urls is ok seems more convenient.

like image 145
Lh Guo Avatar answered Jan 29 '26 15:01

Lh Guo