如何防止音频片段停止短路？（Javascript和PHP）

Question

I'm experimenting with my Raspberry Pi for future use in automating stuff around the house. 我正在试验我的Raspberry Pi，以便将来用于自动化房子周围的东西。 For now, I'm just turning some LEDs on and off. 现在，我只是打开和关闭一些LED。 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. 这些按钮执行两个python脚本，用于激活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. 我遇到的唯一问题是，当单击OFF按钮时，您可以判断音频剪辑是否被缩短。 I had a different wav file that was about 2 seconds long, and it would never finish. 我有一个大约2秒长的不同的wav文件，它永远不会完成。

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>

Answer 1

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 请注意，您的HTML格式错误，您在错误的位置关闭了</div>

如何防止音频片段停止短路？（Javascript和PHP）

问题描述

1 个解决方案

解决方案1
2 2017-08-13 22:56:34

如何防止音频片段停止短路？ （Javascript和PHP）

问题描述

1 个解决方案

解决方案1 2 2017-08-13 22:56:34

如何防止音频片段停止短路？（Javascript和PHP）

解决方案1
2 2017-08-13 22:56:34