在第一页上单击按钮时播放声音到第二个网页
Posted
技术标签:
【中文标题】在第一页上单击按钮时播放声音到第二个网页【英文标题】：Play Sound to the 2nd web page when button is clicked on the first page 【发布时间】：2017-02-05 16:28:39 【问题描述】：我想知道，单击一个页面上的按钮会在另一个页面或您创建的页面上播放声音的过程是什么。我已经按照每个关于使用 ajax 播放声音的教程进行操作，但无济于事。这是一个排队系统。我的代码如下：
<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">© 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">© 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>
【问题讨论】：
你不能这样做（一种方法可能是使用网络套接字） 【参考方案1】：您的问题不完整。但是，如果您的意思是在过去在浏览器中打开的其他页面上播放声音，那么您可以进行下一步：
1) 第一页在服务器上的文件（或数据库）中写入有关您要播放的声音的信息。该记录可能是声音文件的路径。
2) 每 N 周期通过 ajax 查询的第二页将从该文件中获取有关实际声音文件的信息来播放它。
【讨论】：
好吧，我通过制作计数器和播放警报页面来尝试您的建议。非常感谢。以上是关于在第一页上单击按钮时播放声音到第二个网页的主要内容，如果未能解决你的问题，请参考以下文章