nghyane/vstep/mobile-audio-video

import { Audio } from "expo-av";
// Load and play audio ONCE
const { sound } = await Audio.Sound.createAsync(
  { uri: audioUrl },
  { shouldPlay: true, isLooping: false }
);
// Track progress
sound.setOnPlaybackStatusUpdate((status) => {
  if (status.isLoaded) {
    const progress = status.positionMillis / status.durationMillis;
    setProgress(progress);
  }
});

import { Audio } from "expo-av";
// Start recording
const { recording } = await Audio.Recording.createAsync(
  Audio.RecordingOptionsPresets.HIGH_QUALITY
);
// Stop and get file
await recording.stopAndUnloadAsync();
const uri = recording.getURI();

import * as Speech from "expo-speech";
// Speak text
Speech.speak(text, {
  language: "en-US",
  pitch: 1.0,
  rate: 0.9,
});
// Stop
Speech.stop();
// Check if speaking
Speech.isSpeakingAsync().then((speaking) => {
  if (speaking) setSpeakingState(true);
});

import { Audio } from "expo-av";
async function checkPermissions() {
  const { status } = await Audio.requestPermissionsAsync();
  if (status !== "granted") {
    Alert.alert(
      "Microphone permission required",
      "Please grant microphone access in settings to use the speaking practice feature.",
      [{ text: "OK" }]
    );
    return false;
  }
  return true;
}

// Progress bar
<Slider
  value={progress}
  onValueChange={(value) => {
    // Only allow seek during practice, not exam
    if (!isExam) sound.setPositionAsync(value * duration);
  }}
  disabled={isExam}
/>
// Play/Pause button
<HapticTouchable onPress={isPlaying ? pause : play}>
  <Ionicons name={isPlaying ? "pause" : "play"} size={24} />
</HapticTouchable>

type AudioState =
  | { kind: "idle" }
  | { kind: "loading" }
  | { kind: "ready"; duration: number }
  | { kind: "playing"; position: number; duration: number }
  | { kind: "paused"; position: number; duration: number }
  | { kind: "ended" };