Inspiration

With Coronavirus shifting our "normals" like never before, we have started missing our daily schedules - how so much we hated it before. To bring back that feel HRs around the world started exploring methodologies, to make their employees feel at home, err, office. Say hi to "ourofficeis.online" (We intentionally didn't name it "myofficeis.online" because HRs feel to foster the growth of unity). Open the tab in chrome, click the play play button, pin the tab and forget it! You are back in the office!

What it does

Our Office Is Online reminds you of your beloved Office. All the staplers punching, printers signifying the high life - everything you missed (or hated) is back, as audio!

How I built it

I first started with the project on codepen, quickly prototyping with Pug and SCSS. To host it for free, I installed firebase-cli and set up the hosting.

Challenges I ran into

The audio file was extremely large (50mb) - so loading it all together and then starting the playback wasn't a good option. To resolver this we used Howler - an audio library for modern web. Howler gave us a configuration option to use HTML5 Audio API that lets us play audio before completely loading it.

But it presented it's own issue - AudioContext API was not allowed to start - this took some time to get around with.

Accomplishments that I'm proud of

First site to have audio :e: Gonna add spatial sound to it next.

What I learned

How to use audio library, play multiple tracks at once and have a 3D Spatial sound effect.

What's next for Our Office Is Online

Making it more real - by adding more sarcastic text, conversations understandable - and finally giving users an option to select what their office sounds like - and present it that way. Pets are allowed in you office? Gotcha - you'll hear them too.

Share this project:

Updates