How to play corresponding sound in React Native?

JavaScript
1

This gives error.

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) {
  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');
    }
  });
}


function App() {
  return (
    <SafeAreaView>
      <View>
        <FlatList
          data={characters}
          renderItem={({ item }) => (
            <View style={styles.container}>
              <View
                style={{
                  padding: 10,
                }}>
                <TouchableOpacity onPress={() => playSound(item)} 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;
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.