getting audio images from expo-media-library

Question

i want to get the audio files and audio files image from the media library, but i cant get the audio file image from the media library because the uri returns the mp3 file of the audio. This is my code please is their anything to be done?

Import <ALL_IMPORTS_HERE>
import * as MediaLibrary from "expo-media-library";


export const AudioContext = createContext();
function AudioProvider(props) {
  const [audioFiles, setAudioFiles] = useState([]);

  useEffect(() => {
    getPermission();
  }, []);

  const permissionAlert = () => {
    Alert.alert("permission required", "this app needs to read audio files", [
      {
        text: "Allow",
        onPress: () => getPermission(),
      },
      {
        text: "cancle",
        onPress: () => permissionAlert(),
      },
    ]);
  };

  const getAudioFiles = async () => {
    const mediaCountFunc = await MediaLibrary.getAssetsAsync({
      mediaType: "audio",
      mediaSubtypes: ["mp3"],
    });
    const totalCountvar = mediaCountFunc.totalCount;
    const media = await MediaLibrary.getAssetsAsync({
      mediaType: "audio",
      first: totalCountvar, // Retrieve all audio files
      mediaSubtypes: ["mp3"],
    });
    console.log(media);
    console.log(media.assets.length);
    setAudioFiles(media.assets);

  };

  const getPermission = async () => {
    const permission = await MediaLibrary.getPermissionsAsync();
    // console.log(permission);

    if (permission.granted) {
      // get all audio files
      getAudioFiles();
    }

    if (!permission.granted && permission.canAskAgain) {
      const { status, canAskAgain } =
        await MediaLibrary.requestPermissionsAsync();
      if (status === "denied" && canAskAgain) {
        // display alert for must allow permission
        permissionAlert();
      }
      if (status === "granted") {
        // get audio fils
        getAudioFiles();
      }
      if (status === "denied" && canAskAgain) {
        // display some error
      }
    }
  };

  return (
   
    <ScrollView style={{ flex: 1, width: "100%" }}>
      {audioFiles.length == 0 ? (
        <Image source={require("../assets/loader.gif")} />
      ) : (
        audioFiles.map((items, key) => {
          return items.filename.includes(".mp3") ? (
            <Text style={{ color: "#fff" }} key={key}>
              {items.filename}
            </Text>
          ) : undefined;
        })
      )}
    </ScrollView>
  );
}

export default AudioProvider;

how can i solve this or if there is another library that can achieve this i am open to suggestions

Answer 1

The expo-media-library alone cannot get the image of the audio files You can use the expo-music-info-2 library for this

https://github.com/MehrabSp/expo-music-info-2