如何防止音频短片停顿？（Javascript＆PHP）

我正在尝试使用我的Raspberry Pi，以便将来在房屋周围的自动化中使用。目前，我只是打开和关闭一些LED。这是一个非常简单的界面，我可以通过手机访问它。如何防止音频短片停顿？（Javascript＆PHP）

的按钮执行该激活在GPIO引脚两个Python脚本。点击每个按钮时，会发出短促的嘟嘟声。我遇到的唯一问题是，当单击关闭按钮时，您可以知道音频剪辑被缩短。我有一个不同的wav文件，大约2秒钟，它永远不会完成。

有人可以帮我解决这个问题吗？以下是使用脚本的整个页面。

<!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>

来源

2017-08-13 IRGeekSauce

您的问题是表单被提交，重新加载页面，并且音频在浏览器离开页面后立即停止播放。

你可以通过延迟表单提交来解决它，直到音频完成。
它更复杂一些，但使用类和一些技巧，它并不难

<!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>

请注意，你的HTML格式不正确，你在错误的地方

来源

2017-08-13 22:56:34 adeneo

关闭</div>整个声音正在播放。可悲的是，LED不再亮起。 – IRGeekSauce

@IRGeekSauce - 哦，您在提交时使用按钮。当你触发一个提交时，这是行不通的，但你可以使用一个隐藏的输入。编辑答案。 – adeneo

@ guest271314 - 不知道，这与Stacksnippets中的表单提交有关，并且与答案无关。 – adeneo

如何防止音频短片停顿？ （Javascript＆PHP）

回答

相关问题

如何防止音频短片停顿？（Javascript＆PHP）