CODEWITHSUNDEEP
javascriptjquerygoogle-chromehtml5-audio
Conor
Conor

Reputation: 107

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>

Upvotes: 3

Views: 1004

Answers (1)

Lh Guo
Lh Guo

Reputation: 51

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.

Upvotes: 4

Related Questions