TrackID?-app

Project logo
Project logo

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 logo
Ionic logo

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 logo
Parse.com logo

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 logo
Amazon web services logo

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

Home page
Home page

Home page
Home page

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.

Side menu
Side menu

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

Detail of a post
Detail of a post

Detail of a post
Detail of a post

This is the modal where there can be searched on youtube and soundcloud for a track suggestion.

NOTE: this is also in bèta

Response modal
Response modal

Response modal
Response modal

Response modal
Response modal

Here the suggestion is posted and the user receives a Push notification which notifies there has been a suggestion made.

A posted suggestion
A posted suggestion

Example of a push notification
Example of a push notification

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)