Voortgang week 6 - Audio bij interactieve animatie

Vorige week schreef ik al in een bericht hoe ik audio toevoegde aan een timeline. Deze week heb ik een interactieve animatie gemaakt en hier audio aan toegevoegd.

Aanpak

Ik heb gewerkt aan de hand van dit voorbeeld: http://codepen.io/iamjoshellis/pen/KVdQqm 

Eerst heb ik een SVG-code gemaakt. Dit heb ik gedaan door een afbeelding te dowloaden en die te organiseren. Hiervoor heb ik alle elementen in de juiste laag bij elkaar gezet en deze lagen namen gegeven. In SublimeText heb ik de code overzichtlijk neergezet door alle groepen los van elkaar te zetten. Vervolgens heb ik geluiden van de piano opgezocht en gedownload. Deze mp3 bestanden heb ik omgezet naar ogg bestanden. Vervolgens heb ik alles samengevoegd in Sublime Text. 

Leerervaring

Voor elke toets heb je de volgende onderdelen nodig:

1. Een timelinevar: F1 = new TimelineLite();
2. Een variabele: var F4 = $("#F4")[0];
3. In de timeline een .call en .reverse: F1.call(playF4 .reverse();
4. Een function: function playF4() {F4.play();
5. Een click-function: $(document).on("click", "#F1key", function(){ F1.play();F1.restart();})

De variabele koppelt de audio vanuit HTML aan JS. In de timeline wordt de audio functie met opgehaald. Door een reverse toe te voegen kun je de toets meerdere keren aanslaan. In de function wordt de audio afgespeeld. Door de click-function wordt de juiste timeline afgespeeld wanneer je op een toets klikt. 

Ik heb in de timeline ook nog een stroke-color toegevoegd, zodat wanneer je op een toets klikt deze geel-omrand wordt. 

Resultaat

Het resultaat is een piano die je kunt bespelen. De toets krijgt een gele rand wanneer je er op klikt en de bijbehorende toon wordt afgespeeld. 

Dit is de JavaScript code van één van de toetsen. Voor elke toets zijn dezelfde elementen nodig. 

Bronnen

http://codepen.io/iamjoshellis/pen/KVdQqm

https://www.vecteezy.com/ 

https://www.freesound.org/people/Tesabob2001/packs/12995/