Abspielen von Sound auf die zweite Webseite, wenn auf die erste Seite geklickt wird

Question

Ich möchte wissen, wie der Vorgang des Klickens auf eine Seite auf der anderen Seite einen Ton auf der anderen Seite oder den von Ihnen erstellten Seiten wiedergibt. Ich habe jedes Tutorial über das Abspielen eines Sounds mit Ajax verfolgt, aber ohne Erfolg funktioniert es nicht. Es ist für ein Warteschlangensystem. Mein Code Unten:

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

Answer 1

Ihre Fragen sind nicht vollständig. Aber wenn du meinst Sound auf der anderen Seite zu spielen, die im Browser in der Vergangenheit geöffnet wurde, dann machst du die nächsten Schritte:

1) Die erste Seite schreibt Informationen über den Sound, den du in der Datei abspielen willst (oder db) auf dem Server. Dieser Eintrag kann ein Pfad zur Audiodatei sein.

2) Zweite Seite durch die Ajax-Abfrage jede N Periode wird Informationen aus dieser Datei über tatsächliche Sound-Datei erhalten, um es zu spielen.