StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODynamically Created Audio Object not playing in Android Chrome browser
text
Body
copied!<p>I'm trying to write a RIA which can be used on both Mobile as well as desktop browsers. One main objective of this app is to play sounds. There could be X many (as of now, there are 150+)</p> <p>On a certain user action I want to create a new audio object, load a certain clip, and play it. Ideally, I'd create a new 'Audio' object, set the src wait for load then play. This works on various desktop browsers, however seems to fail on Android 4.2, Chrome and stock browsers.</p> <p>I've tried 4 different ways of including audio:</p> <ol> <li>Including (in html) just an audio block, have it load at runtime and calling .play(); This works however It means I must create 150+ audio blocks. (this works everywhere)</li> <li>Create a new instance of 'Audio' and dynamically setting the .src attribute, then on loadcomplete calling .play() (this seems to works only on desktop browsers, NOT on my mobile)</li> <li>Use jQuery to Create new audio tag, add to dom, wait for load then play (this seems to works only on desktop browsers, NOT on my mobile)</li> <li>Add Audio tags in html with telling it to not load, wait for user interaction, then load it, wait for it to get ready, then play (this works everywhere).</li> </ol> <p>So, the big question is, any idea why this isn't working?</p> <p>** Edit ** I know that only 1 file can be played at a time, and that is what I'm trying to do here. Project is (functionally) similar to a phone service, where you have 1 person record the numbers 0 - 9 , then it 'speaks' a phone number so '5'.'5'.'5'.'0'.'1'..... etc. So 1 audio stream out at a time is perfectly acceptable... It's just getting it to play which is the issue.</p> <p>As of right now, I have the following code, which can also be found <a href="http://andrewluly.com/tests/sound/" rel="noreferrer">here</a></p> <pre><code><!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> var $a1, $a2, $a3, $a4; $(document).ready( function(){ _setupVars(); _addListeners(); }) function _setupVars(){ $a1 = $( "#audio1"); $a2 = $( "#audio2"); $a3 = $( "#audio3"); $a4 = $( "#audio4"); } function _addListeners(){ $a1.click( _handleAudio1 ); $a2.click( _handleAudio2 ); $a3.click( _handleAudio3 ); $a4.click( _handleAudio4 ); } function _handleAudio1 (){ $("#america")[0].play(); } function _handleAudio2 (){ var a = new Audio(); $(a).on("canplay", function(){ a.play(); }) if(a.canPlayType("audio/mp3")) a.src = "audio/test2.mp3"; else if(a.canPlayType("audio/ogg")) a.src = "audio/test2.ogg"; } function _handleAudio3 (){ var $x = $('<audio id="says">'+ '<source src="audio/test3.mp3">'+ '<source src="audio/test3.ogg">'+ '</audio>'); $x.on("canplay", function(){ $x[0].play(); }) $("#audioCont").append($x); } function _handleAudio4(){ var $x =$("#cat"); $x.on("canplay", function(){ $x[0].play(); }) $x[0].load(); } </script> </head> <body> <input type="button" id="audio1" value="play Audio Tag"/><br /> <input type="button" id="audio2" value="play audio object"/><br /> <input type="button" id="audio3" value="play dynamic Audio Tag"/><br /> <input type="button" id="audio4" value="play load Audio Tag, then play"/><br /> <audio id="america"> <source src="audio/test1.mp3"> <source src="audio/test1.ogg"> </audio> <audio id="cat"> <source src="audio/test4.mp3"> <source src="audio/test4.ogg"> </audio> </body> </html> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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