Telebort | Learning to code made fun!

Activity 16: Sound Studio - Solution

Complete voice recording app with audio capture and playback functionality.

Features Implemented

Core Functionality

Audio recording with microphone permission handling
Real-time duration tracking during recording
Saving multiple recordings with timestamps
Playback controls for saved recordings
Play/pause toggle functionality

Key Implementation Details

Duration Timer

Uses setInterval to update duration every second
Clears interval when recording stops
Properly manages interval state to prevent memory leaks

Time Formatting

Converts seconds to MM:SS format
Adds leading zeros for single digits
Example: 65 seconds -> "01:05"

Playback Controls

Stops previous sound before playing new one
Toggles between play and pause states
Updates UI to reflect playing state
Automatically resets state when playback finishes

Running the Solution

Install dependencies:

bash

npm install --legacy-peer-deps

Start the development server:

bash

npx expo start

Test on a physical device (audio recording may not work in simulator)

Code Highlights

Duration Timer Implementation

javascript

// Start timer
const interval = setInterval(() => {
  setDuration(prev => prev + 1);
}, 1000);
setDurationInterval(interval);

// Stop timer
if (durationInterval) {
  clearInterval(durationInterval);
  setDurationInterval(null);
}

Time Formatting

javascript

function formatDuration(seconds) {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  const minsStr = mins < 10 ? `0${mins}` : `${mins}`;
  const secsStr = secs < 10 ? `0${secs}` : `${secs}`;
  return `${minsStr}:${secsStr}`;
}

Play/Pause Toggle

javascript

// Check if already playing
const updatedRecordings = recordings.map((rec, i) => ({
  ...rec,
  isPlaying: i === index ? !rec.isPlaying : false,
}));

// If pausing, stop sound
if (recordings[index].isPlaying) {
  return;
}

// Otherwise play sound
const { sound } = await Audio.Sound.createAsync({ uri });
await sound.playAsync();

Testing Checklist

Recording starts when button pressed
Duration timer counts up in MM:SS format
Recording stops and saves to list
Multiple recordings can be created
Play button plays audio
Play button changes to Pause during playback
Pause button stops playback
Only one recording plays at a time
Playback automatically resets when finished

Extension Ideas Implemented

This solution includes the basic functionality. Consider adding:

Delete Functionality: Swipe to delete recordings
Recording Names: Allow custom naming instead of timestamps
Playback Progress: Show progress bar during playback
Export/Share: Share recordings via device share sheet
Waveform: Visual representation of audio during recording
Speed Control: Adjust playback speed (0.5x, 1x, 2x)

Common Issues and Solutions

Issue: Recording doesn't start

Solution: Grant microphone permissions when prompted
Solution: Test on physical device, not simulator

Issue: Timer doesn't stop

Solution: Ensure interval is cleared in stopRecording
Solution: Add cleanup in useEffect return function

Issue: Multiple sounds play at once

Solution: Stop previous sound before playing new one
Solution: Unload sound using sound.unloadAsync()

Issue: UI doesn't update during playback

Solution: Use setOnPlaybackStatusUpdate callback
Solution: Update state when playback finishes

Resources