javascript - Stoppa ljud expo-av - React Native Expo

Jag använder Audio från expo-av i react-native-expo.

Jag kan köra ljudet med metoden loadAsync på Audio.sound-konstruktorn.

Även om när jag försöker stoppa rösten slutar det inte rösten.

Nedan följer det minimalistiska kodavsnittet. Är detta rätt sätt att stoppa ljudet på? Jag kan inte hitta lösningen för detta.

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)} />
  );
}

Tack på förhand

Svar #1

Detta är ett React-problem. Varje gång din komponent renderas, återställs variabeln sound till ett nytt, ännu ej laddat Audio.Sound-objekt. Här bör sound vara en del av komponentens tillstånd. Du kan ändra raden:

const sound = new Audio.Sound();

till

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

och det kommer att fungera.

Expo Snacks