Random splice image from image array and call function when array = empty

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width" />
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,700' rel='stylesheet' type='text/css'>

  <title>Scratch Card</title>
  <style type="text/css">
    html {
      box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    
    .scratchpad {
      width: 550px;
      height: 545px;
      border: solid 10px #00521c;
      margin: 0 auto;
    }
    
    body {
      background: #eeeeee;
    }
    
    .scratch-container {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      width: 100%;
    }
    
    @media only screen and (max-width: 480px) {
      .scratchpad {
        width: 400px;
        height: 396px;
      }
      .scratch-container {
        width: 400px !important;
      }
    }
    /* Custom, iPhone Retina */
    
    @media only screen and (max-width: 320px) {
      .scratchpad {
        width: 290px;
        height: 287px;
      }
      .scratch-container {
        width: 290px !important;
      }
    }
    
    .promo-container {
      background: rgb(247, 244, 244);
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      width: 450px;
      padding: 20px;
      margin: 0 auto;
      text-align: center;
      font-family: 'Open Sans', Arial, Sans-serif;
      color: #333;
      font-size: 16px;
      margin-top: 20px;
    }
    
    .btn {
      background: #00b3b6;
      color: #FFF;
      padding: 10px 25px;
      display: inline-block;
      margin-top: 15px;
      text-decoration: none;
      font-weight: 600;
      text-transform: uppercase;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radiuss: 3px;
    }
  </style>

</head>

<body>
  <div class="scratch-container">
    <div id="promo" class="scratchpad"></div>
  </div>
  <div class="promo-container" style="display:none;">
    <div class="promo-code"></div>
    <a href="htttp://jennamolby.com" target="_blank" class="btn">Redeem Now</a>
  </div>

  <!-- Replacing Script tag and adding jquery migrate plugin -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
  <!-- <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> -->
  <script type="text/javascript" src="https://jennamolby.com/scratch-and-win/js/wScratchPad.min.js"></script>

  <script type="text/javascript">
    var promoCode = '';
    var bg1 = 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg';
    var bg2 = 'https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg';
    var bg3 = 'https://www.w3schools.com/w3css/img_lights.jpg';
    var bg4 = 'https://www.publicdomainpictures.net/pictures/320000/nahled/background-image.png';
    var bg5 = 'https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg';
    var bgArray = [bg1, bg2, bg3, bg4, bg5];

    selectBG = bgArray.splice(Math.floor(Math.random() * bgArray.length), 1)[0];



    if (selectBG == bg1) {
      promoCode = 'IWDRM5';
    } else if (selectBG == bg2) {
      promoCode = 'IWDRM5';
    } else if (selectBG == bg3) {
      promoCode = 'IWDRM10';
    } else if (selectBG == bg4) {
      promoCode = 'IWDRM10';
    } else if (selectBG == bg5) {
      promoCode = 'IWDRM20';
    }
    if (bgArray.length === 0) {
      alert("No more voucher");
    }



    let audio = new Audio('https://www.gloo.com.my/catalog/view/theme/so-supermarket/template/information/custom/winwheel/tick.mp3');

    // This function is called when the sound is to be played.
    function playSound() {
      // Stop and rewind the sound if it already happens to be playing.
      audio.pause();
      audio.currentTime = 0;

      // Play the sound.
      audio.play();
    }

    $('#promo').wScratchPad({
      // the size of the eraser
      size: 50,
      // the randomized scratch image   
      bg: selectBG,
      // give real-time updates
      realtime: true,
      // The overlay image
      fg: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
      // The cursor (coin) image
      'cursor': 'url("https://jennamolby.com/scratch-and-win/images/coin1.png") 30 30, default',

      scratchMove: function(e, percent) {
        // Show the plain-text promo code and call-to-action when the scratch area is 50% scratched
        if ((percent > 50) && (promoCode != '')) {
          $('.promo-container').show();
          $('body').removeClass('not-selectable');
          $('.promo-code').html('Your voucher code is: ' + promoCode);
        }
      }
    });
  </script>


</body>

</html>