使用 React Native 在手机上搜索音频文件

Question

我正在使用 react native 开发音乐应用程序，但我一直在努力找出搜索和播放已保存在客户端手机上的音频文件的最佳方式。我只是不确定解决这个问题的最佳模块/库是什么，或者 iOS/Android 操作系统是否完全允许这种类型的用户文件访问。

我正在使用react-native-sound播放音频文件，我找到了react-native-fs模块，这看起来很接近我觉得我需要搜索音频文件的内容。有一个 readDir 函数，但你向它传递目录路径常量，如 MainBundlePath、CachesDirectoryPath、DocumentDirectoryPath 等：

// require the module
var RNFS = require('react-native-fs');

// get a list of files and directories in the main bundle
RNFS.readDir(RNFS.MainBundlePath)

包括： 1. MainBundlePath - 主包目录的绝对路径 2. CachesDirectoryPath - 缓存目录的绝对路径 3. DocumentDirectoryPath - 文档目录的绝对路径

这些目录中的任何一个是我寻找已存储在客户端手机上的音频文件的地方吗？

Answer 1

这是一个需要存储权限的 3 步过程（因为您是从本地存储获取数据）

1. 安装react-native-permissions以获取用户的存储权限，然后转到位于YourProject/android/app/src/main/ 的AndroidManifest.xml并添加以下内容：

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
   

2. 创建函数以在请求歌曲之前请求和检查存储权限，例如：

 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

3. 然后创建另一个函数来从设备获取数据（你也可以在你的函数中传递一些参数或过滤器——按照react-native-get-music-files文档）

    componentDidMount() {
      Permissions.request('storage').then(response => {
        this.setState({ photoPermission: response })
      })
     }

所以，这是最终代码的样子

  _getSongs =() =>{
       Alert.alert('seen')
       MusicFiles.getAll({

            }).then(tracks => {
              console.log(tracks)
            }).catch(error => {
            console.log(error)
       })
     }

然后你会得到一个用户歌曲列表的 JSON 数组，如下所示：

import React, { Component } from 'react';
import { StyleSheet, Text, View,Alert} from 'react-native';
import MusicFiles from 'react-native-get-music-files';
import Permissions from 'react-native-permissions';

export default class App extends Component {
    state = {
       storagePermission:''
     }

    componentDidMount() {
      Permissions.request('storage').then(response => {
            this.setState({ storagePermission: response })
      })
     }


    _getSongs =() =>{
       Alert.alert('seen')
       MusicFiles.getAll({

            }).then(tracks => {
              console.log(tracks)
            }).catch(error => {
            console.log(error)
       })
     }


    render() {
        return (
            <View style={{flex:1,justifyContent:'center', alignItems:'center'}}>
                <Text onPress={this._getSongs}>get songs</Text>
            </View>
        );
    }
}

祝你好运！

Answer 2

react-native-get-music-files是一个 npm 包，用于搜索本地存储和 SD 卡上的所有音乐文件。

import MusicFiles from 'react-native-get-music-files';

MusicFiles.get(
  (success) => {
     //this.saveSongData(success)
  },
  (error) => {
       console.log(error)
  }
);

该函数返回一个对象数组，您可以像这样循环访问：

[
  {
    id : 1,
    title : "La danza del fuego",
    author : "Mago de Oz",
    album : "Finisterra",
    genre : "Folk",
    duration : 132132312321, // miliseconds
    cover : "file:///sdcard/0/123.png",
    blur : "file:///sdcard/0/123.png",
    path : "/sdcard/0/la-danza-del-fuego.mp3"
  }
]

不幸的是，它目前仅支持Android。