最初のページでボタンをクリックしたときに2番目のWebページにサウンドを再生

-1

私が知りたいことは、1ページのボタンをクリックするプロセスが、作成した他のページでサウンドを再生することです。私はajaxを使ってサウンドを演奏するためのチュートリアルをたどってきましたが、役に立たないのはうまくいきません。キューイングシステム用です。私のコード以下：最初のページでボタンをクリックしたときに2番目のWebページにサウンドを再生

<code> 
//my JAVASCRIPT... 
$(document).ready(function(){ 

//sub button functionality... 
$("#sub").click(function(event){ 
    //alert(0); 
    event.preventDefault(); 
    $.ajax({ 
      url:"userinfo.php", 
      method:"POST", 
      data:$("form").serialize(), 
      success:function(data){ 
      $("#sub_msg").html(data); 
      //.fadeTo(1000, 500).slideUp(500, function(){$("#sub_msg").alert('close');}); 


      } 
     }) 
    }) 



$("#sub2").click(function(event){ 
    //alert(0); 
    event.preventDefault(); 
    $.ajax({ 
      url:"userinfo2.php", 
      method:"POST", 
      data:$("form").serialize(), 
      success:function(data){ 
      $("#sub_msg").html(data); 
      //.fadeTo(1000, 500).slideUp(500, function(){$("#sub_msg").alert('close');}); 


      } 
     }) 
    }) 

$("#sub3").click(function(event){ 
    //alert(1); 
    event.preventDefault(); 
    $.ajax({ 
      url:"userinfo3.php", 
      method:"POST", 
      data:$("form").serialize(), 
      success:function(data){ 
      $("#sub_msg").html(data); 
      //.fadeTo(1000, 500).slideUp(500, function(){$("#sub_msg").alert('close');}); 


      } 
     }) 
    }) 

//show data numbers only 
//number of customers in ticket 
setInterval(function(){$('#customerin').load('customerin.php')},100); 
setInterval(function(){$('#customerin2').load('customerin2.php')},100); 
setInterval(function(){$('#customerin3').load('customerin3.php')},100); 

//number of customers in queue 
setInterval(function(){$('#customerout').load('customerout.php')},100); 
setInterval(function(){$('#customerout2').load('customerout2.php')},100); 
setInterval(function(){$('#customerout3').load('customerout3.php')},100); 

//shows list of cardnumbers that is in queue FIFO 
setInterval(function(){$('#customers').load('ticketin.php')},100); 
setInterval(function(){$('#customers2').load('ticketin2.php')},100); 
setInterval(function(){$('#customers3').load('ticketin3.php')},100); 

//shows tables of each customer 
setInterval(function(){$('#tabs').load('calling.php')},100); 
setInterval(function(){$('#tabs2').load('calling2.php')},100); 
setInterval(function(){$('#tabs3').load('calling3.php')},100); 

//Format all tables and reseting the autoincrement counters... 
$("#purge").click(function(event){ 
    //alert(0); 
    event.preventDefault(); 
    $.ajax({ 
      url:"purge.php", 
      method:"POST", 
      success:function(data){ 
      //aler('message recieved'); 
      $("#sub_msg").html(data); 
      //.fadeTo(1000, 500).slideUp(500, function(){$("#sub_msg").alert('close');}); 
      } 
     }) 
    }) 

$("#call1").click(function(event){ 
    //alert(0); 
    event.preventDefault(); 
    $.ajax({ 
      url:"call1.php", 
      method:"POST", 
      success:function(data){ 
      //aler('message recieved'); 
      $("#product_msg1").html(data); 
      //.fadeTo(1000, 500).slideUp(500, function(){$("#sub_msg").alert('close');}); 
      } 
     }) 
    }) 

$("#call1").click(function(event){ 
    //alert(0); 
    event.preventDefault(); 
    $.ajax({ 
      url:"play.php", 
      method:"POST", 
      success:function(data){ 
      $("#embed").alert('message recieved'); 
      //$("#product_msg1").html(data); 
      //.fadeTo(1000, 500).slideUp(500, function(){$("#sub_msg").alert('close');}); 
      } 
     }) 
    }) 

$("#call1").click(function(event){ 
    <audio id='audiotag1' src='sound/bell.mp3' preload='auto' autoplay></audio> 

    }) 

$("#call2").click(function(event){ 
    //alert(0); 
    event.preventDefault(); 
    $.ajax({ 
      url:"call2.php", 
      method:"POST", 
      success:function(data){ 
      //aler('message recieved'); 
      $("#product_msg2").html(data); 
      //.fadeTo(1000, 500).slideUp(500, function(){$("#sub_msg").alert('close');}); 
      } 
     }) 
    }) 

$("#call3").click(function(event){ 
    //alert(0); 
    event.preventDefault(); 
    $.ajax({ 
      url:"call3.php", 
      method:"POST", 
      success:function(data){ 
      //aler('message recieved'); 
      $("#product_msg3").html(data); 
      $('#embed').load('play.php').html(data); 
      //.fadeTo(1000, 500).slideUp(500, function(){$("#sub_msg").alert('close');}); 
      } 
     }) 
    }) 

$("#recall").click(function(event){ 
    //alert(0); 
    event.preventDefault(); 
     $.ajax({ 
      url:"recall.php", 
      method:"POST", 
      data:$("form").serialize(), 
      success:function(data){ 
      //aler('message recieved'); 
      $("#product_msg1").html(data); 
      //.fadeTo(1000, 500).slideUp(500, function(){$("#sub_msg").alert('close');}); 
      } 
     }) 
    }) 

$("#recall2").click(function(event){ 
    //alert(0); 
    event.preventDefault(); 
     $.ajax({ 
      url:"recall2.php", 
      method:"POST", 
      data:$("form").serialize(), 
      success:function(data){ 
      //aler('message recieved'); 
      $("#product_msg2").html(data); 
      //.fadeTo(1000, 500).slideUp(500, function(){$("#sub_msg").alert('close');}); 
      } 
     }) 
    }) 

$("#recall3").click(function(event){ 
    //alert(0); 
    event.preventDefault(); 
     $.ajax({ 
      url:"recall3.php", 
      method:"POST", 
      data:$("form").serialize(), 
      success:function(data){ 
      //aler('message recieved'); 
      $("#product_msg3").html(data); 
      $('#embed').load('play.php').html(data); 
      //.fadeTo(1000, 500).slideUp(500, function(){$("#sub_msg").alert('close');}); 
      } 
     }) 
    }) 

}) 
</code> 

