Overcoming media playback concerns

ionic-v1
1

For a while now, I’ve been eying Ionic as an alternative to building a native application. Everything looks solid, especially when compared to other HTML5/JavaScript frameworks. However, I have a few concerns, none of which have been addressed by the various demo applications.

Case in point: I received an email this morning highlighting SongHop, a clever little app that showcases new and popular music. I opened it, chose a category, and favorited several tracks. I then when to my profile and started playing back the songs in full. Up until this action, the application was snappy and truthfully, I didn’t know it was a hybrid app.

But when I backgrounded SongHop (just by pressing the home button on my iPhone 6), the music stuttered. This is something I’ve never encountered on a native app (unless it was playing high-res video). I also noticed that when the phone was locked, while audio continued to play, the artwork wasn’t displayed on the home screen.

To the creators: please understand that I’m not criticizing the application itself — but rather using it as an example of the framework’s limitations, as I see them.

So here are my questions. These are the only things that are preventing me from using Ionic for my application, and I would love some concise, honest answers.

Is there a way to make sure currently playing audio doesn’t stutter when the application is backgrounded or reactivated? If so, how, and why aren’t projects like SongHop (mind you, a featured application) employing these techniques?

Most native applications have the ability to display the media title, artist, and artwork on the lock screen. Is this functionality possible with Ionic?

Outside of the examples above (which I would like to see fixed, or be pointed to a technique to resolve them), I also haven’t seen many applications that use Ionic on the iPad. Is there a way to create universal applications for larger screens?

All of these issues are show-stoppers for me. If I can find a way to handle these cases with Ionic, I’ll be very happy. (I’m willing to live on the bleeding edge, if these are concerns that have been fixed in master or nightly releases.) Otherwise, I’m afraid it’s the native path for me.

2

Background audio is achieved through a Cordova plugin. All these concerns can certainly be addressed through using the right plugin or creating your own.

In the end, would you rather write a little bit of logic to call to the OS’s background audio API in Obj-C or Swift and do the rest in Ionic and have most of your app immediately work in Android; or do it all native, taking much longer and having to start from scratch when you want to work on an Android version?

Depending on who you are as a developer and what languages and technologies your fluent in, your answer to that might very well be to go native, but for most, hybrid’s the right choice.

3

So everything I mentioned including the stuttering audio and artwork is something I could fix by writing a bit of Swift?

4

Yeah, through a Cordova plugin, anything native can do, hybrid can do. I think most people would appreciate using Ionic or something like it to build most of their app and then only use native for a few small parts that communicate with the OS’s APIs.

For SongHop for example, they could pass a URL or path to the album art and update the plugin they’re using to provide that artwork along with the song info to the OS. Hope they do, but I still think it’s a pretty cool app either way.

The takeaway though is that a Cordova plugin is a means of calling a native method you or someone else has built from JS. Once you’re on the native side, anything a native app can do, so can your hybrid app, because it is native at that point.

There’s quite a few plugins already created and there’s even a project that makes them all “angular-ey”. http://ngcordova.com/

5

Not sure where you saw this. I used the app for some time and wasn’t able to make it stutter.

Not sure why this is something you’d need since the songs only last about 30-secs, but you can do this with a cordova pluin, as @perry has mentioned

Remember, this is a webview, so css media queries are you friends here.

6

The stuttering happened when you would favorite a track, go to your profile and play it — then, while it was playing, close and open the app.