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

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

您的問題是表單已提交，會重新加載頁面，並且一旦瀏覽器離開頁面，音頻就會停止播放。

您可以通過延遲表單提交來修復它，直到音頻完成。
它涉及的更多，但使用類和一些技巧並不難

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

如何防止音頻片段停止短路？（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