13.- Juegos y Multimedia HTML5 - Etiqueta audio y Web Audio API

Utilizar la etiqueta audio es la forma mas fácil de incluir sonido y música en nuestras páginas. Su uso es muy similar al de la etiqueta video. Basta con poner en el atributo src la ruta del archivo de audio que quieras cargar.
<audio src="carpeta/archivo.extension">
     Tu navegador no soporta la etiqueta audio de HTML5
</audio>
Para reproducir ese sonido desde JavaScrip debemos de obtener el nodo, ya sea utilizando un id y la función document.getElementById("id_audio"), con querySelector() o de cualquier otra forma que quieras. Una vez obtenida la etiqueta, lo único que debe de hacerse para que comience la reproducción es llamar a su método play().
 Otra forma de usar esta etiqueta es la siguiente:
<audio>
     <source src="ruta1" type="MIMEType1">
     <source src="ruta2" type="MIMEType2">
     <source src="rutaN" type="MIMETypeN">
</audio>
Como puedes comprobar, puede haber tantas etiquetas como formatos distintos del archivo tengas. Con un par de formatos ya podrías cargar audio en los principales navegadores.
El problema de la etiqueta audio es que tiene un uso algo limitado. ¿Qué pasaría si quisiéramos reproducir un mismo sonido de una manera muy rápida? ¿Podemos aplicarle filtros de sonido a una etiqueta audio?
La solución a todos esos problemas (y a muchos otros) nos la da la API de sonido de Google Chrome, Web Audio API. El vídeo explica con un ejemplo las diferencias entre usar la etiqueta audio o usar la Web Audio API. El código del ejemplo se encuentra justo abajo, acordaros de incluir un archivo de audio y modificar la ruta para que pueda funcionar.




Código del archivo audio.html:
<!DOCTYPE html>
<html>
  <head>
    <title>Probando audio</title>
    <meta charset="UTF-8">
    <style>
        body {
            background-color: #f25F6e;
        }
    </style>
    <script type="text/javascript">

        window.AudioContext =
          window.AudioContext ||
          window.webkitAudioContext;
        var audioCtx = new AudioContext();
        var bufferPiano;

        function playSound(buffer)
        {
          var source = audioCtx.createBufferSource();
          source.buffer = buffer;
          source.connect(audioCtx.destination);
          source.start(0);
        }

        var request = new XMLHttpRequest();
        request.open("GET", "sonido/piano.wav", true);
        request.responseType = "arraybuffer";
        request.addEventListener("load", function ()
        {
          audioCtx.decodeAudioData(request.response, startShow, error);
        });
        request.send();

        function error()
        {
          alert("error");
        }

        function startShow(buffer)
        {
            bufferPiano = buffer;
        }

        window.addEventListener("keydown", function(){
          playSound(bufferPiano);
          //document.getElementById("audio").play();
        });

    </script>
  </head>
  <body>
    <audio id="audio" src="sonido/piano.wav">
    </audio>
  </body>
</html>



Índice del curso

No hay comentarios :

Publicar un comentario