Audio Diary – Interactive Website – for Desktop

Welcome to the Audio Diary where you get to share your thoughts during hard times. Inspired by my favorite quote by Marcus Aurelius: “All is as thinking makes it so.” It celebrates anonymity and does not save your thoughts.

I hope through this, you can start a conversation with yourself and look within. What is something that we can adjust ourselves to? What are some of your thoughts in their pure form? Maybe, this could be your personal sanctuary while exercising social distancing.

To see full website and play with the speech to text component, please open with Chrome here. You would have to change your microphone settings in Safari or Firefox (linked with steps to change the preference).

Follow my github for new projects here.

Background

We are undergoing the difficult time right now in 2020 since the outburst of the COVID-19. The global pandemic is causing so many distress in us. I have been keeping myself busy with movies, books, and cooking while conducting social distancing to prevent the spread of the virus for over two weeks now (today’s date is March 28th, 2020). Recently, I am revisiting the Meditations by Marcus Aurelius. This is book is his journals for himself to go through hard times. I find some of the quotes very relevent especially for the COVID-19 situation. I feel the urge to create something so that people can talk about their feelings.

Inspiration

The final project by Ashwita Palekar, my dearest friend.

Thought Process

Interaction Flow

  • Load the website.
  • Read the intro.
  • Speak out your thoughts.
  • Navigate to explore more features.
  • Save the visuals.

Process & Documentation

I started with using typing rather than registering audio through p5 speech since I thought it would be easier to have the whole structure. I was wrong.

It is quite different working with keys and audio texts. I did work with keyTyped and keyPressed functions, but when I wanted to try to type keys through input tag in the html, it didn’t work. Only when I comment the keyTyped section, I can type text in the input box.

trying to add inputs

Therefore, I used p5 speech library to recognize the spoken words and convert them into texts. I split the speech content into words and found the end letter to each word to assign the color of the shapes.

getting speech result in code and display

I wanted to add more layers therefore, I edited background color which changes according to the number of letters in one sentence. I also added four fonts to display the sentence depending on the mouse position. I also played with different shapes as below.

playing with different shapes. triangle shapes on a pink background with code

Design Elements

The most important part in terms of design is the pastel color palette. For the shapes, I used this palette, while for the background, I used this palette.

Libraries

This project is built with p5.js and p5.speech.js along with CSS, html and Javascript. I used p5 speech library to recognize the spoken words and convert them into texts. I split the speech content into words and found the end letter to each word to assign the color of the shapes.

Color

The background color is changed accordingly to the amount of letters in one sentence. I originally only had circles to be generated accordingly to the speech. I wanted to add layers to it. Thus, I created lines, triangles, and arcs.

Fonts

I also implement four types of fonts for the same reason: OswaldLiu Jian Mao CaoSpicy Rice, and Cairo. For the branding, I adapted the look of a typical sound spectrogram and simplified it into the logo we see here. The style for the Audio Diary is minimalistic yet welcoming. In order to make it more welcoming, I used the font Libre Baskerville

Features

In order to make the interaction smooth, I added some features such as footer and header inside the canvas to prompt the users to explore more.

Challenges & Struggles

Ideally, I would want each circle to have one color rather than a group of circle bearing the same color. I am still trying to figure out how to make it happen.

Questions

  1. How to make sure the mobile users can play with it?
  2. How to make each circle generated to bear different colors rather than randomly assigned?

Next Step

I am making other websites in the meantime to respond to hard times like the current pandemic of COVID-19. Hopefully, I will build a collection of these interactive websites together to alleviate the stress.

Published by Yiting Liu

NYU ITP '21

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: