Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML audio can't set currentTime

I am using Chrome. In my dev tools console, I tried the following:

enter image description here

Everything works as expected except last line. Why can't I set currentTime on it?

Also in general, I am finding this whole HTML5 Audio thing to not be very reliable. Is there a robust javascript wrapper that fallsback to flash ?

like image 212
Rajat Avatar asked May 05 '16 06:05

Rajat


People also ask

How do I change the size of an audio file in HTML?

<audio> can be styled as any other html element. To increase the width just use the css property width .

How do you hyperlink audio in HTML?

Linking to a sound file using a href allows a browser to open and play an audio file if the viewer of your web page has properly configured their Internet browser. You can also use the <embed> tag or the newer <audio> tag to insert a sound file directly into a web page. With audio files, we recommend using the .

How do I preload audio in HTML?

We use preload=”auto” attribute to preload the audio file. The HTML Audio Preload Attribute is used to specify how the author thinks the audio should be loaded when the page loads. The audio preload attribute allows the author to indicate to the browser how the user experience of a website should be implemented.

How do I display MP3 in HTML?

The HTML <audio> element is used to play an audio file on a web page.


Video Answer


4 Answers

You need to do something like this (if you use jQuery)

$('#elem_audio').bind('canplay', function() {
  this.currentTime = 10;
});

or in Javascript

var aud = document.getElementById("elem_audio");
aud.oncanplay = function() {
    aud.currentTime = 10;
};

The reason behind for this setup is you need to make sure the audio is ready to play.

like image 112
Netorica Avatar answered Oct 16 '22 05:10

Netorica


Check your HTTP server configuration, in my testing environment ( Chrome 69 on Mac OS) setting currentTime property of audio element works only when the audio source is served by a HTTP server support persistent connection.

If the HTTP server you used support persistent connection, you will found (in Chrome DevTool) the Connection field of response headers of your audio source be keep-alive. By contrast if the audio source is served by a persistent connection incompatible server, there will be no Connection field in response headers.

The status code of your audio source HTTP request will be a reference too, 206 Partial Content for persistent connection supported server, 200 OK for an inferior one.

like image 44
Bono Lv Avatar answered Oct 16 '22 06:10

Bono Lv


I had the same problem, and the reason was missing headers on the mp3 file, like:

Content-Length, Content-Range, Content-Type

like image 7
Nexx Avatar answered Oct 16 '22 06:10

Nexx


Why cant I set currentTime on it?

Could not reproduce currentTime being set to 0 after setting to 10. Is 18.mp3 duration less than 10?

var request = new XMLHttpRequest();
request.open("GET", "/assets/audio/18.mp3", true);
request.responseType = "blob";    
request.onload = function() {
  if (this.status == 200) {
    var audio = new Audio(URL.createObjectURL(this.response));
    audio.load();
    audio.currentTime = 10;
    audio.play();
  }
}
request.send();

jsfiddle http://jsfiddle.net/Lg5L4qso/3/

like image 6
guest271314 Avatar answered Oct 16 '22 05:10

guest271314