javascript - 如何使用 Expo 在 React-Native 应用程序上顺序运行异步函数

Question

---

更新

结合以下两种解决方案，我写道:

const startMusic = async () => {
    let currentSong
    let songPath
    const songArray = [
      { path: require("../assets/sounds/Katsu.mp3"), song: mainTheme },
      { path: require("../assets/sounds/MainTheme2.mp3"), song: mainTheme2 },
      { path: require("../assets/sounds/MainTheme3.mp3"), song: mainTheme3 },
    ]

    for (var i = 0; i < songArray.length; i++) {
      currentSong = songArray[i].song
      songPath = songArray[i].path
      try {
        await currentSong.loadAsync(songPath)
        await currentSong.playAsync()
        // setSoundObject(currentSong)
        console.log("Music will start")
        return new Promise(resolve => {
          currentSong.setOnPlaybackStatusUpdate(playbackStatus => {
            if (playbackStatus.didJustFinish) {
              console.log("Just finished playing")
              resolve()
            }
          })
        })
      } catch (error) {
        console.log(`Error: ${error}`)
        return
      }
    }
  }

这实际上播放了歌曲，并且控制台日志准时出现(“刚结束播放”恰好在歌曲结束时出现)我正在尝试弄清楚如何播放下一首歌曲。它如何知道何时播放到最后一首歌曲？

return new Promise(resolve => {
  currentSong.setOnPlaybackStatusUpdate(playbackStatus => {
    if (playbackStatus.didJustFinish) {
      console.log("Just finished playing")
      resolve()
    }
  })
}).then(() => console.log("Next song?"))

弄清楚如何将 .then 放在哪里，以便在“刚播放完”后立即将其写入控制台日志 我只是想看看如何实际将下一首歌曲放在那里(然后当然是告诉它什么时候返回数组中的第一首歌曲)

---

原帖

使用声音文件的 expo-av 库为 React native 应用程序分配作业。现在，应用程序在上下文文件中设置了一个 startMusic 函数，负责播放应用程序的背景音乐。目前只有一首歌:

const startMusic = async () => {
    try {
      await mainTheme.loadAsync(require("../assets/sounds/Katsu.mp3"))
      await mainTheme.playAsync()
      setSoundObject(mainTheme)
      console.log("The first song is playing! Enjoy!")
    } catch (error) {
      console.log(`Couldnt load main theme: ${error}`)
      return
    }
  }

它在主屏幕组件的文件中使用如下:

const { startMusic } = useContext(MusicContext)

useEffect(() => {
  startMusic()
}, [])

对于第二首歌，我在 MusicContext 文件中写了另一个 const:

const secondSong = async () => {
    try {
      await mainTheme2.loadAsync(require("../assets/sounds/MainTheme2.mp3"))
      await mainTheme2.playAsync()
      setSoundObject(mainTheme2)
      console.log("Now playing the second track. Enjoy!")
    } catch (error) {
      console.log(`Could not play the second song: ${error}`)
      return
    }
  }

Annnnnd……这就是我的问题所在。我知道这行不通，但我在组件文件中写了这个，试图让第二首歌曲在第一首歌曲之后播放

useEffect(() => {
    startMusic()
      .then(secondSong())
  }, [])

我知道事情远不止于此，但我遇到了麻烦。

Answer 1

您的代码的问题不仅仅是一个接一个地运行一个函数(就像 startMusic().then(() => secondSong()) 一样简单，但仍然无法解决问题)，但实际上您的函数在解决之前不会等待歌曲播放完毕

您希望此行 await mainTheme.playAsync() 暂停函数执行直到歌曲结束，但根据文档 https://docs.expo.io/versions/latest/sdk/av/ 它实际上做了什么恰好只是开始播放(不等待它完成)

话虽如此，您需要确定播放结束的时间，然后创建一个只会在播放结束后解析的 Promise，以便您的第二首歌曲只能在第一首之后开始

在没有错误处理等的最简单形式中，它看起来像这样

const startAndWaitForCompletion = async () => {
  try {
    await mainTheme.loadAsync(require('../assets/sounds/Katsu.mp3'))
    await mainTheme.playAsync()
    console.log('will start playing soon')
    return new Promise((resolve) => {
      mainTheme.setOnPlaybackStatusUpdate(playbackStatus => {
        if (playbackStatus.didJustFinish) {
          console.log('finished playing')
          resolve()
        }
      }
    })
  } catch (error) {
    console.log('error', error)
  }
}

诀窍当然是 .setOnPlaybackStatusUpdate 监听器，它会经常调用播放状态，通过分析状态，您可以判断歌曲已经播放完毕。如果你滚动到我链接的页面底部，你会发现其他状态更新的例子

---

已更新

const startAndWaitForCompletion = async (playbackObject, file) => {
  try {
    await playbackObject.loadAsync(file)
    await playbackObject.playAsync()
    console.log('will start playing soon')
    return new Promise((resolve) => {
      playbackObject.setOnPlaybackStatusUpdate(playbackStatus => {
        if (playbackStatus.didJustFinish) {
          console.log('finished playing')
          resolve()
        }
      }
    })
  } catch (error) {
    console.log('error', error)
  }
}

////

const songs = [
  { path: require('../assets/sounds/Katsu.mp3'), song: mainTheme },
  { path: require('../assets/sounds/MainTheme2.mp3'), song: mainTheme2 },
  { path: require('../assets/sounds/MainTheme3.mp3'), song: mainTheme3 },
]


useEffect(() => {
  (async () => {
    for (let i = 0; i < songs.length; i++) {
      await startAndWaitForCompletion(songs[i].song, songs[i].path)
    }
  })()
}, [])