<aside> 🧠Navigation
The Social Network (burpworld.online)
</aside>
The framework for creating sound based interfaces was the first step in this journey. I was pretty much set on using a tape recorder as the basis of the interface so I worked around that limitation, microphone in, speaker out, three buttons in, and a slider with continuous values. Ultimately I just wanted this to work on hacked tape recorders in the future.
Initial developments attempted to use Tone.js as the basis of the sonic UI elements, but ultimately the timeline-based workflows were not the right tools to create the style of audio playback that was required. Development shifted to a lower level scope, working directly with the Web Audio API and ultimately resulted in the creation of Jogg.js.
The goal of Jogg is to create an audio-based analogy to creating “views” in apps. In a typical app you might need a view to log in, a view to post, a view for your profile etc etc. Since the program flows that we’re creating don’t use visual assets you might find that some words have been changed to better represent the sonic nature of this framework.
Jogg.js is based on the principle that there are three types of sound that make up a Stage (the sound equivalent of a “view”, more on this later).
Types of sounds that exist together but manifest in different ways. By have these three classes of audio we cover most of the use cases that we need for different kinds of playback. You would simply need one instance of each to have a fully functional app.
Plays continuously on loop
→ signifies mode
→ signifies standby/on state
→ is computer loading/waiting
→ moments of indefinite length
Plays spontaneously
→ button presses
→ page progression
→ success/error feedback
→ user prompts
Plays on a timeline with dynamically variable speed
→ user content
→ long UI elements
A stage is the sonic equivalent to a “view” in graphic user interfaces. All three elements together creates a Stage.
Stages can be linked together to create a user flow, just like wireframing in traditional UX design.
<aside> đź’ˇ I collected mock audio material to use, using my phone and a microphone. Thank you to Dror Margalit, Priyanka Makin, and Lily Crandall for being in my proximity that day.
</aside>