Toggle 播放和暂停音乐 React Native

Question

我尝试只使用一个按钮来播放和暂停音乐。当按下按钮时音乐开始播放，但当尝试暂停音乐时出现问题。我做错了什么？

我收到以下错误：

可能的未处理的 Promise Rejection (id:0)： TypeError: Sound.pauseAsync 不是函数。

这是我的音频功能

    const { sound } = await Audio.Sound.createAsync(
      { uri: props.songURL }
    );
      await Audio.setIsEnabledAsync(true);
      setSound(songs);
      setSongs(userSongPosts)
    if (isPlaying === true) {
        try {
            await sound.pauseAsync();
            setIsPlaying(false);
          } catch (error) {
            console.error(error);
          }
    } else {
        try {
            await sound.playAsync(); 
            setIsPlaying(true);
          } catch (error) {
            console.error(error);
          }
    }
  }

这是我的按钮

        <TouchableOpacity
              style={styles.profilContainer}
              onPress={() => playSound() }>
            <Text>{isPlaying ? 'Pause' : 'Play'}</Text>
            <View style={styles.buttonView}>
            <Text style={styles.textButton}>{props.submitText}</Text>
            <MatetrialCommunityIcons
              style={styles.iconStyles}
              name={props.icon}
            />

Answer 1

我建议您创建一个 ref 并将声音变量存储在其中

Working Example

像这样

const sound = React.useRef(new Audio.Sound());
const [Status, SetStatus] = React.useState(false);

React.useEffect(() => {
  LoadAudio();
  return () => sound.current.unloadAsync();
}, []);

const LoadAudio = async () => {
  const checkLoading = await sound.current.getStatusAsync();
  try {
    const result = await sound.current.loadAsync({ uri: Song }, {}, true);
    // Here Song is the uri of the Audio file
    if (result.isLoaded === false) {
      console.log('Error in Loading Audio');
    } else {
      PlayAudio();
    }
  } catch (error) {
    console.log('Error in Loading Audio');
  }
};

  const LoadAudio = async () => {
    const checkLoading = await sound.current.getStatusAsync();
    try {
      const result = await sound.current.loadAsync({ uri: Song }, {}, true);
      if (result.isLoaded === false) {
        console.log('Error in Loading Audio');
      } else {
        PlayAudio();
      }
    } catch (error) {
      console.log('Error in Loading Audio');
    }
  };

  const PlayAudio = async () => {
    try {
      const result = await sound.current.getStatusAsync();
      if (result.isLoaded) {
        if (result.isPlaying === false) {
          sound.current.playAsync();
          SetStatus(true);
        }
      } else {
        LoadAudio();
      }
    } catch (error) {
      SetStatus(false);
    }
  };

  const PauseAudio = async () => {
    try {
      const result = await sound.current.getStatusAsync();
      if (result.isLoaded) {
        if (result.isPlaying === true) {
          sound.current.pauseAsync();
          SetStatus(false);
        }
      }
    } catch (error) {
      SetStatus(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text>{Status === false  ? 'Stopped' : 'Playing now'}</Text>
      <View style={{ width: '100%' }}>
        <Button title="Play Sound" onPress={() => PlayAudio()} />
        <Button title="Pause Sound" onPress={() => PauseAudio()} />
      </View>
    </View>
  );

在此实现中，Pause 和 Play 有两个单独的按钮。所以如果你想要一个single 按钮到toggle pause and play 那么return 语句应该是这样的

return (
  <View style={styles.container}>
    <Text>{Status === false ? 'Stopped' : 'Playing now'}</Text>
    <View style={{ width: '100%' }}>
      <Button
        title={Status === false ? 'Play' : 'Pause'}
        onPress={Status === false ? () => PlayAudio() : () => PauseAudio()}
      />
    </View>
  </View>
);

不要像这样忘记顶部的导入

import * as React from "react";