Web Audio API presenta una variedad de nuevas características de audio para la plataforma web. Puede ser usado con las APIs grafícas canvas 2D y WebGL 3D para crear una nueva generación de juegos y aplicaciones interactivas. A qui se muestra su uso bien básico sin Flash, ni elemento de audio HTML 5. Se usa jQuery para seleccionar las etiquetas y trabajar con eventos, pero no es necesario. Más bien se usa un pequeño framework para trabajar con Web Audio API más facil, ya que nos ayuda a hacer las verificaciones de soporte en el navegador y manejo de errores.
Cómo usarlo
Es necesario utilizar más JavaScript con la Web Audio API que con los elementos de audio de HTML 5, pero vale la pena por lo ligero del proceso de la API. En el ejemplo lo que se desea lograr es que cuando el puntero del mouse se pose sobre un link el sonido se reproduzca. Veamos:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Web Audio API</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script src="webAudioApiForDesigners.js"></script>
<script type="text/javascript">
// you'll put the PCM audio in here
var audioBuffer = null;
var context = new webkitAudioContext();
function loadDogSound(url, variableToBufferSound) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// Decode asynchronously
request.onload = function() {
context.decodeAudioData(request.response, function(buffer) {
variableToBufferSoundIn = buffer;
}, onError);
}
request.send();
}
function playSound(buffer) {
// creates a sound source
var source = context.createBufferSource();
// tell the source which sound to play
source.buffer = buffer;
// connect the source to the context's destination (the speakers)
source.connect(context.destination);
// play the source now
source.noteOn(0);
}
</script>
</head>
<body>
<ul id="nav-one" class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<script type="text/javascript">
// 1
var context = initializeNewWebAudioContext();
// 2
context.loadSound('beep.ogg', 'beep');
$("#nav-one a")
.mouseenter(function() {
// 3
context.playSound('beep');
});
</script>
</body>
</html>
Con esta API y el pequeño framework, hacemos todo en tres pasos:
- Creamos un AudioContext, por así decirlo el marco de reproducción del audio, sin preocuparnos por el navegador.
- Cargar un sonido en el AudioContext.
- Finalmente reproducimos el audio.
Vía CSS-tricks | Demo