<code> 
//my display page: 
<div class="container-fluid"> 

      <!--navbar brand--> 
      <div class="navbar-header"> 
      <a href="#" class="navbar-brand">LOGO</a> 
      </div> 
     </div> 
    </div> 
    <!--navbar end--> 

    <p></br></p> 
    <p></br></p> 
    <p></br></p> 

<!--content page start--> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-12 col-xs-12"> 

       <div class="row"> 
        <div class="col-md-12 col-xs-12" id="product_msg"> 
        </div> 
        <div id="embed"></div> 

       </div> 

       <!--start panel--> 
       <div class="panel panel-info" id="scroll"> 
        <div class="panel-heading" style="text-align:center;font-size:90px;font-weight:bold;">NOW SERVING</div> 
        <div class="panel-body"> 

    <!--COUNTER 1--> 
    <div class="bs-calltoaction bs-calltoaction-default"> 
     <div class="row"> 
      <div class="col-md-6" style="text-align:center;font-size:70px;font-weight:bold;padding-top: 34px;"> 
       COUNTER #1 
      </div> 

      <div class="col-md-6" style="text-align:center;font-size:70px;font-weight:bold;"> 
       <div class="well well-lg" style="margin-bottom: 0px;"> 
        <div id="tabs"></div> 
       </div> 
      </div> 
     </div>  
    </div> 

    <!--COUNTER 2--> 
    <div class="bs-calltoaction bs-calltoaction-default"> 
     <div class="row"> 
      <div class="col-md-6" style="text-align:center;font-size:70px;font-weight:bold;padding-top: 34px;"> 
       COUNTER #2 
      </div> 

      <div class="col-md-6" style="text-align:center;font-size:70px;font-weight:bold;"> 
       <div class="well well-lg" style="margin-bottom: 0px;"> 
        <div id="tabs2"></div> 
       </div> 
      </div> 
     </div>  
    </div> 

    <!--COUNTER 3--> 
    <div class="bs-calltoaction bs-calltoaction-default"> 
     <div class="row"> 
      <div class="col-md-6" style="text-align:center;font-size:70px;font-weight:bold;padding-top: 34px;"> 
       COUNTER #3 
      </div> 

      <div class="col-md-6" style="text-align:center;font-size:70px;font-weight:bold;"> 
       <div class="well well-lg" style="margin-bottom: 0px;"> 
        <div id="tabs3"></div> 
       </div> 
      </div> 
     </div>  
    </div> 

         </div> 

        <div class="panel-footer">&copy; 2017 Created by W.G.D.A.</div><!--footer for col-md-8--> 

        <!-- 
        <div class="marquee"> 
        <marquee behavior=scroll direction="left" scrollamount="15">Your message here</marquee> 
        </div>--> 

       </div> 
       <!--end panel--> 
      </div> 
     </div> 
    </div> 
