Idee
Ben je ooit naar een feest geweest en hoorde je een geweldig nummer, maar Shazam en/of Soundhound en dergelijke konden de id gewoon niet vinden? Dit overkomt mij vaak; omdat er te veel lawaai is, de muziek te hard staat of het nummer nog niet in de database van die audioherkenningsdiensten zit.
Nou, deze app creëert een community waar mensen elkaar kunnen helpen om die supergeweldige nummers te identificeren. Wanneer Shazam je weer eens in de steek laat, open dan gewoon TrackID? en neem een fragment van de muziek op. Na het opnemen kun je wat extra informatie toevoegen die kan helpen bij de identificatie, zoals de uitvoerende (artiest/dj), het evenement en misschien een nummer dat je herkent (en dit nummer dat je plaatst moet een remix zijn?).
Wanneer geplaatst, kunnen communityleden een suggestie doen door een Soundcloud-track of Youtube-filmpje in te sluiten. Of ze kunnen gewoon discussiëren met andere leden over welk nummer het zou kunnen zijn. Wanneer andere leden geen idee hebben welk nummer het is, maar ze vinden het wel leuk, kunnen ze een post volgen en voor/tegen stemmen op suggesties van andere leden.
Technologieën
Ionic
Ionic is een hybride app-ontwikkelkit, gebouwd op Phonegap en Angular. Dit framework wordt gebruikt om de hybride app te maken die is ontwikkeld en getest op Android (door gebrek aan een iOS-ontwikkelaarssleutel). Theoretisch zou de app gewoon moeten werken op iOS, maar ik heb al ervaren dat PhoneGap-plugins niet altijd hetzelfde reageren op verschillende besturingssystemen en versies van besturingssystemen. De standaard Ionic-skin is aangepast met behulp van SASS (een CSS-preprocessor). Ionic ondersteunt het gebruik van de microfoon niet standaard, maar omdat het op Phonegap is gebouwd, kan een plugin worden toegevoegd waardoor toegang tot de microfoon mogelijk wordt. Deze app maakt gebruik van de Ionic Push-service (die in bèta is) voor het registreren en verzenden van meldingen naar gebruikers.
Parse.com
Parse.com is een uitgefaseerde Backend-as-a-Service (uitgefaseerd op 28 januari 2017). Een Backend-as-a-Service heeft als doel een backend te leveren voor een app zonder (veel) backendcode te schrijven. Omdat het een nieuw concept voor mij was, leek het me leuk om dit eens uit te proberen! De BaaS verwerkt de data die door onze app wordt gegenereerd, zoals de postmetadata, de reacties op een post, gebruikersdata, enzovoort.
Amazon Web Services
Voor het opslaan van de audio die wordt opgenomen, wordt Amazon Simple Storage Service gebruikt. De upload gebeurt rechtstreeks vanuit de app naar AWS S3. Om het uploaden veilig te maken, genereert een API die ik met Node heb gebouwd de vereiste handtekening die wordt gebruikt door AWS S3 om de upload te authenticeren.
Resultaat
De volgende afbeeldingen zijn allemaal screenshots van de app
Dit is de homepagina waarop alle nieuwste fragmenten kunnen worden gezien en beluisterd
De volgende screenshot is het zijmenu met gebruikersinfo. Hier kan de gebruiker zijn reputatiescore vinden (gebaseerd op zijn suggesties). Ook worden hier zijn eigen fragmenten en zijn gebookmarkte fragmenten getoond.
De volgende screenshots tonen een detail van een fragment met suggesties en reacties. De mediaspeler die in reacties wordt getoond, is een suggestie die kan worden beluisterd. LET OP: dit is in bèta
Dit is de modal waarin gezocht kan worden op youtube en soundcloud naar een tracksuggestie.
LET OP: dit is ook in bèta
Hier wordt de suggestie geplaatst en ontvangt de gebruiker een pushmelding die aangeeft dat er een suggestie is gedaan.
Conclusie
Het bouwen van deze app was leuk! Maar ik onderschatte de hoeveelheid tijd die het ontwikkelen van de bestandsuploadafhandeling zou kosten. Ook ontdekken hoe Parse.com werkt was soms een PITA (pain in the ass). Maar ik heb deze app in 3 maanden gebouwd en kan tevreden zijn over het (bèta)resultaat en alle kennis die ik heb opgedaan tijdens het bouwen van deze app (zoals het gebruik van pushmeldingen, het gebruik van een Backend-as-a-Service, het debuggen van een hybride app en het gebruik van Phonegap-plugins)