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.
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.
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.
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: Oswald, Liu Jian Mao Cao, Spicy 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
- How to make sure the mobile users can play with it?
- 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.
