停止音频 expo-av - React Native Expo

Question

我在使用 expo-av 库的 Audio 功能，在 react-native-expo 中。

我可以使用 Audio.sound 构造函数中的 loadAsync 方法运行音频。

但是，当我尝试停止语音时，它无法停止。

以下是最简代码片段。这是停止声音的正确方法吗？我找不到解决方案。

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

提前致谢

- nikhil024

Answer 1

这是一个React的问题。每次你的组件渲染时，sound变量都会被重置为一个新的、还未加载的Audio.Sound对象。在这里，sound应该成为组件状态的一部分。你可以更改以下这行代码：

const sound = new Audio.Sound();

to

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

只要使用这个链接Expo Snack，它就能正常工作。

- Alex