'Playing an audio file with react-native-sound-player

I just started using React Native and am working on a second trial to play an audio file in a test app. But it fails. Here is what I do:

First setting the app, on the terminal.

$ expo init TestAudioRNSP
$ cd TestAudioRNSP
$ npm install --save react-native-sound-player

The last comment displays this message:

npm WARN [email protected] requires a peer of react@^18.0.0 but none is installed. You must install peer dependencies yourself.

At this point I have tried several options like running the following commands (or doing nothing):

$ npm install react@^18.0.0
$ npm i install-peers -D

But it makes no difference in the final result.

I then run:

$ npm run web

Here is the source code for App.js:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Button, View } from 'react-native';
import React, { useEffect } from 'react';
import SoundPlayer from 'react-native-sound-player'

export default function App() {

  useEffect(() => {
    try {
      SoundPlayer.playSoundFile('TEST', 'mp3')
    } catch (e) {
        console.log(`cannot play the sound file`, e)
    }
  }, []);

  const playSound_Local = () => {
    console.log('playSound_Local CALLED !!')
  }

  return (
    <View style={styles.container}>
      <Button title='Play-Sound!'
            onPress={playSound_Local}
      />

      <StatusBar style="auto" />
    </View>
  );
}

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

And this is what I can see in the logs of the web console:

Navigated to http://localhost:19006/
GEThttp://localhost:19006/
[HTTP/1.1 304 Not Modified 74ms]

Error in parsing value for ‘-webkit-text-size-adjust’.  Declaration dropped.    localhost:19006:42:35
GEThttp://localhost:19006/static/js/bundle.js
[HTTP/1.1 304 Not Modified 4ms]

[HMR] Waiting for update signal from WDS... log.js:24
GETws://localhost:19006/sockjs-node
[HTTP/1.1 101 Switching Protocols 7ms]

Download the React DevTools for a better development experience: https://reactjs.   org/link/react-devtools react-dom.development.js:26244
Running application "main" with appParams:

Object { rootTag: "#root" }

Development-level warnings: ON.
Performance optimizations: OFF. index.js:89
cannot play the sound file TypeError: RNSoundPlayer is undefined
    playSoundFile index.js:15
    App App.js:19
    React 5
    unstable_runWithPriority scheduler.development.js:468
    React 3
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157
    js scheduler.development.js:180
    js scheduler.development.js:645
    Webpack 35
App.js:23
GEThttp://localhost:19006/favicon-16.png
[HTTP/1.1 200 OK 0ms]

I have searched the net based on the error messages, but didn't find any solution.

​Can anyone who knows how to play audio with react-native, give me a tip on what I should do?

Note: this is another post where I took a slightly different approach also failing.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source