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