Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

An Interactive SVG Icon

Treehouse's latest forum contest got me interested in SVG and making it interactive.

When I realised you could embed JavaScript into SVG files I started fiddling around with different ideas. I decided I'd make icons that actually do something.

I was always interested in synthesizers. Well, more interested in playing them than how they were built, but still. I wanted to do a series of interactive synth icons.

Well, this is my first one. It's still a work in progress. I plan on making 5 or 6 of these here.

Now that first one actually does something, I thought I'd share.

Feedback/comments/improvements/suggestions are very much welcome.

Oh, and this is the synth I based the icon on.

Hayden Taylor
Hayden Taylor
5,076 Points

Thats frickin awesome. I had no idea you could do that. Thanks

Hayden Taylor
Hayden Taylor
5,076 Points

I also forked it... because it was so awesome

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

Yeah, it came as a surprise to me, as well. My initial idea was a calculator icon that could actual do math. But then I started thinking about the Web Audio API which allows you to create oscillators, gain nodes, delay nodes, filters and so on, and I figured I'd make synths.

Oh, I'd appreciate it if you could star the repository, too, if you like it.

Hayden Taylor
Hayden Taylor
5,076 Points

done! yea the audio is a much cooler idea :p

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

Cheers! Next, I'm doing Minimoog. :)

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

That's pretty cool, I went on codepen to see other examples of people using the Web Audio API.

I found a synthesizer http://codepen.io/lukeyphills/pen/CEfHx it might give you some ideas for future pens.

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

Oh that's a nice one!

I'll probably do some more work on the tone of mine. The idea is to eventually match the sounds of the synth icons to something at least partially similar to what the real thing would produce.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I noticed on the qwerty row that q, r, i and [ are all dead keys.

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

Well, yes. That row only plays the black keys. The idea is to match a physical musical keyboard, one row representing the white keys, and the row above it the black keys. So only some of the keys in the upper row are in use, as they match positions with a real keyboard.

James Barnett
James Barnett
39,199 Points

Maybe update the instructions on the pen to help out us poor musically challenged folks that stumble across it.