Tutorial: Audio

DUE Thu, 10/16, 2 pm

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 backend 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 that accommodate audio:

• postaudio: uses HTTP POST to post a chatt with optional audio data as a JSON object, as described below.
• getaudio: uses HTTP GET to query the database and return all posted chatts, with optional audio, again, 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 chatts retrieval API sends back all posted chatts in the form of a JSON Array of string arrays. In addition to “username”, “message”, “id”, and “timestamp” of the Chatter tutorial, each string array now carries an additional element which is a base64-encoded string of the audio clip. If there is no audio data, the corresponding value must be JSON NULL.

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

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

{	
   "username": "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 Backend

then one of the front ends:

• Audio Compose
• Audio SwiftUI