Initially, we decided to make a project that included the sound of rain from the idea that there are apps that have nature sounds that help people sleep. However, we realized that if we only have a few buttons that played different sounds of nature then there would be almost no interaction. During the first week we had many different ideas revolving around the sound of rain, and in the end we settled for a project that more or less sets a mood as opposed to telling a particular story.
All of our audio tracks are from https://freesound.org/. Some of the tracks were edited to make them shorter.
The overall design of the website is really simple. We chose some simple icon designs to symbolize the sounds. The top left has a button that drops down when you hover over it which reveals more buttons. Each picture includes three audio tracks. The top left button can pause and play all the audio on that page. The button that are revealed when hovered over are the individual sounds that can also be individually paused and played. There are also buttons on both side of each picture that goes to the next one when clicked.
The main speaker button on each images is set as a function that would play or pause all of the three audio on that image.
For each individual audio to play or pause on click, I created a function that would toggle play them. All of the audio are set to loop.
One of the biggest problems that we encountered at first, was that the speaker button that played the all the audio would constantly play the audio from the first image. Later on we figured that it was because the all three of the speaker button onclick was set to the same name.
Some problems that we couldn’t figure out was how to make the audio from one image pause playing when it changes to the other images. Another problem is that if you individually pause each of the audio in the dropdown bar, the main speaker button would not change to the “unmute” image.
Overall, I’m happy with how our project turned out despite the nuances. I think if we had more time we could add more.