使用 React Native 在手机上搜索音频文件 [英] Search for audio files on phone using React Native

问题描述

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

I'm using react native to develop a music app and I'm stuck trying to figure out the best way to search for and play audio files already saved on the clients phone. I'm just not sure what would be the best modules/libraries to solve this problem, or whether the iOS/Android OS allows this type of access to user files at all.

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

I'm using react-native-sound to play audio files and I've found the react-native-fs module and this looks close to what I feel I need to search for audio files. There's a readDir function, but you pass it directory path constants like MainBundlePath, CachesDirectoryPath, DocumentDirectoryPath etc:

// 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 - 文档目录的绝对路径

With: 1. MainBundlePath - The absolute path to the main bundle directory 2. CachesDirectoryPath - The absolute path to the caches directory 3. DocumentDirectoryPath - The absolute path to the document directory

我可以在这些目录中查找已存储在客户手机上的音频文件吗?

Would any of these directories be where I look to find audio files already stored on the clients phone?

推荐答案

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

This is a 3 step process that requires storage permissions (since you're getting data from the local storage)

1. 安装 react-native-permissions 以从用户，然后转到位于 YourProject/android/app/src/main/ 的 AndroidManifest.xml 并添加以下内容:

1. Install react-native-permissions to get storage permission from the user, then go to your AndroidManifest.xml located at YourProject/android/app/src/main/ and add the following:

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

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

Create functions to request and check for storage permissions before requesting for the songs, for example:

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

1. 然后创建另一个函数来从设备获取数据(您也可以在函数中传递一些参数或过滤器——按照 react-native-get-music-files 文档)立>

1. Then create another function to get the data from the device (You can also pass some parameters or filters in your function--follow the react-native-get-music-files docs)

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

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

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

So, Here's what the final code looks like

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>
        );
    }
}

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

Then you get a JSON array of the list of the users songs which looks like this:

[
  {
    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"
  }
]

祝你好运！

这篇关于使用 React Native 在手机上搜索音频文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！