Play an audio every time the BD changes

Asked

Viewed 743 times

0

I’m having problems with a page that reads the latest values entered in the comic book of a given counter.
The page has a section that is constantly being refreshed (Scores) and the idea is to play a sound every time there are changes in the comic book the problem is that it is always playing the way I’m doing.

Follow my code here:

<?php
    // Dados do banco
    $numA=0;
    $numB=0;
    $server = "egcubosserver";
    $options = array(  "UID" => "sa",  "PWD" => "Avintes@08",  "Database" => "Atendimento");
    $conn = sqlsrv_connect($server, $options);
    $sql = "SELECT max(numero) as maximo from fila";
    $query = sqlsrv_query($conn, $sql);
    $row = sqlsrv_fetch_array($query);
    $sqlA = "SELECT max(numero) as maximo,balcao as balcao 
            from fila
            where balcao ='A'
            Group by balcao";
    $queryA = sqlsrv_query($conn, $sqlA);
    $rowA = sqlsrv_fetch_array($queryA);
    $sqlb = "SELECT max(numero) as maximo,balcao as balcao 
            from fila
            where balcao ='B'
            Group by balcao";
    $queryb = sqlsrv_query($conn, $sqlb);
    $rowB = sqlsrv_fetch_array($queryb);        
        //$sqlinsert = "INSERT INTO [Atendimento].[dbo].[fila]([numero]) VALUES($num)";
        //sqlsrv_free_stmt($sqlinsert);
    $file='beep.mp3';
    $numa=$rowA['maximo'];
    $numb=$rowB['maximo'];  
    $a=$_GET['id'];
    file_put_contents("text1.txt",$a);  
?>
<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Business Casual - Start Bootstrap Theme</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/business-casual.css" rel="stylesheet">
    <!-- Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
    <!--<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

</head>
<body>
    <div class="brand">MGC-Transportes</div>
    <div class="address-bar">Por favor, aguarde a sua vez.</div>
    <div class="container">
    <?php
    file_put_contents("text.txt",$numa);                                
    if ($numA<$rowA['maximo'] || $numB>$controloB)
                            {                               
                                //echo "<audio controls autoplay='autoplay' style='display:none'><source src='beep.mp3' type='audio/mpeg'></audio>";                            
                            }   
    ?>
        <div class="row">
            <div class="box">
                <div class="col-lg-12 text-center">
                    <div id="carousel-example-generic" class="carousel slide">
                        <!-- Indicators -->
                        <ol class="carousel-indicators hidden-xs">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img class="img-responsive img-full" src="img/slide-1.jpg" height="20">
                            </div>
                            <div class="item">
                                <img class="img-responsive img-full" src="img/slide-2.jpg" height="20">
                            </div>
                            <div class="item">
                                <img class="img-responsive img-full" src="img/slide-3.jpg" height="20">
                            </div>
                        </div>
                        <!-- Controls -->
                        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                            <span class="icon-prev"></span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                            <span class="icon-next"></span>
                        </a>
                    </div>                  
                    <div id="scores">                   
                    <?php
                        if ($row['maximo']==NULL)
                        {       
                            $balcaoA='A';
                            $balcaoB='B';
                            $num=0;
                            $numA=0;
                            $numB=0;
                        }
                        else
                        {               
                            $controloA=$numA;
                            $controloB=$numB;
                            //file_put_contents("text.txt",$numa);                              
                            $num=$row['maximo'];
                            $numA=$numa;
                            $numB=$numb;                            
                        }
                    ?>
                        </h2>
                        <div class="col-lg-6 text-center">
                            <h1><?php echo ("Balcão")?>A<h1>
                            <hr class="tagline-divider">
                            <h2>
                                <?php
                                    echo "Número:".$rowA['maximo']."";
                                ?> 
                            </h2>                       
                        </div>
                        <div class="col-lg-6 text-center">
                            <h1><?php echo ("Balcão")?>B<h1>
                            <hr class="tagline-divider">
                            <h2>
                                <?php
                                    echo "Número:".$rowB['maximo']."";
                                    ?> 
                            </h2>                       
                        </div>

                    </div>
                    <script>
                        var $scores = $("#scores");
                        var $a = "<?php Print($numA); ?>";
                        setInterval(function () {
                        $scores.load("index.php #scores");
                        }, 3);
                    </script>
                </div>
            </div>
        </div>
    </div>
    <!-- /.container -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <p>Copyright &copy; MGC-Transportes</p>
                </div>
            </div>
        </div>
    </footer>
    <!-- jQuery Version 1.11.0 -->
    <script src="js/jquery-1.11.0.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Script to Activate the Carousel -->
    <script>
        $('.carousel').carousel({
            interval: 5000 //changes the speed
        })
    </script>
</body>
</html>

1 answer

1

do something like this in Reload:

    <script>
        var $scores = $("#scores");
        var $a = "<?php Print($numA); ?>";
        setInterval(function () {
        $scores.load("index.php?numA_anterior=<?php echo $rowA['maximo']; ?>&numB_anterior=<?php echo $rowB['maximo']; ?> #scores");
        }, 3);
    </script>

and so on the IF:

if ($_GET['numA_anterior'] < $rowA['maximo'] || $_GET['numB_anterior'] < $rowB['maximo'] )
                        {                               
                            echo "<audio controls autoplay='autoplay' style='display:none'><source src='beep.mp3' type='audio/mpeg'></audio>";                            
                        }
  • That way if I’m with the selected separator it doesn’t touch, minimize or change the separator on Chrome it’s always playing :)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.