Idea
Ever went to a party and heard an awesome track but Shazam and/or Soundhound and such just couldn’t find the id? This happens to me often; because there’s to much noise, the music is too loud or the track isn’t yet in the database of those audio recognition services.
Well, this app creates a community where people can help each other with identifying those super awesome tracks. When once again Shazam let’s you down, just open TrackID? instead and record a fragment of the music. After recording you can add some additional info which can help identifying, like the performer (artist/dj), the event and maybe a song you recognize (and this track you’re posting must be a remix?).
When posted, community members can make a suggestion by embedding a Soundcloud track or Youtube movie. Or they can just discuss with other members which track it might be. When other members don’t have a clue which track it is but they like it, they can follow a post and up/down-vote suggestions made by other members.
Technologies
Ionic
Ionic is a hybrid app development kit, built on Phonegap and Angular. This framework is used to create the hybrid app which is developed and tested using Android (by lack of an iOS developer key). Theoretically the app should work just fine on iOS but I already experienced PhoneGap plugins don’t always react the same on different operating systems and operating system versions. The default Ionic skin is modified using SASS (a CSS preprocessor). Ionic doesn’t support using the mic by default but since it is build on Phonegap, a plugin can be added to which makes accessing the mic possible. This app is using Ionic Push service (which is in bèta) for registering and sending notifications to users.
Parse.com
Parse.com is a retired Backend-as-a-Service (retired on January 28th, 2017). A Backend-as-a-Service has the purpose of supplying a backend to an app without writing (much) backend code. Because it was a new concept for me I thought it would be fun to try this out! The BaaS will handle the data generated by our app like the post meta data, the comments on a post, user data, and so on.
Amazon Web Services
For storing the audio which is recorded, Amazon Simple Storage Service is used. The upload happens straight from the app to AWS S3. To make the uploading secure, an API I’ve built with Node generates the required signature which is used by the AWS S3 for authenticating the upload.
Result
The following images are all screenshots of the app
This is the home page where all latest fragments can be seen and listened to
The next screenshot is the user info side menu. Here the user can find his reputation score (based on his suggestions). Also here are his own fragments displayed and his bookmarked ones.
The next screenshots display a detail of a fragment with suggestions and comments. The media player displayed in comments, is a suggestion which can be listened to. NOTE: this is in bèta
This is the modal where there can be searched on youtube and soundcloud for a track suggestion.
NOTE: this is also in bèta
Here the suggestion is posted and the user receives a Push notification which notifies there has been a suggestion made.
Conclusion
Building this app was fun! But I underestimated the amount of time the file upload handling would take to develop. Also discovering how Parse.com works was sometimes a PITA (pain in the ass). But I built this app in 3 months and can be satisfied by the (bèta) result and all the knowledge I’ve gathered building this app (Like using push notifications, using a Backend-as-a-Service, debugging a hybrid app and using Phonegap plugins)