¿Cómo reproducir un sonido de notificación en sitios web?

Hay varias formas de reproducir un sonido de notificación en un sitio web. EN este artículo reproduciremos el sonido de notificación de tres maneras diferentes:

Uso del evento Onclick en JavaScript
Usando la clase de audio en Javascript
Usando Jquery puro:

A continuación, todos los procedimientos se explican en detalle con el código de ejemplo:

Uso del evento Onclick en Javascript: el evento onclick activa la función cuando el usuario hace clic en el botón. En el siguiente código, la función play1 está asociada con el evento onclick. La función play1 recibe el nombre del archivo de audio, luego seleccionamos la división con id=sound e inserta un HTML que contiene la etiqueta de audio.

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>Notification Sound</title>
        <style>
            body {
                text-align: center;
            }
            h1 {
                color: green;
            }
        </style>
        <script>
            function play1() {
                  
                /* Audio link for notification */
                var mp3 = '<source src=" " type="audio/mpeg">';
                document.getElementById("sound").innerHTML = 
                '<audio autoplay="autoplay">' + mp3 + "</audio>";
            }
        </script>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <b>Notification Sound</b>
        <br>
              
        <!-- The onclick fires play1 function -->
        <button onclick="play1();">
            Get notification sound
       </button>
        <div id="sound"></div>
    </body>
</html>

Uso de la clase de audio en JavaScript: este método utiliza únicamente JavaScript donde se crea un objeto de audio y el método audio.play() incorporado .

<!DOCTYPE html>
<html>
    <head>
        <title>Notification Sound</title>
        <style>
            body {
                text-align: center;
            }
            h1 {
                color: green;
            }
        </style>
        <script>
            function play2() {
  
                /* Audio link for notification */
                var audio = new Audio(" ");
                audio.play();
            }
        </script>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <b>Notification Sound</b>
        <br>
          
        <!-- Plays default sound that is 
             already set in the function -->
        <button onclick="play2();">
            Get notification sound
        </button>
    </body>
</html>

Usando Jquery puro: en este procedimiento, seleccionamos el ID de reproducción y lo vinculamos con el evento de clic. En la función, creamos un nuevo archivo de audio y luego lo reproducimos.

<!DOCTYPE html>
<html>
    <head>
        <title>Notification Sound</title>
        <style>
            body {
                text-align: center;
            }
            h1 {
                color: green;
            }
        </style>
        <script>
            $(document).ready(function() {
                $("#play").click(function() {
                      
                    /* Audio link for notification */
                    var audio = new Audio(" ");
                    audio.play();
                });
            });
        </script>
    </head>
    <body>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
        </script>
  
        <h1>GeeksforGeeks</h1>
        <b>Notification Sound</b>
        <br>
        <button id="play">
            Get notification sound
        </button>
    </body>
</html>

Salida: para cualquier procedimiento que utilice, funcionará igual.

Publicación traducida automáticamente

Artículo escrito por nikitadabral30 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta