'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 |
---|