react-native - expo-av如何实现动态播放本地音频？

Question

我想实现一个基于 expo 开发的 RN 项目，里面有很多的音频文件，点击不同的按钮播放不同的音频，音频文件如果坚持使用本地文件，还有其他的可行方案吗？
感谢��

前提条件：

• 动态播放
• 本地音频文件

目前我查到的解决方法有 2 种，但都不是很符合我的需求

方案 1

引入全部，然后以下标方式使用，因为我音频文件有点多，似乎这个不是很好的解决方法

  {    "paths": [        require('./assets/one.mp3'),        require('./assets/two.mp3'),        require('./assets/three.mp3'),    ]  }

参考：https://stackoverflow.com/questions/75410617/how-to-load-local-audio-files-dynamically-with-expo-av

方案 2

改成线上链接

expo官方的解释是 require statements actually "require" a static string，建议动态播放的话音频文件改成线上链接

参考：https://github.com/expo/expo/issues/4332

我想做一个单机的 app，所以也 pass

Answer 1

对于你的问题，我理解你需要实现一个基于 Expo 开发的 React Native 项目，其中包含多个本地音频文件，并且希望通过点击不同的按钮来动态播放这些音频文件。然而，你希望避免使用方案1（全部引入）和方案2（线上链接）。

尽管如此，还是有一些其他的解决方案可以考虑。

方案3：使用动态导入

你可以考虑使用动态导入（dynamic imports）的方式。这是一种 JavaScript 的特性，允许你在运行时加载模块。这样，你就可以只导入需要的音频文件，而不是全部都导入。

例如：

buttonOne.addEventListener('click', async () => {    const sound = await Expo.Audio.loadAsync(require('./assets/one.mp3'));    const player = new Expo.Audio.Players.create(sound);    player.play();});buttonTwo.addEventListener('click', async () => {    const sound = await Expo.Audio.loadAsync(require('./assets/two.mp3'));    const player = new Expo.Audio.Players.create(sound);    player.play();});

在上述代码中，当用户点击不同的按钮时，会动态加载并播放不同的音频文件。注意，这里的 require 是动态的，它会在运行时决定加载哪个文件。

方案4：使用文件系统（FileSystem）API

Expo 的 FileSystem API 允许你访问项目中的文件系统。你可以使用这个 API 来读取和播放你的本地音频文件。

例如：

buttonOne.addEventListener('click', async () => {    const fileSystem = new Expo.FileSystem.FileSystem();    const sound = await fileSystem.readAsync(new Expo.FileSystem.Asset('assets/one.mp3'));    const player = new Expo.Audio.Players.create(sound);    player.play();});

在上述代码中，我们首先创建了一个 FileSystem 实例，然后使用 readAsync 方法读取音频文件，然后创建一个音频播放器并播放这个音频。这个方法可以避免动态导入的冗余代码，因为你只需要在创建播放器时指定音频文件的位置。