AppMobi HTML5 audio element problems on Iphone

AppMobi HTML5 audio element problems on Iphone

Hello everyone,

Today I get started in appmobi. I was developing a small example to deal with sounds.

I just needed to create a handler to play and stop many sounds. 

var audioOn = new Audio('sounds/11.mp3'); 
audioOn.play();

This code is working in the xdk simulator, also on android devices, but not in my Iphone 5.

The thing is, if I use <audio> tag it works on iphone, but I want to use javascript native api to deal with sounds and more.

I have been trying to deal with it with appmobi player library but it comes without controls to stop, resume etc, thats way I want to use native.

Here is part of javascript code :

<script type="text/javascript">
/* This function runs once the page is loaded, but appMobi is not yet active */
var init = function(){
var alarmButton = document.getElementById("alarmButton");
var on = false;
//var audioOn = new Audio('http://rpg.hamsterrepublic.com/wiki-images/3/3e/Heal8-Bit.ogg');

var audioOn = new Audio('sounds/11.mp3');
audioOn.addEventListener('ended', function() {
this.play();
}, false);

var but = function(){
alert("but");
alert(on);
alert(audioOn);

if(!on){
on = true;
audioOn.currentTime = 0;
audioOn.play();
}
else{
on = false;
audioOn.pause();
}
}
//alarmButton.addEventListener("click",but,false);
alarmButton.addEventListener("touchstart",but,false);
alarmButton.addEventListener("tap",but,false);

};

window.addEventListener("load",init,false);

/* This code prevents users from dragging the page */
var preventDefaultScroll = function(event) {
event.preventDefault();
window.scroll(0,0);
return false;
};
document.addEventListener('touchmove', preventDefaultScroll, false);

/* This code is used to run as soon as appMobi activates */
var onDeviceReady=function(){
//Size the display to 768px by 1024px
AppMobi.display.useViewport(768,1024);
//hide splash screen
AppMobi.device.hideSplashScreen();
};

document.addEventListener("appMobi.device.ready",onDeviceReady,false);

function echo(){
alert("clicked");
}

</script>

Thanks a lot 

 

8 posts / 0 nouveau(x)
Dernière contribution
Reportez-vous à notre Notice d'optimisation pour plus d'informations sur les choix et l'optimisation des performances dans les produits logiciels Intel.

Okay, it seems like in safari mobile, where the html5 apps are tested in iphone, you need a click event from the users to use the play() function.

Thats a already problem well know in safari.

But my question is, will it work once I compile, or it will be getting the safari problems?

It's supose to be a multi platform framework but know i have to deal with small things for iphone

hey

[javscript]

<script type="text/javascript">
/* This function runs once the page is loaded, but appMobi is not yet active */
var init = function(){
var alarmButton = document.getElementById("alarmButton");
var on = false;
//var audioOn = new Audio('http://rpg.hamsterrepublic.com/wiki-images/3/3e/Heal8-Bit.ogg');

var audioOn = new Audio('sounds/11.mp3'); 
audioOn.addEventListener('ended', function() {
this.play();
}, false);

var but = function(){
alert("but");
alert(on);
alert(audioOn);

if(!on){
on = true;
audioOn.currentTime = 0;
audioOn.play(); 
}
else{
on = false;
audioOn.pause(); 
}
}

[/javascript]

This is the code you've put up, but seeing thr braces position, the brace that starts in the var inti=function(){ , ends somewhere near the alarmButton.addEventListener("tap",but,false); }; 

in between this code, you are reinvoking the function name , function() here

var audioOn = new Audio('sounds/11.mp3'); 
audioOn.addEventListener('ended', function() {

this could lead to infinite looping in general,which wouldn't be shown on the safari mobile app, the script would just not run in this case, i would suggest you just change the way the code is working and avoid invoking the same function from inside a function. Also breakdown your code into simpler parts.

It's not at all important to get it right the first time. It's vitally important to get it right the last time.

Javascript can control your html5 audio element. it's pretty easy and there are a lot of resources explaining this, http://www.position-absolute.com/articles/introduction-to-the-html5-audio-tag-javascript-manipulation/ is a good starting guide on this

Hi JAVIER C,

please check this link : http://www.schillmania.com/projects/soundmanager2/

and Try this code :

// create "mySound"...

soundManager.createSound({ id: 'mySound', url: '/path/to/an.mp3' });

// ...and play it

soundManager.play('mySound');

These types of problem may be trouble shoot in www.w3schools.com/html5/

Thanks. I'll try

Hi, you should update your browser phone.

JudLup Luna

Laisser un commentaire

Veuillez ouvrir une session pour ajouter un commentaire. Pas encore membre ? Rejoignez-nous dès aujourd’hui