Menu
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+)
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.
I've tried 4 different ways of including audio:
So, the big question is, any idea why this isn't working?
** 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.
As of right now, I 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>
901
Right now Chrome on Android there is an explicit need for the user to "invoke" playback via a gesture to play audio. There were concerns of overloading the mobile devices bandwidth or creating annoying popups that just play audio - which is one of the reasons why it is disabled by default.
We are looking at changing this, and if you are on Beta of Chrome on Android you can go to this link chrome://flags/#disable-gesture-requirement-for-media-playback and it will let you toggle this behavior. We are working on the issue and you can follow it on Bug 160536
59
Methods 1, 2 & 3 will not work on iOS. Unfortunately most mobile devices limit HTML5 audio to a single source playing at a time. iOS requires user interaction to initiate any media playback (onload doesn't count).
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
