Audio playing for a mobile web app

You must Login before you can answer or comment on any questions.

Hi guys.

After 2 hours of browsing, I still can't find the right answer to this simple question :

what's the best approach to creating a music intensive mobile web application (using Titanium), if possible with such basic player functionalities as playing in the background (as an option) and a play progress bar?

Thank you all for your time and answers.

1 Answer

Titanium Mobile Web does not yet support Ti.Media.AudioPlayer or Ti.Media.Sound. We'll never support Ti.Media.MusicPlayer on Mobile Web because it's an iTunes thing.

The main reason we haven't made audio a higher priority is because audio on mobile browsers is poor. The most widely adopted solution is using the HTML5 Audio element, but this has serious limitations where you can only have one sound playing at a time and I believe you can't trigger a sound to autoplay (you cannot autoplay a video on mobile browsers). Apparently it also plays the audio fullscreen on Mobile Safari, but I haven't tested anything audio related.

What you want is the Web Audio API, but unfortunately it is only supported by Chrome and Firefox (both for desktop browsers and Android devices).

So, sadly, your only option is to manually code using the Web Audio API (in a big if(MobileWeb) block) and know that it will only work in 4 browsers... or wait a year or two and maybe Mobile Safari will support it.

— answered 9 months ago by Chris Barber
answer permalink
2 Comments

  • Thank you Chris for taking the time to answer my question.

    I also considered using an external JS / Jquery audio player like Speakker (www.speakker.com) or JPlayer (http://jplayer.org/).

    Now, I'm just discovering Titanium, so do you think this would be a good path in terms of Titanium integration (is it only doable? I couldn't find sample code for integrating an external JS or JQ component to a mobile web app), performance and respect of the Titanium app model in general ?

    I thank you in advance for your reply.

    — commented 9 months ago by frederic milliot

  • Mobile Web's require() is AMD compliant, so you can do something like: 

    require(['//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'], function () {
    // use jquery here
});
    This WILL NOT work on Android or iOS platforms. If you plan to support Android or iOS, then you'll have to wrap it in a if (Ti.Platform.osname == 'mobileweb') { }.

    — commented 9 months ago by Chris Barber

Your Answer

Think you can help? Login to answer this question!