How to Play Sounds in React Native

Hello there! If you're looking to add some audio flair to your React Native app, you've come to the right place. In this guide, I'll walk you through the process of playing sounds using the react-native-sound library.

Here's a step-by-step guide on how to play sounds in React Native using the react-native-sound library.

So, let's see how to play sounds in react native, react-native-sound, how to play sound in react native, react native play sound, how to play audio in react native, and how to play video in react native.

First things first, let's install the library using npm or yarn:

npm install react-native-sound
# or
yarn add react-native-sound

React Native 0.60 and above automatically link the library, but if you're using an older version, you might need to link it manually:

react-native link react-native-sound

For Android, you may need to add the following permission to your AndroidManifest.xml file:

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

Now, let's import react-native-sound in your component:

import Sound from 'react-native-sound';

Load the sound file you want to play using new Sound():

const sound = new Sound('your_sound_file.mp3', Sound.MAIN_BUNDLE, (error) => {
  if (error) {
    console.error('Failed to load the sound', error);
    return;
  }
  // Sound loaded successfully
});

Replace 'your_sound_file.mp3' with the path to your audio file.

Once the sound is loaded, you can play it using the play method:

sound.play((success) => {
  if (success) {
    console.log('Sound played successfully');
  } else {
    console.error('Failed to play the sound');
  }
});

You can pause, stop, or release the sound when it's no longer needed:

// Pause the sound
sound.pause();

// Stop the sound
sound.stop();

// Release the sound (frees up resources)
sound.release();

Here is complete example:

import React, {useEffect, useState} from 'react';
import {View, StyleSheet, TouchableOpacity} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

var Sound = require('react-native-sound');


Sound.setCategory('Playback');

var audio = new Sound('your_sound_file.mp3', null, error => {
    if (error) {
      console.log('failed to load the sound', error);
      return;
    }
    // if loaded successfully
    console.log(
      'duration in seconds: ' +
        audio.getDuration() +
        'number of channels: ' +
        audio.getNumberOfChannels(),
    );
  },
);
const App = () => {
  const [playing, setPlaying] = useState();
  useEffect(() => {
    audio.setVolume(1);
    return () => {
      audio.release();
    };
  }, []);
  const playPause = () => {
    if (audio.isPlaying()) {
      audio.pause();
      setPlaying(false);
    } else {
      setPlaying(true);
      audio.play(success => {
        if (success) {
          setPlaying(false);
          console.log('successfully finished playing');
        } else {
          setPlaying(false);
          console.log('playback failed due to audio decoding errors');
        }
      });
    }
  };
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.playBtn} onPress={playPause}>
        <Ionicons
          name={playing ? 'ios-pause-outline' : 'ios-play-outline'}
          size={36}
          color={'#fff'}
        />
      </TouchableOpacity>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000',
  },
  playBtn: {
    padding: 20,
  },
});
export default App;

Congratulations! You've successfully integrated sound playback into your React Native app using react-native-sound.

Happy coding! 🎵🚀

You might also like:

• Read Also: React Native Interview Questions (2024)
• Read Also: Laravel 10 REST API CRUD Operation
• Read Also: Laravel 10 one to one Relationship Example
• Read Also: Step-by-Step Guide: Installing React.js on Ubuntu