How to play corresponding sound?

Joined
Jun 10, 2023
Messages
2
Reaction score
0
How to play corresponding sound in react native?
JavaScript:
import React from 'react';
import {
  Text,
  View,
  SafeAreaView,
  StyleSheet,
  FlatList,
  Button,
  TouchableOpacity,
} from 'react-native';

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

var characters = [
  'a',
  'b',
  'c',
  'd',
  'e',
  'f',
  'g',
  'h',
  'i',
  'j',
  'k',
  'l',
  'm',
  'n',
  'o',
  'p',
  'q',
  'r',
  's',
  't',
  'u',
  'v',
  'w',
  'x',
  'y',
  'z',
];

Sound.setCategory('Playback');



function playSound(item: any) {
  // Play the sound with an onEnd callback

}

function App() {
  return (
    <SafeAreaView>
      <View>
        <FlatList
          data={characters}
          renderItem={({ item }) => (
            <View style={styles.container}>
              <View
                style={{
                  padding: 10,
                }}>
                <TouchableOpacity
                  onPress={() => {
                    var whoosh = new Sound(item + '.mp3', Sound.MAIN_BUNDLE, (error: any) => {
                      if (error) {
                        console.log('failed to load the sound', error);
                        return;
                      }
                      // loaded successfully
                      console.log(
                        'duration in seconds: ' +
                        whoosh.getDuration() +
                        'number of channels: ' +
                        whoosh.getNumberOfChannels(),
                      );
                    });
                    whoosh.play((success: any) => {
                      if (success) {
                        console.log('successfully finished playing');
                      } else {
                        console.log('playback failed due to audio decoding errors');
                      }
                    });

                  }}
                  style={styles.button}>
                  <Text
                    style={{
                      fontSize: 20,
                    }}>
                    {item.toUpperCase()}
                  </Text>
                </TouchableOpacity>
              </View>
              <View
                style={{
                  padding: 10,
                }}>
                <TouchableOpacity style={styles.button}>
                  <Text
                    style={{
                      fontSize: 20,
                    }}>
                    {item}
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
          )}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
  },

  button: {
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0.2)',
    alignItems: 'center',
    justifyContent: 'center',
    width: 80,
    height: 80,
    backgroundColor: '#fff',
    borderRadius: 50,
  },
});

export default App;
 
Joined
Mar 31, 2023
Messages
95
Reaction score
8
The code you provided is a React Native code snippet for playing sounds corresponding to different characters. However, it seems that the playSound function is empty and needs to be implemented to actually play the sound.

To play the sound using the react-native-sound library, you can modify the playSound function as follows:

function playSound(item) {
var sound = new Sound(item + '.mp3', Sound.MAIN_BUNDLE, (error) => {
if (error) {
console.log('failed to load the sound', error);
return;
}
console.log(
'duration in seconds: ' +
sound.getDuration() +
' - number of channels: ' +
sound.getNumberOfChannels()
);
sound.play((success) => {
if (success) {
console.log('successfully finished playing');
// Do something after the sound has finished playing
} else {
console.log('playback failed due to audio decoding errors');
}
});
});
}

In this modified version, the playSound function creates a new Sound instance using the sound file name (e.g., 'a.mp3') and plays it. The play function accepts a callback that will be called when the sound finishes playing. You can perform any desired actions within that callback.

Remember to import the Sound module from react-native-sound at the top of your file:

import Sound from 'react-native-sound';

Make sure you have installed the react-native-sound library correctly and that the sound files (a.mp3, b.mp3, etc.) are present in the appropriate location in your project.

Feel free to modify the code to suit your specific requirements or add any necessary error handling.
 
Joined
Jun 10, 2023
Messages
2
Reaction score
0
The code you provided is a React Native code snippet for playing sounds corresponding to different characters. However, it seems that the playSound function is empty and needs to be implemented to actually play the sound.

To play the sound using the react-native-sound library, you can modify the playSound function as follows:

function playSound(item) {
var sound = new Sound(item + '.mp3', Sound.MAIN_BUNDLE, (error) => {
if (error) {
console.log('failed to load the sound', error);
return;
}
console.log(
'duration in seconds: ' +
sound.getDuration() +
' - number of channels: ' +
sound.getNumberOfChannels()
);
sound.play((success) => {
if (success) {
console.log('successfully finished playing');
// Do something after the sound has finished playing
} else {
console.log('playback failed due to audio decoding errors');
}
});
});
}

In this modified version, the playSound function creates a new Sound instance using the sound file name (e.g., 'a.mp3') and plays it. The play function accepts a callback that will be called when the sound finishes playing. You can perform any desired actions within that callback.

Remember to import the Sound module from react-native-sound at the top of your file:

import Sound from 'react-native-sound';

Make sure you have installed the react-native-sound library correctly and that the sound files (a.mp3, b.mp3, etc.) are present in the appropriate location in your project.

Feel free to modify the code to suit your specific requirements or add any necessary error handling.
This also doesn't work.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,708
Messages
2,569,347
Members
44,654
Latest member
7Jhamal74

Latest Threads

Top