<!--content page end--> 
</code> 

<code> 
//the counter page 
<!--content page start--> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-2"></div><!--space--> 

      <div class="col-md-8 col-xs-12"> 

       <div class="row"> 
        <div class="col-md-8 col-xs-12" id="product_msg1"> 
         <!--MESSAGE HERE--> 
        </div> 
       </div> 

      <div class="panel panel-info" id="scroll"> 
       <div class="panel-heading"><h1>COUNTER #1</h1></div> 
        <div class="panel-body"> 
         <div class="row"> 
          <div class="col-md-6"> 
           <!--1--> 
           <div class="panel panel-info" id="scroll"> 
            <div class="panel-heading"><h3>NOW SERVING</h3></div> 
             <div class="panel-body"> 
              <div id="tabs" style="text-align:center;font-size:70px;font-weight:bold;"></div> 
             </div> 
           </div> 
           <!--2--> 
           <div class="panel panel-info" id="scroll"> 
            <div class="panel-heading"><h3>NEXT QUEUE</h3></div> 
             <div class="panel-body"> 
              <div id="customers"></div> 
             </div> 
           </div> 
           <!--3--> 
           <div style="text-align:center;margin-bottom:20px;"> 
            <input style="margin-right:5px;" value="CALL" type="button" id="call1" name="signup_button" class="btn btn-success"> 
            <INPUT style="" TYPE="button" onClick="history.go(0)" VALUE="Refresh" class="btn btn-default"> 

           </div> 

          </div> 
          <div class="col-md-6"> 
           <div class="panel panel-info" id="scroll"> 
            <div class="panel-heading"><h3>MISSED QUEUE</h3></div> 
             <div class="panel-body"> 
             <form id="myForm" action="recall.php" method="post"> 
              <div class="form-group updown"> 
               <input type="number" name="renumber" id="renumber" class="form-control textboxsize1" required style="margin:auto;" size="3" autocomplete="off" min="1" max="999" onkeypress="return isNumeric(event)" oninput="maxLengthCheck(this)" tabindex="1" value="0" data-toggle="modal" data-target="#myModal"> 
              </div> 
              <div style="text-align:center;"> 
               <input style="margin-right:5px;" value="RECALL" type="button" id="recall" name="recall" class="btn btn-success"> 
              </div> 
             </form> 
             </div> 
           </div> 

           <div style="text-align:center;"> 
            <a href="page2.php" class="btn btn-default">NEXT PAGE</a> 
           </div> 
          </div> 

         </div> 
        </div> 
       <div class="panel-footer">&copy; 2017 Created by W.G.D.A.</div><!--footer for col-md-8--> 
      </div> 

      </div> 

      <div class="col-md-2"></div><!--space-->   
     </div> 
    </div> 
<!--content page end--> 
</code>

出典

2017-02-05 Wilhelm Ang

あなたはこれを行うことはできません（ウェッブソケットを使用している可能性があります） –

あなたの質問は完全ではありません。しかし、あなたが過去にブラウザで開いていた他のページ、上の音を再生する意味ならば、あなたは、次のステップにすることがあります。

1）最初のページには、（ファイルで再生中に、お好みのサウンドに関する情報を書き込み、またはdb）をサーバー上に作成します。このレコードは、サウンドファイルへのパスです。

2）2番目のページは、N期間ごとに実際のサウンドファイルに関する情報を再生します。

出典

2017-02-05 17:06:34 Ans

私はカウンターと再生アラームページを作成してあなたの提案を試みます。どうもありがとうございました。 –

あなたは大歓迎です – Ans

最初のページでボタンをクリックしたときに2番目のWebページにサウンドを再生

答えて

関連する問題