Databases
StackOverflow2013
Postsdbo
POHtml5 audio "preload="none" messes up pause() and currentTime()
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHtml5 audio "preload="none" messes up pause() and currentTime()
    primarykey
    data
    text
    <p>I'm having a really weird problem pausing and resetting progress of html5 audio.</p> <p>If I set preload="none", then "pause();" and "currentTime=0;" will not execute. The moment I delete preload="none", everything works.</p> <p>This is my code. I fade in/out a couple of pages, each pages has an html 5 audio element in the same position (intended), so the user can play that page's music when visiting that page.</p> <pre><code>$('.link').on('click', function(e){ $('.pagecontainer&gt;div').fadeOut(); $(this.getAttribute("href")).fadeIn(); stopAudio(); }); function stopAudio() { //fade out and stop any current audio $('audio').animate({volume: 0}, 1000); setTimeout(function(){ $.each($('audio'), function () { this.currentTime=0; this.pause(); alert('audio has been stopped and reset'); }); },1000) } $('.sound').on('play', function () { //since volume was faded out, reset volume when click play button $('audio').animate({volume: 1}, 100); }); .... .... &lt;a href="#page1" class="link"&gt;Audio 1&lt;/a&gt; &lt;a href="#page2" class="link"&gt;Audio 2&lt;/a&gt; &lt;a href="#page3" class="link"&gt;Audio 3&lt;/a&gt; &lt;div class="pagecontainer"&gt; &lt;div id="page1"&gt; //all three audio elements are in exact same spot //clicking page link fades in current audio and fades in new one &lt;audio controls loop class="sound" preload="none"&gt; &lt;source src="../../site/music/music1.mp3"/&gt; &lt;source src="../../site/music/music1.ogg"/&gt; &lt;/audio&gt; &lt;/div&gt; &lt;div id="page2"&gt; &lt;audio controls loop class="sound" preload="none"&gt; &lt;source src="../../site/music/music2.mp3"/&gt; &lt;source src="../../site/music/music2.ogg"/&gt; &lt;/audio&gt; &lt;/div&gt; &lt;div id="page3"&gt; &lt;audio controls loop class="sound" preload="none"&gt; &lt;source src="../../site/music/music3.mp3"/&gt; &lt;source src="../../site/music/music3.ogg"/&gt; &lt;/audio&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>When I click a link to another page, I need to stop and reset all three audio elements. Currently since it doesn't stop, the moment I click the play button of the audio element that fades in, I hear two audios playing at the same time. Though interestingly the audio does fade out.</p> <p>As mentioned, if I delete preload="none", then the alert('audio has been stopped and reset') will fire, and everything works fine.</p> <p>Does anyone know how I can load the audio only when needed (if I take out preload="none") then my website won't work in Chrome, about 20 music files will all try to load at the same time causing Chrome to hang), but make my script work?</p> <p>Urgent~ thanks!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USWindbrand
    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. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHtml5 audio "preload="none" messes up pause() and currentTime()
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThis is also important as all iOS devices are enforcing the preload="none" option in order to not overload bandwidth. Only a user input such as a touch event can trigger the audio or video to load. Meaning this problem will also crash iPhones, iPads and perhaps soon iWatches!
      singulars
      1. POHtml5 audio "preload="none" messes up pause() and currentTime()
      1. USeriklinde
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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