Utilizing 300+ AI Generated Voice Samples

Problem

Client was rolling out a new major category of products and needed a full build out of content on their existing site. The primary focus was incorporating AI generated voice for each of the 4 "Fuzzy Friends."

Solution

From flat design I built out the CPT structure needed for the content and coded the archive and single pages. I also structured the import of over 300 AI generated voice samples and linked them to their appropriate "Fuzzy Friend".

Highlights

Take a closer look at the specifics of the functionality developed for Playground Grass

Custom Accordion

The inclusion of text heavy "social stories" for each "Fuzzy Friend" presented a problem; there was too much text on screen making it difficult and confusing to navigate. The solution was to place each "social story" inside of an accordion dropdown box that could be opened when clicked. The click will also close any previously opened boxes, ensuring the page does not become too long. All of this functionality was built with custom JavaScript.

Vertical Slider

The desire was to keep the page fun and interesting while still providing helpful content. This custom built vertical slider with an indicator track on the right allowed for the page to keep a consistent flow while still packing in a good amount of content.

Onpage Element Update

When clicking the "See Another" button, it changes which card is being displayed without having to reload the page. This is done through both custom created PHP and JavaScript functions.

Integrating AI Voices for Playback

The main feature of this project was the AI generated voices that were created to be unique to each of the four "Fuzzy Friends". Every "Fuzzy Friend" had a differnt voice file for each day of the year. Implementation required consoladating 400+ short audio files into the site, writing Javascript code that that would dynamically pull from the list of audio files for each "Fuzzy Friend", allow playback, and update the audio each day.

Playground Grass