Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>As far as I can see, what you're trying to do should work. Per <a href="http://dev.w3.org/html5/spec/media-elements.html" rel="nofollow">the specification</a>:</p> <blockquote> <p>Once the entire media resource has been fetched (but potentially before any of it has been decoded) Fire a simple event named <code>progress</code> at the media element.</p> </blockquote> <p>And I see the relevant code in <a href="http://mxr.mozilla.org/mozilla-central/source/content/html/content/src/nsHTMLMediaElement.cpp#2228" rel="nofollow">Firefox</a>:</p> <pre><code> // Ensure a progress event is dispatched at the end of download. </code></pre> <p>Try logging <code>duration</code> and <code>audio.buffered</code> separately from the listener outside of any <code>if</code>s -- in my testing <code>duration</code> can be <code>NaN</code> or <code>Infinity</code> at the moment the final progress event fires.</p> <p>If that doesn't help, I'd recommend mentioning the browser, the HTTP server, the audio format you use, as well as providing a simplifying testcase.</p> <p>Here's the code I used to test on a Firefox nightly with <code>python -m SimpleHTTPServer 8000</code> as the HTTP server (bunny.ogg taken from <a href="http://developer.longtailvideo.com/trac/browser/trunk/html5/test/files/bunny.ogg?rev=944" rel="nofollow">here</a>):</p> <pre><code>&lt;audio src="bunny.ogg" controls&gt; &lt;/audio&gt; &lt;script&gt; var audio = document.getElementsByTagName("audio")[0]; audio.addEventListener("progress", onProgress, false); function onProgress() { var loaded = (audio.buffered.end(0) / audio.duration) * 100; console.log(audio.buffered.end(0) + " / " + audio.duration + " * 100 = " + loaded); } &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload