- Introduction
This is a final project which is a part of WDDM-113/114 of course 'Web Design & Development' at Humber College. The project titled 'Boombox' is aimed at providing the users with multiple functionalities in purview of the audio interactivity. The utilities included in this project include playing music, using voice recorder & playing various musical instruments, such as, piano & drum-kit.
- Technologies Used
In this project, the following technologies have been made use of -
- HTML 5 : HTML 5 has been used for laying down the structure of this project.
- CSS 3 : CSS 3 has been used to add styling & provide responsiveness to this project.
- JavaScript : JavaScript has been used to add interactivity with the WebAudio API & implementation of all the other vital functionalities.
- Core Functionalities
This project is aimed at providing 3 core functionalities, which are as following -
- Selecting & playing music from a list of songs.
- Audio recording, playback & downloading options.
- Playing musical instruments like piano & drumkit.
=> Music Playlist : This functionality provides user the utility to choose & play from a list of songs when he first arrives on the web page. Apart from that, there's a fixed music player at the page bottom, which facilitates the user to have audio controls throughout the page, such as, playing/pausing, stopping, muting/unmuting & playing previous/next song.
=> Voice Recorder : This functionality enables the user to record his own vocals, stop it whenever he wants & playback whatever he has recorded. On top of that, the user has the ability to download his freshly recorded music as well, which can help him to save his recordings locally.
=> Musical Instruments : This functionality provides the user with an ability to choose from 2 musical instruments to play with, i.e, piano & drumkit. There is a 17 keys piano, that the user can enjoy playing on the click of his mouse. The drumkit, on the other hand, has the option to play with both mouse click as well as through the keyboard.
- Extras
Apart from the implementation of audio functionalities, the following points have been incorporated into the project as well -
- Implementation of a sombre, visually interesting imagery into the project, that can capture the user interest immediately.
- Addition of a few animations & .gif files which make the project feel more lively.
- Implementation of event based styling such as, 'click' / 'hover', that can contribute to a better user experience.
- The project has been implemented with basic responsiveness, such that, the user can access it from his tablet & mobile as well.
- Usage of royalty-free music such that the project can steer clear of any copyright issues.
- Implementation of click based scrolling has been done such that, on click on any section in Navbar, the page would be scrolled down to the appropriate section. Also, there's a button on bottom right side of the page, that can take the user to the top of page whenever it is clicked. This can help in enhancing the navigation experience of the user.
- Performance
A major part of any utility based website is its performance. If the pages takes too much time to load, it may annoy the user & ultimately, the user may leave the website without even checking the utilities provided. Therefore, the basic performance of this project has been taken into due consideration.
Here are the performance indicators before the project was optimized -
As the metrics indicate, the projects had a fair performance. Here are the performance indicators after the project has been optimized -
As per the metrics, performance of the project jumped 27 points, which is evident from the reduced page loading time as well. For the performance test, Google Chrome's Lighthouse has been used in this project.
- How to run the project?
To run this project,
(locally)
- cd into the project's root folder
- Open index.html file with the browser of your choice.
(remotely)
Thank you.