Sound&Vision: beluister én bekijk SoundCloud files

Sound&Vision: beluister én bekijk SoundCloud files

Uitleg

Al heel lang liep ik met het idee om een bandposter te maken waar de naam van de band bewoog op het ritme van de muziek van de band die je hoorde. Aangezien SoundCloud een goede API heeft besloot ik SoundCloud als basis te nemen. Via de browser kun je informatie over het volume van de muziek die gespeeld wordt krijgen. Een aantal programmeurs heeft daar al programma’s voor geschreven om die ‘volume informatie’ te tonen in een staafdiagram of andere soort van grafieken. De SoundCloud Music Visualizer van Johan Karlsson heb ik als uitgangspunt genomen van de Sound&Vision app.

Helaas bleek het dat deze ‘volume informatie’ niet werkelijk de lage, hoge en alle tussenliggende frequenties weer kon geven alleen een soort van totaalvolume van die frequenties. Als de volume informatie per frequenties zou worden doorgegeven zou je ook onderdelen alleen kunnen laten bewegen bij het afspelen van een bepaalde frequentie maar dat kan dus helaas niet.

Werking

Als je de website ververst zie je een van de door mij 6 ingestelde SoundCloud files. Files die ik meer heb gekozen voor de afbeeldingen dan voor de muziek.

Deze webpagina haalt via de SoundCloud API alle informatie van het nummer dat gespeeld wordt uit de SoundCloud database: De muziek (joh….), de naam van de artiest, de naam van de track, de afbeelding van de artiest (wordt als achtergrond van de browser getoond) en de afbeelding die bij het nummer hoort die als achtergrond van de ‘poster’ getoond wordt.

De kleur van de bandnaam en de naam van de track wordt random gekozen.

Buiten de 6 ingestelde nummers kun je elke track link van SoundCloud kopiëren en in de balk boven de poster plakken.
Als je op “Play Track” klikt hoor je het nummer en verschijnen automatisch de afbeeldingen en de naam van de artiest en de naam van de track.

Deze app is enigzins responsive maar werkt niet goed op je tablet of mobiele telefoon. Dat is niet omdat ik dat niet kon maken maar omdat er best wel veel rekenwerk komt kijken in de browser bij het groter en kleiner maken van de letters en tablets en mobieletelefoons dat meestal niet aan kunnen.

Gebruikte techniek

HTML5 / CSS3 / JavaScript / SoundCloud API / SoundCloud Music Visualizer van Johan Karlsson
Met dank aan Johan Wiegel van PHP-Globe

Link naar website

http://brandnewfresh.com/theLab/sound&vision/

Meer informatie

Heeft u interesse in deze of een van onze andere diensten?
Neem dan contact met ons op. Bel +31(0)10 – 3400 355 of mail naar quin@brandnewfresh.com.