React Native Expo-Av一次播放多个声音

xwbd5t1u 于 2023-03-31 发布在 React

关注(0)|答案(1)|浏览(144)

我试图在Expo-AV上播放多个声音文件，但是当一个声音播放时，另一个声音停止。我无法同时播放多个声音。
"我所尝试的"
我尝试了一个类方法来创建一个不同的示例，但每次都不起作用。所以我恢复到功能组件，并同时调用playSound()来播放，但它不起作用

以下是我的代码：

import React, { useEffect, useState } from "react";
import { Text, View} from "react-native";
import {Audio} from 'expo-av'

const MusicModal = (props) => {
  const [sound, setSound] = React.useState(new Audio.Sound());
  const [isPlaying, setIsPlaying] = React.useState(false);
  
  useEffect(()=>{
      handleAudioConfig()
},[])

async function playSound(song) {
  console.log('Loading Sound');
  const { sound } = await Audio.Sound.createAsync(song);
  setSound(sound);
  sound.setIsLoopingAsync(true)
  console.log('Playing Sound');
  await sound.playAsync().then(()=>{
  setIsPlaying(true)
}); 
}

useEffect(() => {
  return sound
    ? () => {
        console.log('Unloading Sound');
        sound.unloadAsync(); 
      }
    : undefined;

}, [sound]);

const handleAudioConfig = async() =>{
  try {
    await Audio.setAudioModeAsync({
      allowsRecordingIOS: false,
      interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
      playsInSilentModeIOS: true,
      interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
      shouldDuckAndroid: true,
      staysActiveInBackground: true,
      playThroughEarpieceAndroid: false,
  
    })
    playSound(require('soundFilePath'))
    playSound(require('soundFilePath'))
  } catch (e) {
    console.log(e)
  }  
}

  return (
      <View>
          <Text>Play Sound</Text>
    </View>
  );
};

export default MusicModal;

react-native

来源：https://stackoverflow.com/questions/67242685/expo-av-play-multiple-sounds-at-a-time

1条答案

按热度按时间

jckbn6z71#

const [sound, setSound] = useState(new Audio.Sound());
  const [sound2, setSound2] = useState(new Audio.Sound());
  const [isPlaying, setIsPlaying] = useState(false);
  const [isPlaying2, setIsPlaying2] = useState(false);
  const playBackState = usePlaybackState();
  const [key, setKey] = useState(0);

  const playSound1 = async () => {
    //setSound(sound);
    if (isPlaying == false) {
      await sound.loadAsync({
        uri: "https://www.chosic.com/wp-content/uploads/2021/07/The-Epic-Hero-Epic-Cinematic-Keys-of-Moon-Music.mp3",
      });
    }
    await sound.setIsLoopingAsync(true); //turn on looping for the sound
    await Audio.setAudioModeAsync({
      staysActiveInBackground: true,
      interruptionModeAndroid: 1,
      shouldDuckAndroid: true,
      playThroughEarpieceAndroid: true,
      allowsRecordingIOS: true,
      interruptionModeIOS: 0,
      playsInSilentModeIOS: true,
    });

    if (isPlaying == false) {
      console.log("Playing Sound");
      await sound.playAsync();
      setIsPlaying(true);
      return;
    }
    if (isPlaying == true) {
      console.log("pausing now..");
      await sound.pauseAsync();
      await sound.unloadAsync();
      setIsPlaying(false);
      return;
    }
  };

  const playSound2 = async () => {
    //setSound(sound);
    //thunder
    if (isPlaying2 == false) {
       console.log('loaded');
      await sound2.loadAsync({
        uri: "https://www.chosic.com/wp-content/uploads/2021/07/The-Epic-Hero-Epic-Cinematic-Keys-of-Moon-Music.mp3",
      });
    }
    await sound2.setIsLoopingAsync(true); //turn on looping for the sound
    await Audio.setAudioModeAsync({
      staysActiveInBackground: true,
      interruptionModeAndroid: 1,
      shouldDuckAndroid: true,
      playThroughEarpieceAndroid: true,
      allowsRecordingIOS: true,
      interruptionModeIOS: 0,
      playsInSilentModeIOS: true,
    });

    if (isPlaying2 == false) {
      console.log("Playing Sound");
      await sound2.playAsync();
      setIsPlaying2(true);
      return;
    }
    if (isPlaying2 == true) {
      console.log("pausing now..");
      await sound2.pauseAsync();
      await sound2.unloadAsync();
      setIsPlaying2(false);
      return;
    }
  };

这是我的代码。像这样一个接一个地调用声音：

<View style={styles.downUnder}>
          <View style={styles.yessir1}>
            <IonIcon
              name={isPlaying ? "pause-circle-sharp" : "play-circle-sharp"}
              size={85}
              style={styles.yesshit}
              onPress={playSound1}
            />
            <Text style={styles.textit}>thunder</Text>
          </View>
          <View style={styles.yessir2}>
            <IonIcon
              name={isPlaying2 ? "pause-circle-sharp" : "play-circle-sharp"}
              size={85}
              style={styles.yesshit}
              onPress={playSound2}
            />
            <Text style={styles.textit}>campfire</Text>
          </View>

都包在里面：

const MultipleSound = () => {
   'code block one'
   ...
   return (
   'code block two'
   ...
)
}

赞(0）回复(0）举报 2023-03-31

我来回答

React Native Expo-Av一次播放多个声音

1条答案

相关问题

热门标签

最新问答