Necesito ayuda para reproducir archivos de audio en secuencia para el reloj parlante – react-native.

He redescubierto React Native y me gustaría aprender a desarrollar una aplicación nativa. Para aprender, crearé un reloj que hable.
La hora y la fecha ya están programadas, se muestran en pantalla y se actualizan cada segundo.
Quiero un botón para anunciar la hora actual y el segundo, la fecha.

Tengo los archivos de audio con números hablados del 00 al 59. Las palabras “Es”, “y” y “en punto”.
Tengo problemas para entender la parte de audio. Puedo reproducir archivos de audio individuales, pero no puedo reproducir varios archivos uno tras otro.
¿Alguien tiene una idea o una solución?

Mi código anterior se ve así:

import React from 'react';
import type { Node } from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button,
  Alert,
  NativeModules,
} from 'react-native';

import { Colors } from 'react-native/Libraries/NewAppScreen';

// Biblioteca de audio
import useSound from 'react-native-use-sound';

const Section = ({ children, title }): Node => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <view style="{styles.sectionContainer}">
      <text style="{[" styles.sectiontitle,="" {="" color:="" isdarkmode="" colors.white="" :="" colors.black,="" },="" ]}="">
        {title}
      </text>
      <text style="{[" styles.sectiondescription,="" {="" color:="" isdarkmode="" colors.light="" :="" colors.dark,="" },="" ]}="">
        {children}
      </text>
    </view>
  );
};

function Wochentag(tag = 0) {
  var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  return days[tag];
}

function Monat(m = 0) {
  var months = [
    '',
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ];
  return months[m];
}

function Digit(d = 0) {
  if (d < 10) d = '0' + d;
  return d;
}

class Uhr extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      time: Digit(new Date().getHours()) + ':' + Digit(new Date().getMinutes()),
    };
  }
  componentDidMount() {
    this.intervalID = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.intervalID);
  }
  tick() {
    this.setState({
      time: Digit(new Date().getHours()) + ':' + Digit(new Date().getMinutes()),
    });
  }
  render() {
    return <text style="{styles.textStyle}">{this.state.time}</text>;
  }
}

class Datum extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      datum: Digit(new Date().getDate()) + ' ' + Monat(new Date().getMonth() + 1) + ' ' + new Date().getFullYear(),
      wtag: Wochentag(new Date().getDay()),
    };
  }
  componentDidMount() {
    this.intervalID = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.intervalID);
  }
  tick() {
    this.setState({
      datum: Digit(new Date().getDate()) + ' ' + Monat(new Date().getMonth() + 1) + ' ' + new Date().getFullYear(),
      wtag: Wochentag(new Date().getDay()),
    });
  }
  render() {
    return (
      <text style="{styles.textStyle}">
        {this.state.wtag}, {this.state.datum}
      </text>
    );
  }
}

const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  // Reproducir audio
  const path = 'test.wav';
  const [play, pause, stop, data] = useSound(path, {
    timeRate: 100,
    playbackRate: 1000,
    volume: 1.0,
  });

  const onPress = () => {
    if (!data.isPlaying) play();
    else {
      stop();
    }
  };

  const PlayFile = <button title="{data.isPlaying" 'pause'="" :="" 'play'}="" onpress="{()" ==""> onPress()} />;

  return (
    <safeareaview style="{backgroundStyle}">
      <statusbar barstyle="{isDarkMode" 'light-content'="" :="" 'dark-content'}=""></statusbar>
      <scrollview contentinsetadjustmentbehavior="automatic" style="{backgroundStyle}">
        <view style="{{" backgroundcolor:="" isdarkmode="" colors.black="" :="" colors.white,="" }}="">
          <section title="Aktuelle Uhrzeit ist: ">
            <uhr></uhr> Uhr
          </section>
          <section title="Heute ist: ">
            <datum></datum>
          </section>
          <section title=""></section>

          <button title="Uhrzeit ansagen" onpress="{()" ==""> Alert.alert('Noch wird die Uhrzeit nicht angesagt. das kommt aber sehr bald....')}
          />

          <button title="Datum ansagen" onpress="{()" ==""> Alert.alert('Noch wird das Datum nicht angesagt. das kommt aber sehr bald....')}
          />

          {PlayFile}
        </button></button></view>
      </scrollview>
    </safeareaview>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

¡Gracias de antemano!

Actualización:
Tal vez alguien tenga una idea de cómo usar el siguiente ejemplo para mi problema.
https://stackoverflow.com/questions/43033228/html5-audio-tag-in-react

Nueva actualización:
Este código funciona, pero no es óptimo. ¿Alguien tiene una idea para una solución mejor?
“`typescript
import Sound from ‘react-native-sound’;

function Digit(d=0) {
if(d < 10) d = ‘0’ + d;
return d;
}

function AudioClock(datei) {
Sound.setCategory(‘Playback’);
var audioFile = new Sound(datei, Sound.MAIN_BUNDLE, (error) => {
if (error) {
console.log(‘failed to load the sound’, error);
return;
}

// loaded successfully
console.log(‘duration in seconds: ‘ + audioFile.getDuration() + ‘number of channels: ‘ + audioFile.getNumberOfChannels());

audioFile.setVolume(1);
audioFile.setPan(1);

audioFile.play((success) => {
if (success) {
console.log(‘successfully finished playing’);
} else {
console.log(‘playback failed due to audio decoding errors’);
}
});
});
}

…

const SayTime = () => {
setTimeout( () => AudioClock(‘itis.wav’), 10); // it is
setTimeout( () => AudioClock(‘uhr‘ + Digit(new Date().getHours()) +’.wav’), 900); // hours
setTimeout(() => AudioClock(‘and.wav’), 1400); // and
setTimeout( () => AudioClock(‘uhr‘ + Digit(new Date().getMinutes()) + ‘.wav’), 2000); // minutes
setTimeout( () => AudioClock(‘oclock.wav’), 3100); // o’clock
};

…

</button
title=”say time”