Wireless Buzzer App (Part II) (SoundButton.js)

Wireless Buzzer App

(Part II)


 SoundButton.js:


import * as React from 'react';
import { ViewTextStyleSheetTouchableOpacity } from 'react-native';
import { Audio } from 'expo-av';

export default class SoundButton extends React.Component {
  playSound = async () => {
    await Audio.Sound.createAsync(
      { uri: 'http://soundbible.com/mp3/Buzzer-SoundBible.com-188422102.mp3' },
      { shouldPlay: true }
    );
  };

  render() {
    return (
      <TouchableOpacity style={styles.button} onPress={this.playSound}>
        <Text style={{ fontSize: 20, fontWeight: 'bold', fontStyle: 'italic' }}>
          Press Me
        </Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    marginLeft: 20,
    borderWidth: 1,
    borderColor: 'black',
    alignItems: 'center',
    justifyContent: 'center',
    width: 200,
    height: 200,
    backgroundColor: 'red',
    borderRadius: 100,
  },
});




0 Comments: