javascript - Interrompere l'audio expo-av - React Native Expo

Sto usando Audio di expo-av in react-native-expo.

Posso eseguire l'audio utilizzando il metodo loadAsync sul costruttore Audio.sound.

Anche se quando cerco di fermare la voce, la voce non si ferma.

Di seguito è riportato il frammento di codice minimalista. Questo è il modo corretto per fermare il suono? Non riesco a trovare la soluzione a questo.

import React, {useState,  useEffect} from 'react';
import {  Button } from 'react-native';
import { Audio } from 'expo-av';

export default function App() {
  const [audioStatus, setAudioStatus] = useState(false)
  const sound = new Audio.Sound();
  
  useEffect(()=>{
    (async () => {
            console.log('status', audioStatus)
            if (audioStatus) {
                await sound.loadAsync('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')
                try {
                    await sound.playAsync()
                } catch (e) {
                    console.log(e)
                }
            }else {
                await sound.stopAsync()
                await sound.unloadAsync()
            }
          })()
  },[audioStatus])
  
  return (
      <Button color={audioStatus ? 'red' : 'green'} title={'play'} onPress={()=>setAudioStatus(!audioStatus)} />
  );
}

Grazie in anticipo

Risposta n. 1

Questo è un problema di React. Ogni volta che il tuo componente viene renderizzato, la variabile sound viene reimpostata su un nuovo oggetto Audio.Sound non ancora caricato. Qui, sound dovrebbe far parte dello stato del componente. Puoi cambiare la riga:

const sound = new Audio.Sound();

a

const [sound, setSound] = useState(new Audio.Sound());

e funzionerà.

Expo Snack