brawlstars.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title class="title">CoolSounds</title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
</head>


<body>
  <br>
    <nav>
      <ul>
          <li><a href="index.html">Sounds</a></li>
          <li><a href="music.html">Music</a></li>
          <li><a href="brawlstars.html">Brawl Stars SFX</a></li>
          <li><a href="asmr.html">ASMR</a></li>
          <li><a href="darius-stims.html">Darius Stims SFX</a></li>
          <li><a href="brainrot.html">Brainrot</a></li>
          <li><a href="meetthedevs.html">Meet The Devs</a></li>
          <li><a href="https://docs.google.com/forms/d/e/1FAIpQLSdnLqKoBB-w4EcPaKMEak1pVmM3o3qkSeDoFNLPmjNilM7_yg/viewform" type="_blank">Sound Request</a></li>
        </ul>    
    </nav>
    <br><br>
    <div class="soundboard hidden">

        <h1 class="head">Brawl Stars SFX</h1>
        <p class="para" style="margin-top: -60px;">Press S to stop all sound</p>
        <center>
        <div class="toggle-container">
            <label class="toggle-switch">
              <input type="checkbox" id="overlapSwitch" onclick="toggleOverlap()">
              <span class="slider"></span>
            </label>
            <span id="overlapText">Sound Overlapping</span>
          </div>
        </center>
        <br><br>
        <div class="buttons">

        <button onclick="playSound('sfx1')">Supercell Sound</button>
        <button onclick="playSound('sfx2')">Showdown Sound</button>
        <button onclick="playSound('sfx3')">Showdown Start Sound</button>
        <button onclick="playSound('sfx4')">Showdown OST</button>
        <button onclick="playSound('sfx5')">Respawn Sound</button>
        <button onclick="playSound('sfx6')">Man Man Dela</button>
        <button onclick="playSound('sfx7')">Hypercharge Sound</button>
        <button onclick="playSound('sfx8')">Losing Phonk</button>
        <button onclick="playSound('sfx9')">Brawl of It</button>
        <button onclick="playSound('sfx10')">Voice Lines Song</button>
        <button onclick="playSound('sfx11')">Edgar Voice Lines</button>

        
        </div>

        <audio class="Audio" id="sfx1" src="audio/supercell.mp3"></audio>
        <audio class="Audio" id="sfx2" src="audio/showdown.mp3"></audio>
        <audio class="Audio" id="sfx3" src="audio/showdown2.mp3"></audio>
        <audio class="Audio" id="sfx4" src="audio/showdownfullsong.mp3"></audio>
        <audio class="Audio" id="sfx5" src="audio/respawn.mp3"></audio>
        <audio class="Audio" id="sfx6" src="audio/mandela.mp3"></audio>
        <audio class="Audio" id="sfx7" src="audio/hyper.mp3"></audio>
        <audio class="Audio" id="sfx8" src="audio/phonkbs.mp3"></audio>
        <audio class="Audio" id="sfx9" src="audio/brawlofit.mp3"></audio>
        <audio class="Audio" id="sfx10" src="audio/voicelines.mp3"></audio>
        <audio class="Audio" id="sfx11" src="audio/edgar.mp3"></audio>
        <!--Add more audio like above-->

        <br><br><br>
        <footer>
          <p class="pg">Made by <a href="https://SprintingSnail69.github.io" target="_blank">SprintingSnail69</a> and <a href="https://cobblesteve01.github.io" target="_blank">cobblesteve01</a></p>
        </footer>

    </div>

</div>

  <div class="snowflakes" aria-hidden="true">
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <div class="snowflake"></div>
    <!-- Add more snowflake divs as needed -->
  </div>

    <!--JS files teehee-->
    <script src="sound.js"></script>

</body>
</html>