Databases
StackOverflow2013
Postsdbo
POHTML5 MP3 <audio> not loading correctly
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML5 MP3 <audio> not loading correctly
    primarykey
    data
    text
    <p>Ok, <a href="http://turtlecodeapps.appspot.com" rel="nofollow">my new website</a> has just gone live, delivered through Google Apps. On a lark, I decided to include a javascript / HTML5 Lunar Lander clone (Martian Lander) which I wrote as an exercise a while back. The game works fine when I open it locally, but when it's delivered through GAE, the sounds don't seem to load on every system. In mobile safari, <em>none</em> of them load. In safari on the desktop, they all load reliably on my computer, but <em>not</em> on some other computers. In Chrome (on the desktop) it seems to work, but in Chrome in iOS, only one sound loads. On the desktop, it always seems to be the same sound which fails to load (<a href="http://turtlecodeapps.appspot.com/subpages/lander/sounds/explode1.mp3" rel="nofollow">explode1.mp3</a>), which is the smallest of the sounds I'm loading. As you can see, if you click that link, the sound downloads fine from the server... </p> <p>At first the problem seemed to be related to case sensitivity, so I switched the case in the filename, but that fix didn't keep working. This is a problem, as my loading bar is directly tied to how many resources have loaded, so it just sits there waiting for a GET request with no reply... Has anyone experienced anything like this, where a GET receives no reply on a specific resource, but loading the resource directly works fine?</p> <p>I should say that I'm very new to most of these technologies, so it seems quite likely to me that I just made some novice mistake. Unfortunately, I'm not sure what those novice mistakes would be, seeing as I'm a novice!</p> <p>Here's the code I use to load the sounds:</p> <pre><code>function loadSound(soundName) { var newElement = document.createElement("audio"); newElement.addEventListener("canplaythrough", assetLoaded, false); document.body.appendChild(newElement); var audioType = supportedAudioFormat(newElement); if (audioType == "") { alert("no audio support"); return; } newElement.setAttribute("src", "lander/sounds/" + soundName + "." + audioType); console.log("loading sound " + newElement.src + "..."); return newElement; } </code></pre> <p>and...</p> <pre><code>function assetLoaded() { var assetName = this.src; numAssetsLoaded++; console.log("loaded asset " + numAssetsLoaded + " (" + assetName + ")"); if (numAssetsLoaded &gt;= numAssetsToLoad) { shipSpriteSheet.removeEventListener("load", assetLoaded, false); pointImage.removeEventListener("load", assetLoaded, false); thrustAudioElement.removeEventListener("canplaythrough", assetLoaded, false); explosionAudioElement.removeEventListener("canplaythrough", assetLoaded, false); victoryAudioElement.removeEventListener("canplaythrough", assetLoaded, false); musicTrackElement.removeEventListener("canplaythrough", assetLoaded, false); gameState = GAME_STATE_INIT; } } </code></pre> <p>If you take a look at the console output, you'll see that all of the sounds begin loading (particularly explode1.mp3) but <em>don't</em> necessarily finish and call <code>assetLoaded</code>...</p> <p>UPDATE:<br> It seems to be the consensus is that I should <em>not</em> be using mp3 (incidentally, I'm already using mp3, AAC, AND ogg, but defaulting to mp3), and also that I should use the Web Audio API. These are both welcome pieces of input, and I will make the necessary changes. However, I <em>still</em> don't have an answer to the original question, which is, "Why does one particular sound not load reliably on desktop while the others load with no problem?" Anybody wanna take a crack at that one? Or is the answer going to be something like, "These things are highly unpredictable, and there's no way to fix it except by switching to a more dependable methodology, like Web Audio API"?</p> <p>UDATE:<br> Here's an excerpt from my <code>app.yaml</code> file, which, I gather, helps GAE setup the server.</p> <pre><code>- url: /(.*\.(mp3|ogg|wav)) static_files: \1 upload: (.*\.(mp3|ogg|wav)) </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsamson
    1. USsamson
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COAs to why none of the sounds work on mobile Safari, Apple doesn't allow audio to start playing automatically. See http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW4
      singulars
      1. POHTML5 MP3 <audio> not loading correctly
      1. USJoshua Dwire
    2. COYikes. How do HTML5 games usually handle this? This sound is FX, triggered by game state. I'm not going to expose a player window to the user just so I can load my sound effects...
      singulars
      1. POHTML5 MP3 <audio> not loading correctly
      1. USsamson
    3. COIn any case, that doesn't address the behavior on Safari on other desktop machines, which is my main concern.
      singulars
      1. POHTML5 MP3 <audio> not loading correctly
      1. USsamson
 

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