As always, if you’re not familiar with this series and want to follow from the start, you can view the first part here.
It’s getting close, very close, and I’m excited. There’s just a few things left to do before I’ll be ready to submit the new Sencha Touch version to the app stores – replacing the old Java version. The only major things left to do are:
- Integrate geolocation to track how far a user has run as well as average speed
- Pretty up things here and there: app icons, splash screens, positioning etc.
- Integrate with Facebook so people can publish times to their news feed
- A few bugfixes (if you’re persistent enough you’ll manage to get two songs playing at once)
A big thanks to Phil Merrell for his SoundCloud tutorial series, it made this process a lot easier and also inspired some of the UI for RunTap (the currently playing track pop up is exactly what I needed). I won’t go too in depth into SoundCloud integration because Phil has done a far better job at explaining than I ever will, so if you’d like to do this yourself head on over there. I will however cover the general approach I took. Phil’s tutorial is very in depth and I didn’t need to use a lot of the stuff in there since the user doesn’t have that much control over the music. Of course, I needed to make it fit in with the way RunTap will work, which includes:
- Playing a track when the timer starts
- Pausing a track when the timer stops
- Swiping left or right to change songs
- Setting the ‘type’ of music
People have different tastes in music so naturally I want to allow them to set the type of music they’d like to listen to. I say ‘type’ because I don’t specifically mean genre. The best way I found to do this was allow them to include a search term for the type of music they would like to listen to. When using the SoundCloud API I simply use this as the search term for retrieving tracks. This returns about 50 tracks, then I choose a random one from the store to play using the following code:
var playTrack = tracksStore.getAt(Math.floor(Math.random()*(tracksStore.getCount()-1)));```
When a user swipes left or right I just trigger the same function and retrieve another random song. I'm not sure if this is a better approach, or whether I should allow sequential listening and allow the user to go back or forward a song. Thoughts?
Playing and pausing songs was surprisingly difficult. It seems as though sometimes songs just play when they want to and I still don't full understand why multiple songs were playing over each other. I was probably just missing something but after a lot of trial and error I managed to get it to behave (mostly) how I wanted it to, and songs started to play nicely and let each other play one at a time.
The only remaining issue I have with SoundCloud now seems to be a cross origin access one, but I can't seem to solve it. Whenever I install it onto my phone using PhoneGap Build, 'SC' fails to initialize which suggests the SoundCloud code was unable to be loaded. The code is loaded remotely from the SoundCloud servers so I figured the problem would be easily solved by including the following in my config.xml:
But, no luck unfortunately! There will likely be another post dedicated to going through implementing geolocation, and then perhaps one more to wrap up the series. In the meantime, let’s hope I can figure out the problems I’m having – feel free to leave your thoughts in the comments, including what you think of the app so far.
UPDATE: The final post in the series is now available here.