Se você está fazendo um jogo ou pretende fazê-lo, ou simplesmente está com curiosidade em saber do que se trata, considere compreender como adicionar efeitos sonoros no seu aplicativo ou game, pois a experiência do usuário fica bem melhor. Neste pequeno post vou mostrar como usar os sons, pois com a linguagem Javascript, tudo fica super simples.
var audio = new Audio('audio.mp3');
audio.play();
Considerando o exemplo publicado no post do dia 2, sobre animação, que tal adicionar uns efeitos para entender como se faz na prática? Podemos adicionar um tema musical, no qual ficará sempre tocando, além de alguns efeitos sonoros de acordo com o desejado. Neste caso vou demonstrar o efeito de um click na tela, que junto animação da bola, vai tocar efeito sonoro a cada click.
var Sound = {
init : function() {
Sound.audio = new Audio('main_theme.mp3');
Sound.audio.loop = true;
Sound.play();
},
play : function() {
Sound.audio.play();
},
resetAndPlay : function() {
Sound.audio.currentTime = 6;
Sound.play();
},
pause : function() {
Sound.audio.pause();
},
playSound : function(sound) {
var audioFile, audio;
audioFile = sound;
audio = new Audio(audioFile);
audio.play();
},
playClick : function() {
var audio = "smb_kick.wav";
Sound.playSound(audio);
},
gameOver : function() {
Sound.pause();
var audio = "smb_gameover.wav";
Sound.playSound(audio);
},
};
Sound.init();
O código é relativamente simples. Em Javascript temos o objeto Audio, e neste temos alguns controles padrões, tais como: loop do áudio e currentTime. O loop podemos configurar para tornar a música repetitiva quando ela acabar. Enquanto que em currentTime podemos configurar para a música começar a partir de um determinado intervalo de tempo.
Podemos criar funções para tocar ou pausar os sons específicos. Vários formatos de arquivos são suportados pelo Browser. Eu já testei com MP3, WAV e OGG. Todos funcionaram. É importante destacar que se uma música está em execução, e você desejar tocar outra, basta chamá-la que o novo som vai tocar em paralelo com o atual. Se desejar parar ou pausar a música atual, pode chamar o método pausar. Para estudar melhor sobre sons em Javascript de uma olhada neste link.
Vejamos como o jogo principal foi atualizado para possuir as chamadas do sound.js pelo arquivo bola.js:
var Animacao = {
// variaveis globais
CANVAS : null,
CONTEXT : null,
bola : null,
emProcessoAnimacao : false,
contadorAnimacao : 0,
// inicializa a Animacao
init : function() {
// variaveis de canvas
Animacao.CANVAS = document.querySelector(".canvas");
Animacao.CONTEXT = Animacao.CANVAS.getContext("2d");
// registra eventos
Animacao.addEventListeners();
bola = new Bola(0,0);
bola.init();
setTimeout(Animacao.pintar,100);
},
// limpa a tela
clearCanvas : function() {
Animacao.CONTEXT.clearRect(0, 0, Animacao.CANVAS.width, Animacao.CANVAS.height);
},
// registra eventos
addEventListeners : function() {
Animacao.CANVAS.addEventListener("click", Animacao.clickAnimacaoHandler);
},
clickAnimacaoHandler : function(e) {
Animacao.emProcessoAnimacao = true;
// SOM de click
Sound.playClick();
Animacao.pintar();
},
pintar : function() {
// desenha a Animacao aqui
Animacao.clearCanvas();
// atualizar posicao e pintar objeto
bola.update();
bola.draw();
// se objeto saiu da tela
if (bola.y > Animacao.CANVAS.height) {
console.log("Animacao saiu da tela -> gameOver");
bola.y = 0;
bola.draw();
// SOM de game over
Sound.gameOver();
setTimeout(Sound.resetAndPlay,4000);
}
// chamar novamente o metodo (pelo menos 5 vezes)
if (Animacao.emProcessoAnimacao) {
Animacao.contadorAnimacao++;
if (Animacao.contadorAnimacao >= 5) {
Animacao.contadorAnimacao = 0;
Animacao.emProcessoAnimacao = false;
} else {
// repintar a tela novamente
requestAnimationFrame(Animacao.pintar);
}
}
},
};
function Sprite(image) {
this.image = new Image();
this.image.src = image + ".jpg";
this.draw = function(x, y) {
Animacao.CONTEXT.drawImage(this.image, x, y);
};
}
function Bola(x, y) {
this.x = x;
this.y = y;
this.clicked = false;
this.sprite;
this.init = function() {
this.sprite = new Sprite("bola");
};
this.update = function() {
this.y += (this.sprite.image.height/10);
};
this.draw = function() {
this.sprite.draw(this.x, this.y);
};
this.click = function() {
this.clicked = true;
this.draw();
};
this.animate = function() {
this.type.sprite.animate();
};
}
// o javascript vai carregar esse metodo a cada refresh no browser
window.onload = Animacao.init;
Baixei alguns sons prontos que encontrei em uma busca na internet. No entanto, tenha cuidado para não sair copiando da internet qualquer som que você achar legal, pois há licenças proibitivas (copyrights), e que podem não estarem autorizados pelos detentores da propriedade intelectual. Para fins de testes, eu copiei as músicas do Mário neste site. Se desejar publicar, recomendo utilizar sons de domínio público ou produzir seus próprios.
Um detalhe importante: se deseja fazer diferentes partes do código Javascript chamarem os sons específicos, garanta que o arquivo sound.js seja declarado no HTML antes dos demais Javascripts para que sejam reconhecidos.
Bola início
Aprendi com a programação para tratamento de sons usando Javascript que é muito simples de usá-los. Percebi também que o mais difícil não é fazê-los tocarem, mas encontrar um som de nosso agrado. O ideal seria produzir os próprios sons. Mas isso também envolve um custo adicional.
Para baixar todos os arquivos com seus códigos fontes acesse aqui.
Que tal usar persistência em Javascript/HTML 5. De forma simples poderemos salvar dados do usuário e tornar nosso aplicativo bem mais "inteligente". No próximo post vou tentar explicar como gravar dados.
