The Audio Diary is a website that allows people to express their feelings. The website converts the speech into visual representation with geometric shapes following the pastel color palette. You can try it here.
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.
Clone the repo.
To make a good readme the following prerequisites are necessary:
- A text editor - preferably VS Code
- An understanding of p5.js and p5.speech library.
For this particular project, there are no specific installation requirements.
This project is hosted on Github and deployed on Glitch.
- Yiting Liu -- NYU ITP 2020 -- NYU ITP
This project is registered under MIT license.
I built this website using p5.js and p5.speech.js. I first started with p5 web editor and then downloaded to my project. Later, I enhanced the aesthetics and added details in my html and css.
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.
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.
- 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?
- Why the CSS effect of my #textbox does not show in my localhost? It shows in the p5 web editor.
- How come some browsers do not support the microphone input? How to make sure it is solved? How to allow mobile users to play on the phone?
- How can I deploy to Heroku? Do I have to have server.js and node to do so?
- I don't need to have a server.js to delopy to Heroku. The simplest way to deploy to Heroku is using
npm initand then we have to install http-sever
npm install --save http-severand then in the package.json file, under "scripts", add the following line:
"start": "http-server ./ -p $PORT"And it worked! It was successfully deployed to Heroku and you can play it here.
-
Glitch trys to find index.html by defalt. So if I were to create a folder of the html files, I can put index.html out and have it as the root of the folders of other html files. Or Cassie has also mentioned of using Github pages which require special repo and add a custom domain of the website.
-
During the office hour with Cassie, the p5 speech library I used in the website only supports browers: Chrome and Edge, mobile phones: Chrome for Android and Android webview. However, when I tried to open the web page on my Google Pixel through Chorme, it still didn't work. So I guess this is the end of me trying to satisfy users through all platforms. reference here
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.