sound is not played using react-native-sound

Question

Im new to react-native and Im building an app to play sounds on button press and I couldnt achieve this, is it because of errors in my code ? Also pls suggest the solution for playing the sounds and suggest the corrections

Here's my code:

import React, { Component } from 'react';
import { StatusBar, Dimensions, Image, TouchableWithoutFeedback, Animated } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Sound from 'react-native-sound';

const a = require('./Images/landing-bnt1-on.png');
const b = require('./Images/landing-bnt1.png');
const c = require('./Images/landing-bnt2-on.png');
const d = require('./Images/landing-bnt2.png');

const btnSound = new Sound('./Sounds/btn_sound.mp3');

const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;

class MainScreen extends Component {
  state = {
    computerPressed: false,
    teamPressed: false
  }

  componentWillMount() {
       this.slide1 = new Animated.Value(0);
       this.slide2 = new Animated.Value(0);
   this.bnt1();
   this.bnt2();
 }
 bnt1() {
       Animated.timing(
         this.slide1, {
          delay: 100,
         toValue: w / 1.161,
         duration: 300,
       }
       ).start();
     }

 bnt2() {
           Animated.timing(
             this.slide2, {
             delay: 300,
             toValue: w / 1.161,
             duration: 300,
           }
           ).start();
         }
render() {
return (
  <Image
  source={require('./Images/bg_img.png')}
  style={styles.backgroundStyle} >

  <StatusBar hidden />

    <Image
    source={require('./Images/History.png')}
    style={styles.historybuttonStyle} />

    <Image
    source={require('./Images/logo_ws.png')}
    style={styles.logoStyle} />

<TouchableWithoutFeedback
onPress={() => {
  btnSound.play();
  Actions.screen2({ challenge: 'Computer' });
  }
}
onPressIn={() => {
    this.setState({ computerPressed: true });
  }
}
onPressOut={() => {
    this.setState({ computerPressed: false });
}
} >
    <Animated.Image
    source={this.state.computerPressed ? a : b}
    style={[styles.landingbnt1Style, { transform: [{ translateX: this.slide1 }] }]} />

</TouchableWithoutFeedback>

<TouchableWithoutFeedback
onPress={() => {
  Actions.screen2({ challenge: 'Team' });
  }
}
onPressIn={() => {
    this.setState({ teamPressed: true });
  }
}
onPressOut={() => {
    this.setState({ teamPressed: false });
}
} >
    <Animated.Image
    source={this.state.teamPressed ? c : d}
    style={[styles.landingbnt2Style, { transform: [{ translateX: this.slide2 }] }]} />
</TouchableWithoutFeedback>

</Image>
);
}
}
const styles = {

 backgroundStyle: {
    flex: 1,
    width: w,
    height: h,
    flexWrap: 'wrap',
    position: 'relative'
  },
  logoStyle: {
    width: w,
    height: h,
    resizeMode: 'contain',
    position: 'absolute',
     bottom: h / 15
  },
  historybuttonStyle: {
    width: w / 7.5,
    height: h / 14,
    right: (w / 20),
    top: (h / 40),
    position: 'absolute'
  },
  landingbnt1Style: {
    width: w / 1.44,
    height: h / 13.14,
    top: h / 1.41,
    left: -(w / 1.44)
  },
  landingbnt2Style: {
    width: w / 1.44,
    height: h / 13.14,
    top: h / 1.35,
    left: -(w / 1.44)
  }
};
export default MainScreen;

It may not be the correct way of using react-native-sound it is because i couldnt find an example it would be better I someone also share their codes using react-native-sound

Hope that this question helped someone like it helped me Meet u guys soon again with another awesome question until then sayonara follow me everywhere for more awesome stuffs ;) — dimpuW
– dimpuW, Commented Sep 1, 2017 at 7:54

Akshay Rao · Accepted Answer · 2017-08-30 06:30:13Z

5

You can't load the sound from any directories. You have to Save your sound clip files under the directory android/app/src/main/res/raw for android and for ios Open Xcode and add your sound files to the project (Right-click the project and select Add Files to [PROJECTNAME])

You can find the detail docs for this at the link below :-

Basic Usage

and for theworking example for this you can check code in the link below :-

Example demo

I hope this is what you are looking for :)

answered Aug 30, 2017 at 6:30

Akshay Rao

3,5441 gold badge17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dimpuW Over a year ago

That was very useful thankyou I didnt notice this part:android/app/src/main/res/raw we also need to add this const btnSound = new Sound('btn_sound.mp3', Sound.MAIN_BUNDLE); the Sound.MAIN_BUNDLE part must be added to the sound file

Collectives™ on Stack Overflow

sound is not played using react-native-sound

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related