react-native - Expo显示剩余音频秒数

Question

我想显示音频还剩多少秒。像这样：

我知道我需要使用positionMillis和durationMillis道具，但是如何监控positionMillis？

当我单击一个按钮时，我会加载音频并播放它（handleAudio功能）。这是我只会得到positionMillis一次（或者如果我暂停/恢复音频）。如何连续观看positionMillis音频的道具？

const [sound, setSound] = useState(null);
const [soundStatus, setSoundStatus] = useState({ status: null, icon: play });

  async function handleAudio() {
    //playing audio for the first time
    if (soundStatus.status === null) {
      console.log("Loading Sound");
      const { sound, status } = await Audio.Sound.createAsync(
        {
          uri: `some_url`,
        },
        { shouldPlay: true },
        );
      setSound(sound);
      setSoundStatus({ status: status, icon: pause });
    }

    //pause audio
    if (soundStatus.status) {
      if (soundStatus.status.isLoaded && soundStatus.status.isPlaying) {
        const status = await sound.pauseAsync();
        console.log("pausing audio");
        setSoundStatus({ status: status, icon: play });
      }

      //resuming audio
      if (soundStatus.status.isLoaded && !soundStatus.status.isPlaying) {
        const status = await sound.playAsync();
        console.log("resuming audio");
        setSoundStatus({ status: status, icon: pause });
      }
    }
  }

<Button title="Play sound" onPress={handleAudio}/>
<Text> `${soundstatus.status.positionMillis}:${soundstatus.status.durationMillis}` </Text>

Answer 1

  const { sound, status } = await Audio.Sound.createAsync(
    {
      uri: `some_url`,
    },
    { shouldPlay: true },
    (status) => console.log(status.positionMilis),
  );

Audio.Sound.createAsync 采用第三个参数，例如每 100 毫秒执行一次的回调（可以更改）。使用包含您需要的一切的状态对象调用它。你可以在这里阅读更多