AVFoundation-Como fazer um teclado com botões sonoros

iago salomon
Apple Developer Academy | Mackenzie
4 min readJun 19, 2019

Uma das coisas que eu mais amo na minha vida sāo jogos de musica, a mistura de reflexo , precisão, ritmo e musica sempre me fascinou, me fazendo baixar qualquer app desse estilo na App Store que eu encontrava pelo meu caminho

Hoje em dia cada vez mais vemos jogos de ritmo aparecendo na App Store, e cada vez mais criativos e diferentes uns dos outros. Porém a base continua a mesma temos teclas em baixo que fazem sons e algo que o faca o usuário tocar segundo algum ritmo ou desafio.

Pensando nisso, esse tutorial vai ensinar a como fazer um teclado em swift para passar uma base de como esses botes funcionam.

Nesse tutorial vamos precisar de duas coisas, o xcode e alguns arquivos de som que podem ser feitos no garage band ou pegos da internet

A primeira coisa que vamos fazer sera abrir o XCode e começar um projeto.

Como vamos fazer um teclado vamos colocar a tela em modo de paisagem para ter mais espaço para fazer as teclas do teclado.

Agora nos vamos adicionar botões na tela usando o atalho do teclado command + shift + L oque ira abrir um menu de selecao onde iremos procurar button

Nosso teclado terá 10 teclas então iremos adicionar 10 botões e vamos tentar espalha-los pela tela sem ter um em cima do outro.

10 botoes, so troquei a cor para preto para melhor visualização

Em seguida iremos usar autolayou para organizalos de forma que fiquem realmente parecendo um teclado de piano

Se tiver dificuldade os botes brancos todos tem 0 para top,bottom, leading e traling com largura igual para todos

Voce pode gastar horas tentando deixar seus botões de um jeito que te agrade, mas para esse tutorial algo assim está ótimo.

Por último abra a a aba do identity inspector dos botões e adicione tags neles.

Isso irá nos ajudar mais tarde na hora de identificar o botão que está tocando, e chamar seu respectivo som.

Uma dica é nomear os botes de 0 a 9, pois na computacao geralmente a primeira posição é 0

Agora terminamos nosso preparativo básico e podemos ir para a parte de código.

No ViewControler que já vem no projeto iremos começar importando AVFoundation, que. é a biblioteca que lida com audios do XCode

Agora nós temos que instanciar nosso audio player, e faremos isso logo em baixo do viewDidLoad usando o código:

var audioPlayer: AVAudioPlayer?

Agora temos que criar um vetor de sons, que serão tocados quando o usuário pressionar a nota.

Primeiramente adicionamos os arquivos de som arrastando os para o XCode no navegador de arquivos.

Quando arrastar essa tela ira aparece, cheque as mesmas caixas que na imagem

Agora, em seu ViewController, crie um vetor com os nomes dos arquivos que adicionou

Agora nós iremos escrever a função que executa o audio, ela deve ficar assim:

Caso seu arquivo seja de outra extensão troque mp3 pelo formato do seu arquivo, por exemplo wav

Agora nossa última parte do código será adicionar um IBAction para quando o botão for pressionado

sender.tag sera a tag do botão que definimos alguns passos atrás

E após tudo isso adicione o AVfoundationDelegate nas classes de herança da controlView

essa parte pode ser feita a qualquer momento, mas se caso seu xcode não esteja mostrando o autocomplete para as funções do AVFoundation tente adicionar essa linha

Agora só nos resta ligas todos os botões a essa função usando o control e o arrastando ate ela

Agora a última coisa a fazer que é especifica a esse projeto é desligar o portrait mode no device orientation

Agora rode o projeto e veja seu teclado funcionando.

Caso queira baixar esse codigo para testar ele esta disponível no meu GitHub.

Espero que esse tutorial tenha ajudado e que ele o ajudo nas suas futuras criações.

--

--