- Published on
Web Audio API AJAX
- Authors
- Name
- interglobalmedia
- @letsbsocial1
Web Audio API Meets a Sprinkle of Confetti: Confetti By Sound And Color
An Built with confetti-js, Math.random(), the Web Audio API, AJAX, and Node.js
How to use:
git clone
the repository to your desktop with the followingcommand
if usingSSH
:
git clone git@github.com:interglobalmedia/web-audio-api-ajax.git
If using HTTPS
:
git clone https://github.com/interglobalmedia/web-audio-api-ajax.git
User Story:
When the user clicks on the
Start
button, asong
starts playing, thebackground color
of the page changes color,confetti
starts falling, and thebackground color
andcolor
of theStart
button changes.When the user clicks on the
Stop
button, thesong
stops playing (paused), thebackground color
of the page changes color,confetti
starts falling, and thebackground color
andcolor
of theStop
button changes.When the user clicks on the
Refresh
button, everything goes back to its default state. Thebackground color
of the page goes back towhite
, theconfetti
disappears, and thebackground color
of thebuttons
reverts to their default states ofwhite
, and thecolor
of the buttons reverts to their default states of ofblack
.
Tools/Packages Used:
npm
npm
packagenode-sass
to enable usingSass
for the project stylingnpm
packagegh-pages
to enable theautomatic deployment
of the application togh-pages
.cdnjs
ofconfetti-js
npm package which automatically generates an animatedconfetti
effect on the page.The
Web Audio API
, which is responsible for the generation of the music.AJAX
(Asynchronous JavaScript and XML
), to make a request to the (local)Audio1
file in the form of anarraybuffer
, which is decoded onpage load
.
Scripts:
npm run scss
: watches for changes in styles/scss/main.scss
and outputs them into styles/css/main.css
.
npm run clean
: removes the old dist
folder and replaces it with a new one containing latest changes.
npm run build
: creates a new dist
build.
npm run deploy
: deploys the contents of the dist
folder to gh-pages
.
Project Includes
ajax
, babel 7
, buffer
, canvas 2D
, cdnjs
, code refactor
, confettijs
, eslint 8
, gh-pages
, modern javascript
, node sass
, npm
, prettier
, random colors
, scripts
, web audio api
, webpack 5
, workflow refactor