How to stop a sound when the stop button is clicked in snack expo?

I am making an app which has some buttons that play different sounds, and a stop button which stops all the sounds. However, it works only when the current sound playing stops, and does not play any other music. Is the function incorrect? Here is the code(the other buttons are written in the same way as the first button):

import React, { Component } from 'react';
import { Button, View, Text, Alert, TouchableOpacity } from 'react-native';
import {Audio} from "expo-av";

class Button1 extends React.Component {
   playSound1 = async () => {
     await Audio.Sound.createAsync(
       {uri:"https://s1.yt.ninja/@download/23481-602b351bd79f3-10112020-252-320-file-10112020/mp3/lcVNSPXM2Nc/The%2BUntamed%2BOST%2B%257C%2B%25E9%2599%2588%25E6%2583%2585%25E4%25BB%25A4%2BMain%2BThemed%2BSong%25E3%2580%258A%25E6%2597%25A0%25E7%25BE%2581%2BWu%2BJi%25E3%2580%258B%25E2%2580%2594%25E2%2580%2594Xiao%2BZhan%2B%25E3%2580%2581Wang%2BYi%2BBo%2BDuet.mp3/9f05bbbdbd17b34a35bd40794186a567e755c50ee15ef6c77345bf1eaf7e8124-1"},
       {shouldPlay:true}
     )
  }



 render() {
    return (
      <TouchableOpacity style={{
        backgroundColor : "#D1A5C9",
        marginTop: 30,
        marginLeft: 25,
        width: 280,
        height: 40,
        alignItems: "center"
      }}
      onPress={this.playSound1}>

      <Text style={{
        color:"white",
       fontSize: 30,
      }}>Sound 1</Text>
      </TouchableOpacity>
    );
  }
}

class StopButton extends React.Component{
  render(){
    return(
      <TouchableOpacity style={{
        backgroundColor : "black",
        marginTop: 50,
        marginLeft: 40,
        width: 250,
        height: 40,
        alignItems: "center"
      }}
      onPress={() => {
        Audio.setIsEnabledAsync(false)
      }}>

      <Text style={{
        color:"white",
       fontSize: 30,
      }}>Stop Sound</Text>
      </TouchableOpacity>
    )
  }
}



export default class App extends React.Component {
  render() {
    return (
      <View>
        <Button1/>
        <Button2/>
        <Button3/>
        <Button4/>
        <Button5/>
        <StopButton/>
      </View>
    );
  }
}

Answer

It will work, but only on your phone, not the simulators or the web options

But once you stop it, it wont start sound again ever, unless you add this

    class SoundButton6 extends Component {
  render() {
return (
  <TouchableOpacity
    style={{
      backgroundColor: 'red',
      marginLeft: 100,
      borderWidth: 1,
      borderColor: 'black',
      alignItems: 'center',
      justifyContent: 'center',
      width: 200,
      height: 100,
      borderRadius: 100,
      marginTop: 10,
    }}
    onPress={ () => {
      Audio.setIsEnabledAsync(true);
    }}>
    <Text
      style={{
        fontWeight: 'bold',
        fontSize: 35,
      }}>
      Resume
    </Text>
  </TouchableOpacity>
);
   }
    }

a resume button

Advertisement

Answer