javascript - 在第一页上单击按钮时，将声音播放到第二个网页-6ren

javascript - 在第一页上单击按钮时，将声音播放到第二个网页

转载作者：行者123 更新时间：2023-12-03 02:33:04

我想知道，单击一个页面上的按钮会在另一页面或您创建的页面上播放声音的过程是什么。我已经按照每本教程讲解如何使用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">&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>

最佳答案

您的问题不完整。但是，如果您是想在过去在浏览器中打开过的其他页面上播放声音，则可以执行以下步骤:

1)第一页在服务器上的文件(或db)中写入有关您要播放的声音的信息。该记录可能是声音文件的路径。

2)每隔N个周期，通过ajax查询的第二页将从该文件中获取有关播放实际声音文件的信息。

关于javascript - 在第一页上单击按钮时，将声音播放到第二个网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42054454/

文章推荐： elasticsearch - 如何在开发工具查询中使用 “OR”

文章推荐： audio - 无法将语音转换为文本

文章推荐： c# - 将JObject转换为匿名类型

文章推荐： audio - 处理节拍检测

flutter - 如何在Flutter中使用flutter_bloc自动刷新上一页(第一页)
SCENARIO 有两页，第一页是HomePage，它在flutter_bloc软件包的帮助下自动获取api数据。在首页(第一页)中，还有一个按钮，可在此代码Navigator.push(contex
php - Symfony 第一页 - 自动加载器预期的类 […] 将在文件中定义
我检查过类似的问题，但由其他人发布，但我仍然看不到我的代码有什么问题。我刚刚从文档中复制了它 - https://symfony.com/doc/3.4/page_creation.html Luc
python - SCRAPY:每次我的蜘蛛爬行时，它都会抓取同一页面(第一页)
我已经编写了一段代码，使用Python中的Scrapy来抓取页面。下面我粘贴了 main.py 代码。但是，每当我运行我的蜘蛛时，它仅从第一页抓取(DEBUG:从抓取)，这也是请求中的Referer标
ios - 使用 SkyDrive api ios 获取文件的缩略图(第一页)
我创建了一个 ios 图书阅读器应用程序。在这个应用程序中，我集成了 google drive 和 skydrive 。现在我可以从 google drive 和 skydrive 登录和检索数据了。
asp.net gridview分页：第一页下一页 1 2 3 4 上一页最末页
效果图：功能简介：可使用上下键选中行，选中后点击修改，textbox获得gridview中的代码的数据。对你有帮助的话，请记得要点击“好文要顶”哦!!!不懂的，请留言。废话不多说了，贴码如下

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在第一页上单击按钮时，将声音播放到第二个网页