React Native how to play a sound after an "onPress"?

Question

Here is some of my code:

<TouchableOpacity
       style={styles.button}
       onPress={this.onPress}
       >
       <Text> Play Sound </Text>
</TouchableOpacity>

I want to write a function "onPress" which will play an .mp3 sound. I have already imported react-native-sound and have my .mp3 file ready to go, I just don't know how to play the sound once the onPress function is called.

The docs bro, the docs! https://github.com/zmxv/react-native-sound/blob/master/README.md — Steve, Nov 03 '18 at 06:49

score 1 · Answer 1 · edited Nov 03 '18 at 10:39

In my opinion, if you want to listen the sound, you can try this. Syntax = react.

Import Sound from "react-native-sound";

Sound.setCategory('Playback');
const whoosh = new Sound('whoosh.mp3', Sound.MAIN_BUNDLE, (error) => {

if (error) {
 console.log('failed to load the sound', error);
 return;
 };
whoosh.play((success) => {
  if (success) {
  console.log('successfully finished playing');
  } else {
   console.log('playback failed due to audio decoding errors');
   reset the player to its uninitialized state (android only)
   whoosh.reset();
}

Muhammad Shaheem · Answer 2 · 2018-11-03T13:29:08.933

0

The easiest way is First to create a new instance like Following. create this in a constructor to load it when the component mount Note: please put your mp3 or wav file in android/app/src/main/res/raw

const whoosh  = new Sound('swoosh.mp3', Sound.MAIN_BUNDLE);

just call it in your function

whoosh.play()

edited Nov 03 '18 at 13:29

answered Nov 03 '18 at 10:10

Muhammad Shaheem

607
5
14

And how is this different from the answer that was already there? – Isma Nov 03 '18 at 10:40
it's just a two-line code bro and easy to understand – Muhammad Shaheem Nov 03 '18 at 13:27
In my experiment, the sound file must be referenced as `./swoosh.mp3`, not `swoosh.mp3` (note the preceding dot and slash), otherwise an error will be thrown during bundling (TypeError: Cannot read property 'concat' of undefined in DeltaPatcher.js:77) – nitroglycerine Apr 17 '19 at 07:38

score 0 · Answer 3 · edited Apr 02 '22 at 10:57

npm install react-native-sound and link with your project.

Import sound from react-native-sound
// or
import Sound from 'react-native-sound';

Put your mp3 file inside the folder and mention the path:

const requireAudio = require('./xyz.mp3');

Place this code inside your "onPress" function.

    const s = new Sound(requireAudio, (e) => {
            if (e) {
              console.log('Error in SOUND', e);
              return;
            }
            s.play(() => s.release());
          });

React Native how to play a sound after an "onPress"?

3 Answers3