Play a beep sound when new record in MySQL - HTML table

Question

So, I have a PHP - Symfony 3 project connected to a MySQL Database through an API to let customers place orders through an Android APP. I need the Browser to play a beep sound when a new order has been placed (orders are shown in an HTML table) So I guess the sound has to be played using Javascript when the table changes. Any ideas on how to accomplish this? Thank you in advance. I will post the index view code below if it helps

{% extends 'base.html.twig' %}

{% block body %}
<h1 class="page-header">Listado de Aderezos</h1>

<table class="table table-striped table-responsive" id="data">
    <thead>
        <tr>
            <th>Id</th>
            <th>Nombre</th>
            <th>Descripcion</th>
            <th style="display:none;">Deleteat</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
    {% set cont = 0 %}
    {% for Aderezo in aderezos %}
        <tr>
            <td><a href="{{ path('aderezo_show', { 'id': Aderezo.id }) }}">{{ Aderezo.id }}</a></td>
            <td>{{ Aderezo.nombre }}</td>
            <td>{{ Aderezo.descripcion }}</td>
            <td>{{ Aderezo.deleteAt }}</td>
            <td>
                <div class="btn-group">

                            <a id="viewedit{{ cont }}" class="btn btn-sm btn-outline-primary" href="{{ path('aderezo_show', { 'id': Aderezo.id }) }}">show</a>
                            {% set cont = cont + 1 %}

                            <a id="viewedit{{ cont }}" class="btn btn-sm btn-outline-primary" href="{{ path('aderezo_edit', { 'id': Aderezo.id }) }}">edit</a>
                            {% set cont = cont + 1 %}
                                <a class="btn btn-sm btn-outline-danger" href="{{ path('aderezo_delete', { 'id': Aderezo.id }) }}">Eliminar</a>                    </div>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

<a class="btn btn-block btn-lg" href="{{ path('aderezo_new') }}">Crear Nuevo Aderezo</a>

<script>
    $( document ).ready(function() {
        $('#data').DataTable({

            destroy:true,
            language:{
                "sProcessing":     "Procesando...",
                "sLengthMenu":     "Mostrar _MENU_ registros",
                "sZeroRecords":    "No se encontraron resultados",
                "sEmptyTable":     "Ningún dato disponible en esta tabla",
                "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix":    "",
                "sSearch":         "Buscar:",
                "sUrl":            "",
                "sInfoThousands":  ",",
                "sLoadingRecords": "Cargando...",
                "oPaginate": {
                    "sFirst":    "Primero",
                    "sLast":     "Último",
                    "sNext":     "Siguiente",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                }
            }

        });
    });

</script>
<script>
    $( document ).ready(function() {
        var contador = {{ cont }};
        while (contador >= 0){


            if ( $('#viewedit'+contador).text() =='show'){
                $('#viewedit'+contador).text("Ver");
            }

            if ($('#viewedit'+contador).text()=='edit'){
                $('#viewedit'+contador).text("Editar");
            }
            contador = contador - 1;
        }


    });
</script>
{% endblock %}

Answer 1

If it's a simple sound you can base64 encode the binary data of the file into a string. See this answer.

Then play the sound through Javascript. See this answer.