Project Update

Building a Better Music App: Part 1


In a recent lab at the Flatiron School, we were asked to make a a basic jukebox app. To be honest, it wasn’t anything super impressive. The app simply played a few built in mp3 files that we imported into our Xcode project. Super basic. But it got me curious as to what I could do almost three weeks in at Flatiron. After quick Google search, I came across this incredible iOS Music app concept by Brye Kobayashi. I love the overall design, and the new functionalities he mentioned look super useful. After emailing Brye to get his permission yesterday, I decided to start on trying to make this prototype a reality.


While I’m still a (far) ways off from my final goal, I’ve already managed to put together two basic prototypes that display and play all of the local music on my iPhone. The first draft (pictured right) I managed to do in a few hours last night. And while it’s definitely not the most visually appealing music app out there (not by a long shot), it was a great introduction to the MediaPlayer and AVFoundation frameworks–both of which I’ve found surprisingly intuitive–as well as extra practice in TableViews. Unfortunately the app always started playing on startup, and scrubbing bar at the top wasn’t working and no matter what example I pulled from I couldn’t get it to work. it seems like because the AVFramework is so massive everyone has a totally different answer.

That being said, after longish night’s sleep, and another day to read and play around with people samples I managed to completely overhaul my initial attempt (screenshot below), and turn it into something much more polished, not only graphically, but organizationally. My initial code was all over the place, and so I started from scratch with this second version, paying more attention to comment everything I was doing and divide everything into separate methods. I’m planning to continue refining and refactoring sometime tomorrow night when I’ve had a small break, but I think as a whole the app is pretty decent for someone with three weeks of experience in Objective-C and iOS development.

IMG_0232While I haven’t had time to configure the volume slider at the bottom, I did manage to finally get the slider working with the following two chunks of code:

The most significant portion of this first block for me was this line:

this was a much cleaner way for me to pull the song length than I had been using in my initial attempts and let me track down what I believe was my mistake in version 1 (For some reason the maximum value of the slider wasn’t being set correctly, so every time I touched the slider and moved it even a little bit it would register so close to zero that the song would in essence start over).

Anyway, while NSNumbers aren’t necessarily the ideal form to work with when it comes to numerical values (as they’re objects requiring more conversions later in the method), they are still reasonably workable and very familiar to me which is always a huge plus. Furthermore, once I was able to pull the value as an NSNumber, it was much simpler to to math and assign time stamps to the various outlets on my view. Also, by doing all of this in in my cellForRowAtIndexPath: method, every time I select a new song all of the values are updated, so the slider value is reset, and works to scrub the new song.

The second chunk of code below while initially was more intimidating for me to look at is actually much simpler once I got a feel for it and did some research on blocks (thank you The first line __block AlbumViewController *weakSelf = self; simply makes a reference to self (as in self.) so that I can access it from the block a bit further down. The real magic however comes in the form of this method that I just managed to wrap my head around: addPeriodicTimeObserverForInterval:. Basically what it does is tell the application to run everything in the block periodically at a time interval of your choice, making it absurdly powerful for a media app. By tossing in every field I need to keep constantly updated, I get the scrubbing bar at the top of the app ticking in time with the song, as well as both values on it adjusting themselves on the fly. It’s super powerful, and I’m sure I’ll be using it a lot as I get deeper into the project:

Anyway, all in all I’m pretty happy with what I’ve managed to put together in less than 48 hours. I still need to get the all of the various buttons hooked up in version 2 (only the play/pause works at the moment) but I have a feeling that should be relatively straightforward. My goal is to get the entire interface wired up by the end of the weekend (with the exception of Airplay). If I can get fast forward, rewind, repeat, and randomize all working, I think I’ll be making really good time. That being said, it’s been a long week and I could really use the sleep so we’ll see what happens.

Also, a very sincere apology for what I’m sure is shoddy writing. It’s late, and my mind and eyes are numb.

Leave a Reply

Your email address will not be published. Required fields are marked *