javascript - Dừng âm thanh expo-av - React Native Expo

Tôi đang sử dụng Audio từ expo-av trong react-native-expo.

Tôi có thể chạy âm thanh bằng cách sử dụng phương thức loadAsync trên bộ tạo Audio.sound.

Mặc dù khi tôi cố gắng ngăn giọng nói, nó không ngừng lại.

Dưới đây là đoạn mã tối giản. Đây có phải là cách đúng để dừng âm thanh không. Tôi không thể tìm thấy giải pháp cho vấn đề này.

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

Cảm ơn trước

Câu trả lời #1

Đây là một vấn đề với React. Mỗi lần component của bạn render, biến sound được đặt lại thành một đối tượng Audio.Sound mới, chưa được tải. Ở đây, sound nên là một phần của state của component. Bạn có thể thay đổi dòng:

const sound = new Audio.Sound();

đến

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

và nó sẽ hoạt động.

Đồ ăn nhẹ Expo