Question

我正在试验我的Raspberry Pi，以便将来用于自动化房子周围的东西。现在，我只是打开和关闭一些LED。它是一个非常简单的界面，我可以通过手机访问它。

按钮执行两个python脚本，激活GPIO上的引脚。单击每个按钮时，会发出一声短促的哔声。我遇到的唯一问题是，当单击OFF按钮时，您可以看出音频剪辑被缩短了。我有一个大约2秒长的不同的wav文件，它永远不会完成。

有人可以帮我解决导致这种情况的原因吗？这是包含所用脚本的整个页面。

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

您的问题是表单已提交，会重新加载页面，并且一旦浏览器离开页面，音频就会停止播放。

您可以通过延迟表单提交来修复它，直到音频完成它涉及的有点多，但是使用类和一些技巧并不是那么难

＆＃13;

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

＆＃13;

请注意，您的HTML格式错误，您在错误的地方关闭</div>

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

1 个答案:

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

1 个答案:

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