Activity 16: Sound Studio - Discovery Challenge

🎯 Learning Objectives

By completing this activity, you will:

Understand the audio recording lifecycle (permission -> setup -> record -> stop -> save)
Request and handle microphone permissions properly
Implement recording controls with real-time duration tracking
Create playback functionality for recorded audio files
Manage a list of saved recordings with timestamps

🚀 Getting Started (See Results in 30 Seconds!)

Installation

bash

# Install dependencies
npm install --legacy-peer-deps

# Start the development server
npm start

What You'll Experience:

First 30 seconds: Launch the app, tap "Start Recording" - you'll see a button but NO TIMER! Duration shows "00:00" forever.
After your fixes: Working timer (00:05, 00:06...), proper duration formatting, and saved recordings show how long they are!

This activity transforms a broken timer into a fully functional voice recording studio.

🎯 What's Already Working

✅ Fully Functional:

Record button that requests microphone permissions
Audio recording using Expo AV (records high-quality audio)
Playback functionality (tap ▶ Play to hear recordings)
Recordings list with timestamps and dates
Stop recording and save to list

⚠️ Needs Implementation (Your TODOs):

Duration timer doesn't count up <- You'll implement setInterval!
Timer keeps running after stopping <- You'll clear the interval!
Duration shows "00:00" instead of "05:32" <- You'll format MM:SS!

Goal: Complete the timer system so users can track recording duration in real-time!

📋 Tasks to Complete

Task One: Start Duration Timer (Easy)

File: App.js (line ~36)

The recording starts but the duration stays at 00:00! Implement a timer that counts up every second:

javascript

// TODO: Start duration timer
// Inside startRecording() function, after setDuration(0):

const intervalId = setInterval(() => {
  setDuration(prevDuration => prevDuration + 1);
}, 1000);

// Store the interval ID so you can clear it later
// You'll need to use useRef to store this across renders

Success Criteria:

Timer increments every second while recording
Duration state updates (0, 1, 2, 3...)
Timer is stored so it can be cleared later

Why: setInterval runs a function repeatedly. We use prevDuration => prevDuration + 1 to safely increment based on the previous state.

Expected Output: While recording, you'll see duration increment: 1, 2, 3, 4...

Task 2: Stop Duration Timer (Easy)

File: App.js (line ~50)

When you stop recording, the timer keeps running in the background! Clear the interval:

javascript

// TODO: Stop the duration timer
// Inside stopRecording() function:

clearInterval(intervalId); // Clear the interval you created in startRecording

Success Criteria:

Interval is cleared when recording stops
No memory leaks from running timers
Duration freezes at final value

Why: clearInterval stops the repeating function. Without this, the timer keeps running even after recording stops, causing memory leaks and incorrect values.

Expected Behavior: Timer stops immediately when you press "Stop Recording".

Task 3: Format Duration Display (Medium)

File: App.js (line ~80)

Durations show as "00:00" instead of "05:32". Format seconds into MM:SS:

javascript

function formatDuration(seconds) {
  // TODO: Format duration as MM:SS
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;

  // Add leading zeros: 5 becomes "05"
  const formattedMinutes = String(minutes).padStart(2, '0');
  const formattedSeconds = String(remainingSeconds).padStart(2, '0');

  return `${formattedMinutes}:${formattedSeconds}`;
}