Ken Garff Project Listen Templates

Axis41 for Ken Garff

Templates for a website dedicated to listening, music, and sounds around us

This project at Axis41 was my first to develop as the primary developer. It was a two-phase project, and I did the first phase. There was a lot of different things that I hadn't done before, so I gained a lot of experience on the project. One of the new things I did was to get a movie to play in the background on the home page. You (obviously) can't tell in the screenshot below, but on desktops there is a video playing in the background. It was good experience to learn how to best play that in the background but still have other things going on on the page above the video.

This site was also fully responsive, which made it a little more difficult because a large majority of the site is dealing with videos that the client uploaded to WordPress. So in the design and implementation it was important to make it user friendly while playing the videos.

The last part that I worked on was the implementation of what the client called the Sound Lab. Basically it was a music player with 25 different looping tracks. The user can choose up to 5 of the tracks to make their own sound. I used the Web Audio API to get the sounds to loop endlessly. This tutorial helped me getting the sounds to loop properly, and I used it to set up most of the functionality for our site. On top of that tutorial I added pause and resume functionality. That tutorial, though, was really helpful to get everything set up.

This project was a fun one because it stretched me past what I knew how to do before the project. I went from beginning to end with setting up the project, learning how to set up the HTML and CSS so that it was easy to reuse throughout multiple pages, and then of course learning to use the Web Audio API.

Screenshots