Skip to content

stephaniesimon/final_project

Repository files navigation

show+tell

show+tell is an interactive audio journal built by Stephanie Simon.

show+tell homepage

Technology Stack

d3, JavaScript, jQuery, HTML, CSS, Bootstrap, Python, Flask, Jinja, SQLAlchemy, SQLite, Amazon Web Services - S3 Buckets, boto

APIs

Recorder.js, HTML5 Web Audio

Background

Voice is an especially powerful and intimate way to communicate personality.

show+tell marries my interest in storytelling, podcasts, database work and front end technologies to create an interactive audio journal. A visually-compelling way to record, remember and share who you are, via voice.

Overview

The user registers or logs in (and can play with a cool Force Layout d3 vis).

Interesting personality questions are shown for the user to answer - sourced from Proust and various other sources. The user can skip through them until finding one they'd like to make a recording for.

show+tell profile

On the web interface, show+tell uses the Recorder.js and HTML5 Web Audio APIs to capture audio recordings.

After the audio file is created, the blob is sent to the server and converted into a WAV file. It's given a file name and stored in an Amazon S3 bucket.

When the user is ready to view their visualization, an in-memory csv file is created using StringIO and used by the d3.csv function to render the user's visualization.

show+tell vis

Recorded answers are represented by nodes. Nodes are color-coded by question category (legend displayed beneath vis) and their size is correlated to the size of the audio file (larger node = longer recording).

The music button toggles background music to create a more immersive experience, and the Tweet button enables sharing.

About

Hackbright final project - interactive audio journal (d3)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published