Odtwórz dźwięk, następnie wyślij formularz

Question

Witam serdecznie. Dodałem do formularza funkcję informowania dźwiękiem o poprawnie wysłanym formularzu.
Dźwięk ten odtwarzany jest w momencie kliknięcia przycisku "Wyślij", jeszcze zanim formularz zdąży się wysłać.
Niestety, mimo tego że dźwięk trwa tylko jedną sekundę, to i tak nie zdąży się odtworzyć do końca, ponieważ formularz się wysyła i strona się odświeża. Czy istnieje możliwość wysłania formularza dopiero wtedy, gdy dźwięk zostanie odtworzony do końca? 

Oto krótki kod. Wystarczy kliknąć przycisk "wyślij".

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form method="POST" name="add_order" action="<?php echo $_SERVER['PHP_SELF']; ?>" >

  <input type="text" name="o_user" placeholder="Username"  />
  <input type="text" name="o_mail" placeholder="E-mail"  />
  <input type="password" name="o_pass" placeholder="Password"  />
  
  <input type="submit" id="add_order_btn" name="add_order_btn" value="-- WYŚLIJ --" />
  
</form>

<audio id="audio" src="http://www.temp-17-08-2017.cba.pl/buttonsound.mp3" ></audio>

 

        function play(){
            document.getElementById("audio").play();
        }
        $(function(){
           $("#add_order_btn").click(function(){ play(); });
        });

 

* { margin: 0; padding: 0; border:none; outline: none; }
body {
  width: 100%;
  background-color: #404040;
}
form {
  background-color: #333;
  padding: 15px;
  width: 200px;
  margin: 50px auto;
}
input{
  text-align: center;
  width: 100%;
  height: 30px;
  margin-bottom: 15px;
  letter-spacing: 1.5px;
}
input[type="submit"] {
  margin-bottom: 0;
}

 

Answer 1

Lepiej skorzystać z eventu submit na formularzu niż click na inpucie.

Zablokuj domyślną akcje, wywołaj funkcje play i dodaj timer, który po sekundzie wyśle formularz.