I am trying to write an RIA that can be used on both mobile and desktop browsers. One of the main goals of this application is to play sounds. There may be a lot of X (currently 150+ exist)
With a specific user action, I want to create a new audio object, download a specific clip and play it. Ideally, I would create a new “Audio” object, set src wait load, and then play it back. This works on different desktop browsers, but doesn't seem to work on Android 4.2, Chrome, and browsers.
I tried 4 different ways to turn on the sound:
- Turning on (in html) only an audio block, load it at runtime and call .play (); However, this does work. This means that I have to create 150+ sound blocks. (this works all over the place)
- Create a new instance of "Audio" and dynamically set the .src attribute and then on loadcomplete call.play () (it seems this only works on desktop browsers and not on my mobile device).
- Use jQuery to create a new sound tag, add to dom, wait for it to load, and then play it (it seems this only works on desktop browsers, not on my mobile phone).
- Add sound tags to html indicating that it does not load, wait for user interaction, then load it, wait until it is ready, and then play it (this works everywhere).
So the big question is: any idea why this is not working?
** Change ** I know that only 1 file can be played at a time, and this is what I'm trying to do here. The project is (functionally) similar to a telephone service, where you have 1 person writing down the numbers 0 - 9, then he “says” the phone number like “5”. '5'. '5'. '0'. '1' ..... etc. Thus, one audio stream at a time is perfectly acceptable ... This is just an attempt to reproduce what the problem is.
I currently have the following code, which can also be found here
<!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>
source share