14.- Juegos y Multimedia HTML5 - Web Audio API: start, stop, loops, volumen...

Continuemos con el Web Audio API. Como bien se puede ver en el título del artículo, vamos a ver bastantes cosas del Web Audio API, todas ellas muy sencillas. Veremos un par de parámetros más del método start, veremos como parar sonidos con el método stop, aprenderemos a hacer que un sonido se repita muchas veces (loops), controlaremos el volumen de la reproducción (de dos maneras diferentes) y controlaremos la velocidad de reproducción.



Código de los archivos usados en el vídeo.

Código 1. Cambiar volumen sin GainNode. Ver la página funcionando aquí.
<!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, source;

        function playSound(buffer)
        {
          if (source && source.playbackState == source.PLAYING_STATE)
              source.stop(0);
          else
          {
            source = audioCtx.createBufferSource();
            source.playbackRate.value = 0.5;
            source.buffer = buffer;
            source.loop = true;
            source.loopEnd = 0.4;
            source.loopStart = 0.2;
            source.connect(audioCtx.destination);
            source.start(0, 0.2, 0.2);
          }
        }

        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(){
          if (bufferPiano) playSound(bufferPiano);
        });

        function changeVolumen(v)
        {
          bufferPiano.gain = v;
        }

    </script>
  </head>
  <body>
    <audio id="audio" src="sonido/piano.wav">
    </audio>
    <input type="range" min="0" max="100" value="100"
        onchange="changeVolumen(this.value/100)">
    </input>
  </body>
</html>

Código 2. Cambiar volumen con GainNode. El funcionamiento es exactamente el mismo que el del código anterior. La única diferencia es la forma de escribirlo.
<!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, source, gainNode;

        function playSound(buffer)
        {
          if (source && source.playbackState == source.PLAYING_STATE)
              source.stop(0);
          else
          {
            source = audioCtx.createBufferSource();
            gainNode = audioCtx.createGain();
            source.buffer = buffer;
            source.connect(gainNode);
            gainNode.connect(audioCtx.destination);
            source.loop = true;
            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(){
          if (bufferPiano) playSound(bufferPiano);
        });

        function changeVolumen(v)
        {
          if (gainNode) gainNode.gain.value = v;
        }

    </script>
  </head>
  <body>
    <audio id="audio" src="sonido/piano.wav">
    </audio>
    <input type="range" min="0" max="100" value="100"
        onchange="changeVolumen(this.value/100)">
    </input>
  </body>
</html>

Código 3. Muestra como cambiar la velocidad de reproducción en una etiqueta video. Podría realizarse también en una etiqueta audio.
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="author" content="http://programmingheroes.blogspot.com.es">
  </head>
  <script>
    window.onload = function()
    {
      document.querySelector("video").playbackRate = 2;
    }
  </script>
  <body>
      <noscript>
        No tiene habilitado JavaScript. Debería habilitarlo
        para poder disfrutar al completo de los contenidos
        de esta página.
      </noscript>
      <div>
          <video controls>
              <source src="video/Gatitos.mp4" type='video/mp4'>
              <source src="video/Gatitos.ogv" type='video/ogg'>
              <source src="video/Gatitos.webm" type='video/webm'>
          </video>
      </div>
  </body>
</html>


Índice del curso

1 comentario :