How to prevent audio clip from stopping short? (Javascript & PHP)
Question
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>
1 answers
solution1
2 2017-08-13 22:56:34
Your issue is that the form is submitted, which reloads the page, and the audio stops playing as soon as the browser leaves the page.
You can fix it by delaying the form submit until the audio has completed.
It's a bit more involved, but using classes and some tricks it's not that hard
<!DOCTYPE html> <?php //CODE TO EXECUTE PYTHON SCRIPTS FOR RASPBERRY PI GPIO if (isset ($_POST['lights'])) { if ( $_POST['lights'] === 'on' ) { exec('python blink_loop.py'); } else { 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"> <input type="hidden" name="lights" /> <h2>LED Controls</h2> <audio id="audio" src="https://www.soundjay.com/button/sounds/button-2.mp3" autostart="false"></audio> <div class="btn_container"> <button class="btn btn-lg btn-primary btn-block" name="LightON">ON</button> <br/> <button class="btn btn-lg btn-primary btn-block" name="LightOFF">OFF</button> </div> </form> </div> <!-- SCRIPT THAT PLAYS THE SOUNDS --> <script> document.querySelector('form').addEventListener('submit', function(e) { if (!this.classList.contains('ready')) { e.preventDefault(); var myForm = this; if (this.classList.contains('on')) { var sound = document.getElementById("audio"); // sound for "on" document.querySelector('[name="lights"]').value = 'on'; } else { var sound = document.getElementById("audio"); // sound for "off" document.querySelector('[name="lights"]').value = 'off'; } sound.addEventListener('ended', function() { myForm.classList.add('ready'); myForm.submit(); }); sound.play(); } }); document.querySelector('[name="LightON"]').addEventListener('click', function() { this.form.classList.add('on'); }); document.querySelector('[name="LightOFF"]').addEventListener('click', function() { this.form.classList.add('off'); }); </script> </html>
Note that your HTML was malformed, you have a closing </div> in the wrong place
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.