Tutorial: Audio

Course Schedule

This tutorial may be completed individually or in teams of at most 2. You can partner differently for each tutorial.

In this tutorial, we’ll add audio messaging to Chatter.

The course back-end server mada.eecs.umich.edu is not available for this tutorial.

Expected behavior

Posting a new chatt with audio:

Objectives

To explore more extensively the use of the reactive framework in UI/UX design. Learn usage of MediaPlayer and MediaRecorder on Android and the corresponding AVAudioPlayer and AVAudioRecorder on iOS.

APIs and protocol handshakes

To support posting and retrieving audio data, we add two APIs to Chatter. These are simply modified postchatt and getchatts APIs to transport audio data:

• postaudio: uses HTTP POST to post a chatt as a JSON object with optional audio data, as described below.
• getaudio: uses HTTP GET to query the database and return all posted chatts, with optional audio, as described below.

Using this syntax:

url-endpoint
-> request: data sent to Server
<- response: data sent to Client

The protocol handshakes consist of:

/postaudio
-> HTTP POST { username, message, optional audio }
<- {} 200 OK

/getaudio
-> HTTP GET {}
<- [ array of chatts with optional audio ] 200 OK

Modified Chatter API data formats

As in previous tutorials, the /getaudio retrieval API returns all posted chatts in the form of a JSON Array of string arrays. In addition to name, message, id, and timestamp, each string array now carries an additional base64-encoded audio clip. If there is no audio data, the corresponding value must be JSON NULL.

[
  ["uniqname0", "message0", "id0", "timestamp0", "base64-encoded audio0"],
  ["uniqname1", "message1", "id1", "timestamp1", "base64-encoded audio1"], 
  ... 
]

To post a chatt with audio data, the client correspondingly sends a JSON object with keys name, message, and audio, where the value for key audio is a base64-encoded string. For example:

{	
   "name": "YOUR_UNIQNAME",	
   "message": "Hello world!",	
   "audio": "<base64-encoded audio>"
}

In terms of testing, unfortunately there’s no practical way to include a base64-encoded sample audio string, nor a way to play it back without a front-end to decode it.

Specifications

You must first upgrade one of the alternative back-end servers:

• Audio Back End

then one of the front ends:

• Audio Compose
• Audio SwiftUI