Moods, Tutorials, Videos

Flex mobile and music apps

7 Comments 19 January 2012

Flex mobile and music apps

Flash (and then Flex) has always been the first choice technology for streaming audio content. I had the chance to work on a very cool mobile application for Radio X-Track. In this article, I’ll showcase this mobile app and share with you some tips on developping this type of application. As I was developing the Radio X-Track mobile apps, Christophe Keromen presented to me another Flex mobile app developed for Mioozic, which I’ll also cover in this article. Lastly, I’ll end by presenting a very cool Flex mobile app named “What’s that track?”, a multiplayer music quiz game.

Radio X-Track

UI considerations

Radio X-Track is a great project led by true music lovers. DJs, painters, actresses and sound designers work together to publish creative playlists of music, covering various styles and  stimulating your eyes with massive paintings. The web radio is also a place for networking with music lovers. Once logged-in with your Facebook account, you can start chatting directly on the website. This arty space is directed by X-Track, a famous sound design studio in France. You can visit the web radio here: http://radio.x-track.net/EN/

The development of the mobile application was challenging as the web radio is a Flash application connected to FMS. Thanks to the recent updates of Adobe AIR, I’ve been able to use Flex to stream the playlists on smartphones and tablets. First, I’ve decided to use my adaptive layout technique to code one UI and target both mobile and tablet screens. Here is a video that explains the trick. I’m playing with two view navigators that dynamically adapt their dimensions and their coordinates at runtime, depending on the screen resolution and the screen orientation.

That’s why on Android, you have a very simple user experience. The first view is the list of DJs, the second view displays a scrollable picture, streams the playlist and displays the title of the song.

Here is the link to the Android application:

https://market.android.com/details?id=air.com.riagora.Xtrack

With Flex, you code one project and then can publish it on both Android and iOS. So I submitted this application to Apple.

The App Store reviewers rejected the initial application for UI reasons. They told me that displaying a list and then a view could be done in the browser, and that it doesn’t justify the development of an application. They wanted me to develop the application using HTML5… well… live audio… html5… I had to consider a new strategy and worked on a totally different UI. I started studying the UI patterns of approved radio application and ended up with a new user experience. I’ve also added some features such as a twitter feed and the biographies of the artists. The application has been directly approved by Apple and is now available for iPhone and iPad users.

Here is the link to the iOS application:

http://itunes.apple.com/fr/app/radio-x-track/id467964868?mt=8

 

Some technical tips to manage audio content

As the music is streamed by FMS, you can use the classic NetConnection and NetStream object of the Flash API. When the user wants to hear another playlist, I kill the current NetStream object and create a new one (I keep in memory the NetConnection instance). FMS fires a RTMP message every time a new song is streamed. The client catches the message and displays the title of the song on the screen. The main challenge was to mimic the behavior of the iPod. If you shutdown the screen of your iPhone, or if you switch to another application, the radio is still supposed to stream audio. AIR 3 introduced a new feature to enable this behavior. At the end of the application descriptor of your Flex mobile application, you have a dedicated section for iPhone settings. You can set iOS keys such as UIApplicationExistsOnSuspend. All the iOS settings for Adobe AIR are listed on this page. In this case, I’m setting the UIBackgroundModes key to audio.

<iPhone>
        <InfoAdditions><![CDATA[
			<key>UIDeviceFamily</key>
			<array>
				<string>1</string>
 
			</array>
			<key>UIBackgroundModes</key>
			<array>
				<string>audio</string>
			</array>
		]]></InfoAdditions>
        <requestedDisplayResolution>high</requestedDisplayResolution>
</iPhone>

Unfortunately, it won’t display the “play” icon in the status bar of iOS. I guess it would require the development of a native extension. Radio X-Track is a free application. Enjoy !

Mioozic

Mioozic is also a Flex mobile application available on both Android and iOS. You start by choosing a theme or a category, and it will start streaming music on your device. This Flex application has been developed by Samir Moussouni (www.tezqa.com). It’s a great example of a high-performance Flex application running on smartphones.

Mioozic on Android : https://market.android.com/details?id=air.netrix.air.mioozic

Mioozix on the app store: http://itunes.apple.com/fr/app/mioozic/id479503574?mt=8

What’s that track

This game developed by Orange Labs and Deezer is also a very cool Flex mobile application. It’s a quiz game. You can play alone or with friends. The goal is very basic: hear a song, tap the screen if you think that you know the artist, and select the correct artist in a list of four. It’s a very cool game with a nice 70s UI. It’s already a popular app on Android (only). Have fun.

What’s that track on Android: https://market.android.com/details?id=air.com.orange.labs.whatsthattrack&hl=fr

 

Post to Twitter

Your Comments

7 Comments so far

  1. JCLang says:

    Thx Michaël, great post.
    And thx for the very interesting experience feedback about iOS dev.

    -Keep Flexing-

  2. Bernard says:

    Bonjour Michael,

    Je cherche désespérément une personne ressource chez Adobe pour m’aider à résoudre ce problème :

    https://bugbase.adobe.com/index.cfm?event=bug&id=3070987

    Fonctionne bien sur IOS et sur Air/PC-Mac mais pas sur Android.

    Vous auriez une idée ?

    Bernard

  3. faya says:

    why this article is in the “tutorial” category…? where is the tutorial ;-)

  4. In fact, though I worked on mioozic project as Technical Reference and architect, Samir Moussouni (www.tezqa.com) developed the mobile app with Flex.

  5. Nils says:

    Hi Michaël,

    Just a few remarks / questions about a Flex mobile application I am trying to finish / release. This application includes a “video” component that plays a live stream (rtmp) from a streaming server (image + sound), so it is not far from your music streaming application I guess :

    1) I have noticed that I have performance problems whith playing sound when I use Adobe Air 3.2RC on Android, problems that I didn’t have with Adobe Air 3.1. CPU goes to 50-100% all the time. Have you noticed these problems too with your live streaming music application ?

    2) I would like to know also if live streaming (rtmp) to iOS devices is OK in your experience, I mean did you have any problem with constraints (duration of the stream, volume in Kb of the stream, etc.)

    Thank you so much in advance for you answers,

    Nils

  6. raag1 says:

    Hi,
    gr8 job on the tutorials…I was wondering if flash builder supports building voice recognition software.I am working on one right now, and finding it rather hard.
    thnx

  7. Todd Leung says:

    Really cool! They’re the best i’m looking for.


Share your view

Post a comment

Who am I ?

I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
You can follow me on twitter: http://twitter.com/mchaize

Magazine

Follow us on Facebook

© 2014 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes