尝试在 React Native 中将 mp3 文件作为参数传递，但出现错误.我该如何解决这个问题?我正在使用 Expo-av 作为参考 [英] Trying to pass an mp3 file as a parameter in React Native and I am getting errors. How can I resolve this problem? I am using Expo-av for reference

问题描述

我目前正在构建一个应用程序，我希望有一个播放按钮，按下该按钮可以播放音频文件.我这样做的方法是创建一个声音播放器组件来创建按钮和音频同步，这样我就可以在我使用它的主屏幕中调用该组件.当我手动放置时，我可以让声音播放器组件正常工作mp3 文件路径在它的正确位置，但当我尝试将它作为参数传递时却没有.看看我下面的代码，看看你是否能帮助解决这个问题.

I am currently building an app where I want there to be a play button that when pressed plays an audio file. My method of doing so is to create a soundplayer component that creates the button and audio sync so that I can just call the component in the main screen I use it in. I can get the soundplayer component to work just fine when I manually put the mp3 file path in it's proper place, but not when I try to pass it in as a parameter. Take a look at my code below and see if you may be able to help resolve the situation.

声音播放器组件

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { Audio } from 'expo-av';

function SoundPlayer({ mp3 }) {
  const [sound, setSound] = React.useState();

  async function playSound() {
    console.log('Loading Sound');
    const { sound } =  Audio.Sound.createAsync({ mp3 });
    setSound(sound);

    console.log('Playing Sound');
    await sound.playAsync(); }

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

  return (
    <View style = {styles.container}>
      <Button title="Play Sound" onPress={playSound} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
  }
})

export default SoundPlayer

应用屏幕

export default function App() {
  return (
    <SoundPlayer  mp3 = {require('/Users/viswajithkumar/DharmaWorldwide/Screens/assets/Audio/FrenchTouch.mp3')}/>
  );
}

推荐答案

根据文档 expo-av，我们可以看到静态文件和远程文件有两种不同的加载方式.

According to the Documentation of expo-av, we can see that there are two different methods for static files and remote files to load.

对于静态文件(需要...)，这是加载文件的方式

const { sound } = await Audio.Sound.createAsync(require('./assets/Hello.mp3'));

对于远程文件 (https://example.com/test.mp3)这是加载文件的方式

For Remote Files (https://example.com/test.mp3) this is the way to load a file

const { sound } = await Audio.Sound.createAsync({
  uri: 'https://example.com/test.mp3',
});

所以替换，

const { sound } =  Audio.Sound.createAsync({ mp3 });

与

const { sound } =  Audio.Sound.createAsync(mp3);

应该解决问题.只需确保声音文件的位置正确即可.

Should fix the issue. Just make sure the location of the sound file is correct.

加载和播放音频文件的更好方法，我个人认为最好的方法是使用 useRef 变量作为声音实例.我已经为实现here

A better way to load and play audio files, which I personally feel the best is to use useRef variable for the sound instance. I've created a snack for the implementation here

这篇关于尝试在 React Native 中将 mp3 文件作为参数传递，但出现错误.我该如何解决这个问题?我正在使用 Expo-av 作为参考的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！