オーディオクリップの停止を防ぐ方法を教えてください。（Javascript＆PHP）

私は自分のラズベリーパイを家の周りのものを自動化するために実験しています。今のところ、いくつかのLEDをオン/オフしています。非常にシンプルなインターフェースなので、携帯電話からアクセスできます。オーディオクリップの停止を防ぐ方法を教えてください。（Javascript＆PHP）

ボタンは、GPIOのピンをアクティブに2つのPythonスクリプトを実行します。各ボタンをクリックすると、短いビープ音が鳴ります。唯一の問題は、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>

出典

2017-08-13 IRGeekSauce

問題はフォームが送信され、ページがリロードされ、ブラウザがページを離れるとすぐに再生が停止することです。

フォーム提出をオーディオが完了するまで延期することで修正できます。
それは少しより複雑ですが、クラスといくつかのトリックを使用すると、それはあなたのHTMLが不正だったこと

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

ハード注ことはありません、あなたは間違った場所に決算</div>

出典

2017-08-13 22:56:34 adeneo

を持っています全体の音が今再生されています。悲しいことに、LEDはもはや点灯しません。 – IRGeekSauce

@IRGeekSauce - あなたは送信時にボタンを使用しています。これは送信をトリガするときにはうまくいかないが、代わりに非表示の入力を使うことができる。答えを編集しました。 – adeneo

@ guest271314 - わかりません。stacksnippetsでフォームを送信することと関係があり、実際には答えには関係しません。 – adeneo

オーディオクリップの停止を防ぐ方法を教えてください。 （Javascript＆PHP）

答えて

関連する問題

オーディオクリップの停止を防ぐ方法を教えてください。（Javascript＆PHP）