title: How to make images change a little quicker?
body: <p>My code works just fine but for some reason when you click on the play button it takes a bit longer to switch over to the pause sign, and occasionally it takes a bit longer for the pause button to go to the play button. I also have one more question, when you click on the rain and beach icon there's a blue square border that I didn't remember putting, how do you remove it?
  Thanks, Love2code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Meditation App&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"&gt;
      &lt;style&gt;
          *{
              margin:0;
              padding:0;
              box-sizing:border-box;
  
          }
          .app{
              height:100vh;
              display:flex;
              justify-content:space-evenly;
              align-items:center;
  
          }
          .time-select,.sound-picker,.player-container{
              height:80%;
              flex:1;
              display:flex;
              flex-direction:column;
              justify-content:space-evenly;
              align-items:center;
  
          }
          .player-container{
              position:relative;
          }
          .player-container svg{
              position:absolute;
              height:50%;
              top:50%;
              left:50%;
              transform:translate(-50%,-50%);
              pointer-events:none;
  
          }
  
          .time-display{
              position:absolute;
              bottom:10%;
              color:white;
              font-size:50px;
          }
          video{
              position:fixed;
              top:0%;
              left:0%;
              width:100%;
              z-index:-10;
  
          }
          .time-select button, 
          .sound-picker button{
              color:white;
              width:30%;
              height:10%;
              background:none;
              border:2px solid white;
              cursor:pointer;
              border-radius:5px;
              font-size:20px;
              transition:all 0.5s ease;
          }
          .time-select button:hover{
              color:black;
              background:white;
  
          }
          .sound-picker button{
              border:none;
              height:120px;
              width:120px;
              border-radius:50%;
          }
          .sound-picker button:nth-child(1){
              background:#4972a1;
     
  
          }
          .sound-picker button:nth-child(2){
              background:#a14f49;
          }
    .sound-picker:focus{
    outline: none;
  }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="app"&gt;
          &lt;div class="vid-container"&gt;
              &lt;video Loop&gt;
                  &lt;source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/&gt;
              &lt;/video&gt;
          &lt;/div&gt;
          &lt;div class="time-select"&gt;
              &lt;button data-time="120"&gt;2 Minutes&lt;/button&gt;
              &lt;button data-time="300"&gt;5 Minutes&lt;/button&gt;
              &lt;button data-time="600"&gt;10 Minutes&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="player-container"&gt;
              &lt;audio class="song"&gt;
                  &lt;source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"&gt;&lt;/source&gt;
              &lt;/audio&gt;
           &lt;img src="https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1" class="play-container" alt=""&gt;
          &lt;svg class="track-outline"
          width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
          &lt;circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/&gt;
      &lt;/svg&gt;
      &lt;svg class="moving-outline"
      width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/&gt;
  &lt;/svg&gt;
  &lt;h3 class="time-display"&gt;0:00&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="sound-picker"&gt;
      &lt;button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"&gt;&lt;img src="https://i.ibb.co/8BspYTV/rain-1.png"&gt;&lt;/button&gt;
      &lt;button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1"
      data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"&gt;&lt;img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"&gt;&lt;/button&gt;
  
  
  &lt;/div&gt;
  
  
  
  
  
  &lt;/body&gt;
  &lt;script&gt;
    const app = () =&gt; {
          const song = document.querySelector(".song");
          const play = document.querySelector(".play-container");
          const outline = document.querySelector(".moving-outline circle");
          const video = document.querySelector(".vid-container video");
  
          //Sounds
          const sounds = document.querySelectorAll(".sound-picker button");
          //Time Display
          const timeDisplay = document.querySelector(".time-display");
          //Get length of the outside
          const outlineLength = outline.getTotalLength();
          //Duration
          let fakeDuration = 600;
  
          outline.style.strokeDasharray = outlineLength;
    outline.style.strokeDashoffset = outlineLength;
    
    //play sounds
    play.addEventListener("click", () =&gt; {
     checkPlaying(song);
    });
    //stop and play the sounds
    const checkPlaying = song =&gt;{
      if(song.paused){
     song.play();
     video.play();
     play.src = 'https://www.dropbox.com/s/3zvnjkebwt1sjgq/download%20%283%29.svg?raw=1';
    }else{
     song.pause();
     video.pause();
     play.src = 'https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1';
    }
    }
      };  
      app();
  &lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>