Getting Started with React Native: Using Sound in project

Here in this article as in the previous one I would be making a small xylophone app and would be using some new components of react-native in this project.

I have built this same app in Flutter building it in React Native is quite fun.

Here I would be using StyleSheet, TouchableOpacity, Dimensions, and StatusBar in my app so I would be importing them into my project.

import { StyleSheet, TouchableOpacity , Dimensions ,StatusBar} from 'react-native';

now since this app would be containing sound files I would be making an array and would be accessing those sound files using the index.

const soundList = [
  require('./assets/note1.wav'),
  require('./assets/note2.wav'),
  require('./assets/note3.wav'),
  require('./assets/note4.wav'),
  require('./assets/note5.wav'),
  require('./assets/note6.wav'),
  require('./assets/note7.wav'),



];

now for playing sound I would be using Expo av it is an awesome package in react native also the documentation is very good here I modified the final function to take arguments.

export default function App() {
  const [sound, setSound] = React.useState();
  async function playSound(voice) {

    const { sound } = await Audio.Sound.createAsync(voice);
    setSound(sound);

    await sound.playAsync(); }

  React.useEffect(() => {
    return sound
      ? () => {
          sound.unloadAsync(); }
      : undefined;
  }, [sound]);

and at the last, I only have to do one thing that is to finally style the app and button I have finally taken the height of the full device and then divided it by the number of buttons. so my app works for all screen sizes. this is what the final code looks like.

import React from 'react';
import { StyleSheet, TouchableOpacity , Dimensions ,StatusBar} from 'react-native';
// import Sound from 'react-native-sound';
import { Audio } from 'expo-av';
import { Colors } from 'react-native/Libraries/NewAppScreen';


const soundList = [
  require('./assets/note1.wav'),
  require('./assets/note2.wav'),
  require('./assets/note3.wav'),
  require('./assets/note4.wav'),
  require('./assets/note5.wav'),
  require('./assets/note6.wav'),
  require('./assets/note7.wav'),



];
const buttonHeight = Dimensions.get('window').height ;

export default function App() {
  const [sound, setSound] = React.useState();
  async function playSound(voice) {

    const { sound } = await Audio.Sound.createAsync(voice);
    setSound(sound);

    await sound.playAsync(); }

  React.useEffect(() => {
    return sound
      ? () => {
          sound.unloadAsync(); }
      : undefined;
  }, [sound]);

  return (
    <>
    <StatusBar/>
    <TouchableOpacity style={styles.Button1} onPress={()=>{playSound(soundList[0])}}>
   </TouchableOpacity>
   <TouchableOpacity style={styles.Button2} onPress={()=>{playSound(soundList[1])}}>
   </TouchableOpacity>
   <TouchableOpacity style={styles.Button3} onPress={()=>{playSound(soundList[2])}}>
   </TouchableOpacity>
   <TouchableOpacity style={styles.Button4} onPress={()=>{playSound(soundList[3])}}>
   </TouchableOpacity>
   <TouchableOpacity style={styles.Button5} onPress={()=>{playSound(soundList[4])}}>
   </TouchableOpacity>
   <TouchableOpacity style={styles.Button6} onPress={()=>{playSound(soundList[5])}}>
   </TouchableOpacity>
   <TouchableOpacity style={styles.Button7} onPress={()=>{playSound(soundList[6])}}>
   </TouchableOpacity>
      </>
  );
}
// console.log(soundList[]);
const styles = StyleSheet.create({

 Button1:{
   height: buttonHeight/7,
   backgroundColor: "#EE3F0C",
 },
 Button2:{
  height: buttonHeight/7,
  backgroundColor: "#EE870C",
},
Button3:{
  height: buttonHeight/7,
  backgroundColor: "#FCDC0F",
},
Button4:{
  height: buttonHeight/7,
  backgroundColor: "#69CF0E",
},
Button5:{
  height: buttonHeight/7,
  backgroundColor: "#31B072",
},
Button6:{
  height: buttonHeight/7,
  backgroundColor: "#34A7C8",
},
Button7:{
  height: buttonHeight/7,
  backgroundColor: "#0f4c75",
},
});

Here is the link of Snack for this project Hope this article was useful.

Getting Started with React Native: Using Sound in project

Comments

React-Native

Getting Started with React Native: Taking input from the user

More from this blog

Say Hello to anonmsg.fun - an Anonymous Feedback platform

JavaScript Bazzi : Promise.all()

Building A QR code scanner and generator in Next.js

JavaScript Baazi: How to flatten an array in javaScript?

Introducing MeowForms 🐈 -Build Custom forms with no backend code for free 🐱 (my first SaaS product)

Command Palette

Comments

React-Native

Getting Started with React Native: Taking input from the user

More from this blog