带有异步功能的useEffect不能播放声音

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有异步功能的useEffect不能播放声音相关的知识,希望对你有一定的参考价值。

我试图在HomeScreen加载后立即在React Native / Expo应用程序中播放背景音乐。

[使用expo AV库,我用一种启动音乐的方法设置了MusicContext。这是我的MusicContext.js

import React, {
  useState,
  useCallback,
  useMemo,
  useContext,
  useEffect,
} from "react"
import PropTypes from "prop-types"
import { Audio } from "expo-av"

const initialState = {
  playMusic: false,
  setPlayMusic: () => null,
}

export const MusicContext = React.createContext(initialState)

const startMusic = async () => {
  let mainTheme = null

  if (!mainTheme) {
    mainTheme = new Audio.Sound() 
  try {
    console.log("trying")
    await mainTheme.loadAsync(require("../assets/sounds/MainTheme.mp3"))
    mainTheme.setStatusAsync({ isLooping: true })
  } catch (error) {
    console.log("Couldnt load main theme")
    return
  }
}
}

export const MusicProvider = props => {
  const [playMusic, setPlayMusic] = useState(initialState.playMusic)

  return (
    <MusicContext.Provider
      value={{
        playMusic,
        setPlayMusic,
        startMusic,
      }}
    >
      {props.children}
    </MusicContext.Provider>
  )
}

MusicContext.propTypes = {
  children: PropTypes.node.isRequired,
}

然后我在主屏幕上的startMusic中调用useEffect方法。

const HomeScreen = () => {
  const { startMusic } = useContext(MusicContext)

  useEffect(() => {
    console.log("running")
    startMusic()
  }, []) 

我看到了所有console.log输出,所以我知道它正在运行,但是音乐永远不会播放。我在这里想念什么?

答案

是否有没有将startMusic放在initialState中的原因?

将函数放入initalState时,将正确调用它。

为了更广泛地回答您的问题,您需要将aysnc函数包装在IIFE中,或者将其作为单独的被调用函数。

我通常以IIFE包装。

以上是关于带有异步功能的useEffect不能播放声音的主要内容,如果未能解决你的问题,请参考以下文章

PlaySound 无法播放两个异步声音

如何在 Android 上异步和同时(复音)播放声音?

请教,手机开两个播放声音的软件,能不能同时出声的三种情况。

使用 SoundEffect 在 XNA 中循环播放带有前奏的音乐

在 Angular 4 中播放声音

将异步函数放入 useEffect 后出现错误