1

una consulta estoy realizando un chat con php y ajax, actualmente puedo reproducir un sonido cuando envío el mensaje, pero el problema es que cuando llega nuevos mensajes quisiera que se reproduzca un sonido de aviso. Mi código es:

    <script>
        $(document).ready(function(){
            
        $("#submitmsg").click(function(){
        $(".audio")[0].play();
        var clientmsg = $("#usermsg").val();
    
        $.post("postchat-admin.php", {text: clientmsg, nombre_fichero:"<?php echo $nombrefichero?>" });
    
        $("#usermsg").val("");
                return false;
            });
    
            //Carga el archivo que contiene el log de chat
            function loadLog(){
    
                var oldscrollHeight = $("#chatbox").prop("scrollHeight") - 20; //La altura del scroll antes de la petición
                $.ajax({
                    url: "<?php echo $nombrefichero;?>",
                    cache: false,
                    success: function(html){ 
                        $("#chatbox").html(html); //Inserta el log de char en el div #chatbox
    
                        //Auto-scroll
                        var newscrollHeight = $("#chatbox").prop("scrollHeight") - 20; //La altura del scroll después del pedido
                        if(newscrollHeight > oldscrollHeight){
                            $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); 

                        }
                    },
                });
            }

            setInterval (loadLog, 1500);    
        });
    </script>

1 respuesta 1

0

Lo recomendable es utilizar la API de Audio de JavaScript. Aquí tienes una manera de hacerlo en tu código:

  1. Agrega un elemento de audio en tu HTML para reproducir el sonido de notificación. Por ejemplo:
<audio id="notificationSound">
    <source src="notification.mp3" type="audio/mpeg">
</audio>

Asegúrate de tener un archivo de sonido notification.mp3 en la misma ubicación que tu archivo HTML.

  1. En tu función loadLog() para que reproduzca el sonido de notificación cuando lleguen nuevos mensajes. Puedes hacerlo de la siguiente manera:
function loadLog() {
    var oldscrollHeight = $("#chatbox").prop("scrollHeight") - 20;

    $.ajax({
        url: "<?php echo $nombrefichero;?>",
        cache: false,
        success: function(html) {
            var chatbox = $("#chatbox");
            var isScrolledToBottom = chatbox.prop("scrollHeight") - chatbox.scrollTop() === chatbox.outerHeight();

            chatbox.html(html);

            if (isScrolledToBottom) {
                chatbox.animate({ scrollTop: chatbox.prop("scrollHeight") }, "normal");
            } else {
                // Reproduce el sonido de notificación si no está en la parte inferior del chat
                var notificationSound = document.getElementById("notificationSound");
                notificationSound.play();
            }
        },
    });
}

Lo que hago es que se verifica si el chat está desplazado hasta la parte inferior antes de actualizar el contenido. Si está en la parte inferior, el scroll se mantiene en la parte inferior después de la actualización. Si no está en la parte inferior, se reproduce el sonido de notificación.

Nota: es posible que exista algun error de reproduccion, si el usuario no ha interactuado con la pagina web; antes de implementar esto, es importante que detectes esa interaccion y si existe entonces habilitar la reproduccion de audio.

Aqui te dejo un ejemplo de la implementacion de la api de audio y un evento sin ajax:

<!DOCTYPE html>
<html>
<head>
    <title>Chat</title>
</head>
<body>
    <div id="chatbox"></div>

    <form id="chatForm">
        <input type="text" id="usermsg" placeholder="Escribe tu mensaje">
        <input type="submit" value="Enviar">
    </form>

    <audio id="notificationSound">
        <source src="https://actions.google.com/sounds/v1/alarms/alarm_clock.ogg" type="audio/ogg">
    </audio>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#chatForm").submit(function(event) {
                event.preventDefault();

                var clientmsg = $("#usermsg").val();
                $("#usermsg").val("");

                // Aquí puedes realizar las acciones necesarias con el mensaje enviado
                // por ejemplo, enviarlo a través de una solicitud AJAX al servidor

                return false;
            });

            function checkNewMessages() {
                // Aquí puedes realizar la lógica para verificar si hay nuevos mensajes
                // en el servidor, por ejemplo, enviando una solicitud AJAX al servidor

                // Si hay nuevos mensajes, reproduce el sonido de notificación
                var notificationSound = document.getElementById("notificationSound");
                notificationSound.play();
            }

            setInterval(checkNewMessages, 1500);
        });
    </script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.