react native play sound on event

Question

I have a component like:

import React, { Component } from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'


class MovieList extends Component {


    handlePress() {
        // Play some sound here
    }

    render() {
        const { movie } = this.props
        return (
            <TouchableOpacity onPress={this.handlePress.bind(this)}>
                <View style={styles.movie}>
                    <Text style={styles.name}>{movie.name}</Text>
                    <View style={styles.start}>
                        <Text style={styles.text}>Start</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}

Here when I touch the view I want to play some sound. I have googled about it but not found any appropriate answer

Is there anyway I can play sound when I press to something? How can I do this ?

Take a look at https://github.com/zmxv/react-native-sound it does exactly what you need. — Daniel Basedow, May 31 '16 at 07:32

score 23 · Answer 1 · edited Apr 24 '18 at 14:29

23

Check out React Native Sound - a cross platform component for accessing device audio controls.

You can use it like so:

const Sound = require('react-native-sound')

let hello = new Sound('hello.mp3', Sound.MAIN_BUNDLE, (error) => {
  if (error) {
    console.log(error)
  }
})

hello.play((success) => {
  if (!success) {
    console.log('Sound did not play')
  }
})

edited Apr 24 '18 at 14:29

David Schumann

13,380
9
75
96

answered May 31 '16 at 08:20

Tom Walters

15,366
7
57
74

Any example using this library `react-native-sound` but with url mp3 link? – jose920405 Apr 06 '17 at 13:39
2

You may want to require the sound also, else it is likely to error out. https://github.com/zmxv/react-native-sound/issues/120 – fodma1 May 15 '17 at 05:57
How to play sound on button press ? can u show some example – Adarsh Sreeram Aug 10 '17 at 07:20
whAT is "MAIN_BUNDLE". I copy paste the code just replace the name of my sound file but it is not playing ... – Chandni Aug 24 '18 at 12:02
1

just a heads up there's a documented bug in this that more people than just myself are running into and can't resolve. there's an android flag check happening with RNSound and myself and others that are making an iOS-only app are having issues resolving. – Stephen Tetreault Nov 10 '18 at 20:09

score 8 · Answer 2 · answered Jul 19 '17 at 11:49

8

You can try Audio component from expo-sdk.

Check an example here.

It works with sdk 18.

answered Jul 19 '17 at 11:49

Niakrais

438
1
6
12

link broken @niakrais – ManirajSS Jan 25 '23 at 05:43
A lot has changed since 2017, other answers are probably more relevant now. Anyways for historical purposes https://replit.com/@eryshev/Minimal-Sound-Example#index.js – Niakrais Jan 29 '23 at 20:31

score 2 · Answer 3 · answered Oct 16 '19 at 19:01

You can play the sound with the expo-av library like this.

import { Audio } from "expo-av";
class MovieList extends Component {


   async handlePress() {
     try {
        const { sound: soundObject, status } = await 
           Audio.Sound.createAsync('sound.mp3', { shouldPlay: true });
        await soundObject.playAsync();
        } catch (error) { console.log(error); }
    }

    render() {
        const { movie } = this.props
        return (
            <TouchableOpacity onPress={this.handlePress.bind(this)}>
                <View style={styles.movie}>
                    <Text style={styles.name}>{movie.name}</Text>
                    <View style={styles.start}>
                        <Text style={styles.text}>Start</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}

react native play sound on event

3 Answers3

Linked