How to prevent audio clip from stopping short? (Javascript & PHP)

I'm experimenting with my Raspberry Pi for future use in automating stuff around the house. For now, I'm just turning some LEDs on and off. It's a very simple interface, and I can access it from my phone.

The buttons execute two python scripts that activate the pins on the GPIO. When each button is clicked, a short beep is played. The only problem I'm having is that when the OFF button is clicked, you can tell that the audio clip is cut short. I had a different wav file that was about 2 seconds long, and it would never finish.

Can someone help me out on what would cause this? Here is the entire page with the scripts used.

<!DOCTYPE html>
<?php
    //CODE TO EXECUTE PYTHON SCRIPTS FOR RASPBERRY PI GPIO

    if (isset ($_POST['LightON'])) {
    exec('python blink_loop.py');
    }
    if(isset ($_POST['LightOFF'])) {
    exec('python led_off.py');
    exec('killall python');
    }
?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lazy LED</title>
<link rel="stylesheet"     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="icon" href="css/images/favicon.ico">
<link rel="stylesheet" href="css/styles.css">
</head>

<div class="container center_div">
<img src="css/images/light-bulb-icon-64.png"/>
<form method="post">
<h2>LED Controls</h2>
<audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autostart="false"></audio>

<div class="btn_container">
<button class="btn btn-lg btn-primary btn-block" name="LightON" onclick="playSound();">ON</button>
<br/>
<button class="btn btn-lg btn-primary btn-block" name="LightOFF" onclick="playSound();">OFF</button>

</form>
</div>
</div>
<!-- SCRIPT THAT PLAYS THE SOUNDS -->
<script>
    function playSound() {
    var sound = document.getElementById("audio");
    sound.play();
    }
</script>
</html>