如何防止音频剪辑停止短？ (Javascript & PHP)答案

【问题标题】：How to prevent audio clip from stopping short? (Javascript & PHP)如何防止音频剪辑停止短？ (Javascript & PHP)
【发布时间】：2017-08-13 22:35:47
【问题描述】：

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

按钮执行两个 python 脚本来激活 GPIO 上的引脚。单击每个按钮时，会发出一声短促的哔哔声。我遇到的唯一问题是，当单击“关闭”按钮时，您可以看出音频剪辑被剪短了。我有一个大约 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>

【问题讨论】：

标签： javascript php python audio

【解决方案1】：

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

您可以通过延迟提交表单直到音频完成来解决此问题。
这有点复杂，但使用类和一些技巧并不难

<!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 格式不正确，您在错误的位置关闭了 </div>

【讨论】：

现在正在播放整个声音。遗憾的是，LED 不再亮起。
@IRGeekSauce - 哦，您在提交时使用了按钮。当您触发提交时，这将不起作用，但您可以只使用隐藏的输入。编辑了答案。
@guest271314 - 不知道，这与stacksn-ps中的表单提交有关，与答案无关。