Universidade Federal Fluminense

Instituto de Computacao

Departamento de Ciencia da Computacao

Filipe Coimbra Cavalcante

Aplicativo hıbrido para desenvolvimento de ouvido

absoluto

Niteroi-RJ

2018

ii

Filipe Coimbra Cavalcante

Aplicativo hıbrido para desenvolvimento de ouvido absoluto

Trabalho submetido ao Curso de

Bacharelado em Sistemas de In-

formacao da Universidade Fede-

ral Fluminense como requisito

parcial para a obtencao do tıtulo

de Bacharel em Sistemas de In-

formacao.

Orientador: Prof. Marcos Lage

Niteroi-RJ

2018

Ficha Catalográfica elaborada pela Biblioteca da Escola de Engenharia e Instituto de Computação da UFF

C376 Cavalcante, Filipe Coimbra

Aplicativo híbrido para desenvolvimento de ouvido absoluto /

Filipe Coimbra Cavalcante. – Niterói, RJ : [s.n.], 2017.

37 f.

Projeto Final (Bacharelado em Sistemas de Informação) –

Universidade Federal Fluminense, 2017.

Orientador: Marcos Lage.

1. Aplicativo móvel. 2. Ouvido absoluto. 3. Percepção auditiva. 4.

Percepção musical. I. Título.

CDD 005.7139

iv

Filipe Coimbra Cavalcante

Aplicativo hıbrido para desenvolvimento de ouvido absoluto

Trabalho submetido ao Curso de

Bacharelado em Sistemas de Informacao

da Universidade Federal Fluminense como

requisito parcial para a obtencao do tıtulo

de Bacharel em Ciencia da Computacao.

Aprovado por:

Marcos Lage, D.Sc. - Orientador

UFF

Aline Marins Paes Carvalho, D.Sc.

UFF

Daniel Cardoso Moraes de Oliveira, D.Sc.

UFF

Anselmo Antunes Montenegro, D.Sc.

UFF

Niteroi-RJ

2018

v

Agradecimentos

Gostaria de agradecer aos meus pais por todo apoio e suporte dado durante todo

perıodo em que estive na faculdade. Aos amigos Diogo Souza, Fabrizio Moura, Henrique

Linhares, Pablo Curty e Raphael Quintanilha; sou muito grato por cada momento que

passamos juntos, passando pelos grupos de estudo antes das provas e as madrugadas

fazendo trabalhos em grupo, tudo foi mais leve por estar com voces. Ao professor Marcos

Lage por sua postura e profissionalismo em todo tempo que passamos juntos. A professora

Aline Paes pelo socorro no momento difıcil. Aos professores Daniel Cardoso Moraes de

Oliveira e Anselmo Montenegro Nunes pela presenca na banca examinadora. Sem cada

um de voces nao seria possıvel terminar esse projeto, sou muito grato.

vi

Resumo

Ouvido absoluto e a habilidade de identificar notas musicais sem o auxılio de uma

referencia. Muitos musicos possuem a visao de que indivıduos extremamente talentosos

ja nascem com essa habilidade e nao ha maneira de obte-la. A verdade e que todos

nos nascemos com a capacidade de adquirir ouvido absoluto, porem, depois da infancia

essa capacidade diminui. Ainda assim, e possıvel alcancar resultados proximos de um

ouvido absoluto iniciando os estudos depois da infancia. Este trabalho mostra detalhes do

desenvolvimento do aplicativo movel Improve Your Pitch Memory (IYPM). O aplicativo

tem o objetivo de apresentar ao usuario uma metodologia de estudo de ouvido absoluto

proposta pelo Rick Beato [Release Rick Beato]. O aplicativo e hıbrido, ou seja, nao foi

desenvolvido em linguagem nativa. Neste trabalho foram detalhados os pros e contras

de se desenvolver um aplicativo movel hıbrido nos dias de hoje, pros e contras esses que

puderam ser observados na pratica durante o desenvolvimento do IYPM.

Palavras-chave: ouvido absoluto, aplicativos hıbridos, memorizacao de notas musicais.

vii

Abstract

Perfect pitch is the ability to identify musical notes without the benefit of a refe-

rence tone. Many musicians share the opinion that only very talented individuals are born

with perfect pitch and there is no other way to obtain it. The truth is: all of us are born

with the capability of developing perfect pitch, but, after childhood this capability decrea-

ses. Beyond that, after childhood is still possible to achieve results close to what a person

with perfect pitch (developed on childhood) would achieve. This monography details the

development of a mobile application named ”Improve Your Pitch Memory”(IYPM). The

application’s goal is to reveal to the user a perfect pitch method developed by Rick Beato

[Release Rick Beato]. The app is hybrid, therefore it was not developed on native lan-

guage. The pros and cons for developing a hybrid app nowadays were detailed on this

monography. Those pros and cons could be closely observed during the development of

IYPM.

Keywords: perfect pitch, pitch memory, hybrid apps.

Sumario

Resumo vi

Abstract vii

Lista de Figuras 1

1 Introducao 2

1.1 Motivacao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.2 IYPM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.3 Trabalhos Anteriores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.4 Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 Conceitos basicos 5

2.1 Background musical . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.1.1 Notas musicais e intervalos . . . . . . . . . . . . . . . . . . . . . . . 5

2.1.2 Sistema musical ocidental . . . . . . . . . . . . . . . . . . . . . . . 6

2.1.3 Ouvido absoluto . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2.1.4 Metodologia utilizada no IYPM . . . . . . . . . . . . . . . . . . . . 9

2.2 Background computacional . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.2.1 Aplicativos moveis hıbridos . . . . . . . . . . . . . . . . . . . . . . 10

2.2.2 Ionic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3 Estrutura da aplicacao 12

3.1 Controllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.2 Providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.3 Helper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

3.4 Paginas Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

viii

ix

3.5 Gravacao e Reproducao de audio . . . . . . . . . . . . . . . . . . . . . . . 16

3.6 Algoritmo de copia e busca de melodias . . . . . . . . . . . . . . . . . . . . 18

3.6.1 Estrutura de diretorios . . . . . . . . . . . . . . . . . . . . . . . . . 18

4 Casos de uso 21

4.1 Reproduzir melodia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4.2 Importar ou Remover melodia . . . . . . . . . . . . . . . . . . . . . . . . . 21

4.3 Configuracoes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

5 Conclusoes, limitacoes e trabalhos futuros 25

5.1 Conclusoes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

5.1.1 Aplicativo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

5.1.2 Desenvolvimento de aplicativos hıbridos . . . . . . . . . . . . . . . 26

5.2 Limitacoes e trabalhos futuros . . . . . . . . . . . . . . . . . . . . . . . . 26

1

Lista de Figuras

2.1 Tabela de intervalos musicais. . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.2 Notas musicais e suas respectivas frequencias no padrao ocidental. . . . . . 8

3.1 Diagrama de dependencia entre os componentes da aplicacao . . . . . . . . 12

3.2 Paginas do aplicativo parte 1. . . . . . . . . . . . . . . . . . . . . . . . . . 14

3.3 Paginas do aplicativo parte 2. . . . . . . . . . . . . . . . . . . . . . . . . . 15

3.4 Alteracao feita no codigo fonte do plugin Media. . . . . . . . . . . . . . . . 16

4.2 Relogio para definir a hora da notificacao diaria. . . . . . . . . . . . . . . . 24

Capıtulo 1

Introducao

1.1 Motivacao

Ouvido absoluto - em ingles absolute pitch ou perfect pitch - e a habilidade de

identificar notas musicais sem uma referencia. Imagine que uma pessoa ouve o sino de uma

igreja, se ela possui a habilidade do ouvido absoluto, consegue identificar a nota que esta

ressoando com facilidade. Segundo [Deutsch 2013], a proporcao em que se encontra esta

habilidade numa populacao e estimada em menos de 1 para 10.000. Por conta da raridade

e por alguns grandes musicos - podemos citar Mozart como exemplo - o possuırem, ha

uma percepcao que apenas indivıduos excepcionalmente talentosos conseguem obter tal

habilidade.

Segundo [Deutsch 2013], porem, adquirir ouvido absoluto e apenas uma questao de

ser exposto as notas musicais e seus nomes durante a infancia. Alem disso, nao ha relatos

de pessoas que desenvolveram ouvido absoluto durante a vida adulta. Porem, ha uma

saıda para adultos que desejam possuir ouvido absoluto, ela passa pelo conceito de pitch

memory. Tal conceito pode ser definido como capacidade de memorizar notas musicais

em seus valores absolutos, ou seja, na altura definida pelo sistema musical ocidental. O

ouvido absoluto pode ser visto como uma especie de pitch memory perfeito pois a pessoa

possui acesso a qualquer nota na altura correta a qualquer momento. Porem, para uma

pessoa sem ouvido absoluto, ter um bom pitch memory e algo extremamente difıcil de

conquistar e requer muito treino.

2

3

1.2 IYPM

Para este trabalho foi desenvolvido o aplicativo mobile Improve Your Pitch Me-

mory, que utiliza a metodologia concebida por Rick Beato [Release Rick Beato] mestre

em estudo de jazz pelo New England Conservatory of Music. O metodo envolve ouvir

pedacos de melodias e decora-las em seus tons originais com o intuito de melhorar o pitch

memory, chegando o mais proximo possıvel do resultado de um ouvido absoluto.

Os principais aplicativos moveis de hoje em dia sao desenvolvidos para as pla-

taformas Android e iOS pois estas dominam o mercado mundial de smartphones. Para

desenvolver um aplicativo mobile e possıvel utilizar linguagem nativa, especıfica para cada

plataforma. Outra opcao e utilizar um framework como o Ionic [Ionic Documentation] que

gera um aplicativo hıbrido. A programacao neste framework e feita em Javascript, HTML

e CSS. Nos aplicativos hıbridos so e necessario um codigo-fonte para todos as plataformas,

alem disso, e muito pratico desenvolver nessas linguagens que sao muito populares entre

os desenvolvedores. Esses dois fatores diminuem o custo de producao e manutencao de

um aplicativo. O principal problema dos aplicativos hıbridos e que a performance, que

nao e tao boa quanto a de aplicativos nativos, tornando assim inviavel o desenvolvimento

de aplicativos que necessitam de alto desempenho.

Neste trabalho, o aplicativo produzido foi desenvolvido com o Ionic, a escolha

por esse framework se deu pela curiosidade em descobrir em que estagio se encontra o

desenvolvimento de aplicativos hıbridos atualmente. Alem disso o fator performance -

principal problema com aplicativos hıbridos - nao foi decisivo nessa escolha pelo fato do

aplicativo nao utilizar muitos recursos do aparelho, uma vez que a principal tarefa a ser

desempenhada e a reproducao de audio.

1.3 Trabalhos Anteriores

Existem outros aplicativos voltados ao treino de ouvido absoluto. Esses aplicativos

podem ser classificados em dois tipos:

• Aplicativos que fazem um quiz, de maneira que uma nota e tocada e logo em

seguida e perguntado qual o nome da nota. Podemos citar: [Absolute Pitch],

[Perfect Pitch Trainer], [Easy Perfect Pitch Training], [Pitch Trainer];

4

• Aplicativos que apenas fornecem notas de referencia. Podemos citar: [Pitch Perfect].

Ha um problema nos aplicativos dos dois tipos: nenhum deles fornece uma meto-

dologia clara de estudo. No primeiro tipo citado, apesar de separar o quiz em diferentes

nıveis de dificuldade, espera-se que o usuario evolua suas habilidades baseando-se em ten-

tativa e erro, algo extremamente difıcil tratando-se de uma habilidade tao complexa de ser

desenvolvida. O aplicativo do segundo tipo aparenta ser uma especie de referencia para

descobrir tom de musicas quando nao se tem um instrumento musical em maos, e nao um

aplicativo para treinar ouvido absoluto, visto que ele nao provem nenhuma ferramenta

para o estudo de ouvido absoluto.

1.4 Outline

O restante do trabalho esta organizado como descrito a seguir. O capıtulo 2 provera

background musical e computacional, esclarecendo sobre o sistema musical ocidental,

fundamental para melhor entendimento acerca da habilidade de ouvido absoluto; alem

disso fala sobre o porque da escolha por fazer um aplicativo movel hıbrido. O capıtulo 3

apresenta como esta montada a estrutura do codigo. O capıtulo 4 mostra os casos de uso

do aplicativo. O capıtulo 5 da conclusoes, expoe as limitacoes do trabalho e apresenta

possibilidades de trabalhos futuros a serem desenvolvidos a partir deste.

Capıtulo 2

Conceitos basicos

2.1 Background musical

2.1.1 Notas musicais e intervalos

Notas musicais se traduzem no espaco fısico como vibracoes que podem ser medidas

em frequencias. Abaixo estao listadas as notas musicais em notacao universal, conhecidas

como cifras:

• C: do ou B#: si sustenido;

• C#: do sustenido ou Db: re bemol;

• D: re;

• D#: re sustenido ou Eb: mi bemol;

• E: mi;

• F: fa ou E#: mi sustenido;

• F#: fa sustenido ou Gb: sol bemol;

• G: sol;

• G#: sol sustenido ou Ab: la bemol;

• A: la;

• A#: la sustenido ou Bb: si bemol;

5

6

• B: si.

Intervalos musicais sao a distancia entre duas notas musicais. O menor intervalo

musical e o semitom. Dois semitons geram um tom e assim por diante, na figura 2.1 essa

relacao e mostrada com riqueza de detalhes.

Figura 2.1: Tabela de intervalos musicais.

2.1.2 Sistema musical ocidental

Existem dois padroes principais que regem a musica ocidental, de maneira que

sem eles nossa percepcao musical seria totalmente diferente. Um deles e o temperamento

musical e o outro e o padrao la 440Hz ou A440. Estes dois combinados definem as

frequencias das notas musicais que utilizamos, conforme e possıvel ver na figura 2.2. O

padrao A440 define que a frequencia da nota La 4 - o numero 4 representa a oitava da

nota de acordo com a posicao da mesma no piano - e 440Hz e este deve ser utilizado como

referencia para afinar as outras notas. O temperamento divide uma oitava em 12 partes

iguais, gerando 12 notas musicais. Para fazer isso, estabelece a proporcao dos intervalos

musicais, ou seja, a distancia entre duas notas em um intervalo musical. Uma amostra de

como o sistema de temperamento define a proporcao entre os intervalos e: entre a nota

7

La 4 e a nota La 5 ocorre um intervalo de oitava e a proporcao para este intervalo e 2:1,

visto que a frequencia do La 4 e 440Hz, a do La 5 e 880Hz.

Como pode ser observado em 2.1.1, existem notas que possuem dois nomes, duas

cifras, como por exemplo D# e Eb, isso acontece pois como o sistema de temperamento

divide uma oitava em apenas 12 notas, essas notas acabam tendo a mesma frequencia. Em

outros sistemas isso nao acontece, no sistema utilizado na idade media (sistema pitagorico)

por exemplo, a nota D# e diferente da nota Eb, ou seja, a frequencia do D# e diferente

da frequencia do Eb.

Importante pontuar o conceito de melodia. Para este trabalho sera utilizada uma

definicao bem basica de melodia que e: uma sequencia de notas musicais com ritmo; alem

disso, durante este trabalho melodia pode referir-se ao arquivo de audio utilizado para os

estudos com o aplicativo.

2.1.3 Ouvido absoluto

Ouvido relativo e a habilidade de identificar notas musicais a partir de uma re-

ferencia, ouvido absoluto e a habilidade de identificar notas musicais sem referencia. O

desenvolvimento do ouvido relativo e algo extremamente comum, sendo inclusive, uma

habilidade fundamental para musicos de instrumentos harmonicos e melodicos. Exemplo:

um professor de musica toca a nota C no piano, avisa ao aluno que a nota e C e logo

apos toca Eb. O aluno - que possui ouvido relativo bem desenvolvido - identifica o Eb

com facilidade. Isso acontece pois o aluno teve a referencia, ou seja, soube que a primeira

nota tocada foi C, percebeu que o intervalo musical entre as duas notas e uma terca me-

nor, descobrindo assim que a segunda nota tocada foi Eb. Se o aluno possuısse ouvido

absoluto, nao seria necessario informar que a primeira nota era C pois ele a reconheceria.

Houve diversas tentativas de adquirir ouvido absoluto durante a idade adulta por

meio de treino extenso, e em geral, essas tentativas produziram resultados nao convincen-

tes ou negativos. Um excepcional caso positivo foi descrito por Brady (1970) - um musico

que comecou a estudar piano com 7 anos de idade. Ele treinou ouvido absoluto por volta

de 60 horas e conseguiu uma taxa de sucesso de 65% (97% se nao contarmos erros de se-

mitom). Embora o resultado seja expressivo, demonstra a dificuldade de adquirir ouvido

absoluto na idade adulta em contraste com a aquisicao sem esforco e frequentemente in-

consciente durante a primeira infancia. [Deutsch 2013]. Este relato demonstra que apesar

8

Figura 2.2: Notas musicais e suas respectivas frequencias no padrao ocidental.

9

de demandar muitas horas de estudo, e possıvel obter resultados positivos no estudo de

ouvido absoluto durante a idade adulta. O proposito do aplicativo e obter o resultado

mais proximo possıvel de um ouvido absoluto que um adulto pode conseguir.

2.1.4 Metodologia utilizada no IYPM

O conceito de pitch memory pode ser definido como a capacidade de memorizar

notas musicais. O aplicativo Improve Your Pitch Memory, como o nome sugere, e baseado

neste conceito. A metodologia de estudo sugerida pelo aplicativo baseia-se em Rick Beato

e envolve:

• Ouvir a melodia de referencia;

• Canta-la logo apos ouvir - esta pratica ajuda na memorizacao;

• Apos algum tempo cantar a melodia antes de ouvir para verificar se a melodia foi

memorizada no tom original. Para exemplificar melhor o que e um tom musical: em

uma musica fora de seu tom original a melodia e cantada com seus intervalos e ritmo

como foram concebidos porem as notas sao outras, ou seja, a musica se encontra em

outra altura, outro centro tonal.

Para cada um dos 12 tons o aplicativo fornece melodias padrao utilizadas no metodo

do Rick Beato, porem, alem dessas e possıvel adicionar as melodias que o usuario

preferir utilizar em seus estudos. Esta adicao de melodias acontece por meio da

importacao de um audio que esteja na memoria do celular ou da gravacao de audio

da melodia escolhida por meio do microfone do aparelho.

2.2 Background computacional

Para desenvolver um aplicativo mobile e necessario selecionar uma (ou mais) plata-

forma(s) alvo. No quarto trimeste de 2016, segundo [Vincent 2017] 99,6%, dos smartpho-

nes vendidos no mundo utilizam iOS ou Android. Sendo 81.7% Android e 17.9% iOS.

Sabendo desses dados, o IYPM foi desenvolvido pensando na plataforma Android, porem,

com alguns ajustes e possıvel compilar o codigo para iOS tambem, ja que o aplicativo

desenvolvida utiliza um framework de desenvolvimento de aplicativos hıbridos.

10

2.2.1 Aplicativos moveis hıbridos

E possıvel desenvolver aplicativos mobile por meio de linguagem nativa ou por al-

gum framework que crie o que e chamado de aplicativo movel hıbrido. Dois exemplos de

linguagem nativa sao o Swift e o Java, o primeiro utilizado no iOS e o segundo no Android.

Frameworks como Ionic [Ionic Documentation] e PhoneGap [PhoneGap Documentation]

geram aplicativos hıbridos utilizando linguagens JavaScript, HTML e CSS, alem de utili-

zarem o Cordova para comunicacao nativa com o sistema operacional, sendo assim, apenas

um codigo fonte e gerado para o aplicativo de diversas plataformas. Aplicativos hıbridos

sao aplicacoes web que rodam em um navegador que e aberto quando o usuario solicita a

execucao do aplicativo. O framework React Native [React Native Documentation] e um

hıbrido um pouco diferente. Ele tambem utiliza Javascript, HTML e CSS, porem, tem

sua propria forma de comunicacao com o sistema operacional - diferentemente dos outros

que utilizam o Cordova -, com isso, o React Native nao precisa rodar as aplicacoes geradas

nele dentro de um navegador; apesar do desenvolvimento com o React Native ser bem

proximo do de aplicativos hıbridos comuns, ele gera aplicacoes nativas.

Os aplicativos hıbridos estao se tornando cada dia mais populares, muito por conta

da praticidade de desenvolver apenas um codigo-fonte para gerar aplicativos para as prin-

cipais plataformas. Grandes aplicativos do mercado hoje em dia ja sao desenvolvidos com

frameworks hıbridos, principalmente com o React Native pelo fato dele gerar aplicativos

nativos. Podemos citar como exemplo os aplicativos do Facebook, Instagram e do Skype.

Ver [Showcase React Native].

Imagine uma pequena empresa que precisa desenvolver um aplicativo para iOS,

Android. Para programar o aplicativo seria necessario um desenvolvedor experiente em

linguagem nativa de cada plataforma, o que custa caro devido o nıvel de especializacao

necessaria para programar em linguagem nativa, principalmente porque Swift nao e uma

linguagem popular. Se analisarmos sob a perspectiva dos aplicativos hıbridos, Javascript,

HTML e CSS sao linguagens extremamente populares. Este fator combinado com a

necessidade apenas um codigo-fonte para todas as plataformas certamente diminui os

custos de producao e manutencao de um aplicativo.

Segundo [Vincent 2017], quando se fala em aplicativos hıbridos o principal pro-

blema que se pensa e o da performance, porem, a diferenca tratando-se de aplicacoes

comuns e pequena. Para aplicacoes que necessitam de alta performance como jogos que

11

utilizam graficos elaborados, o desenvolvimento em linguagem nativa ainda se faz neces-

sario.

Como foi citado acima, o IYPM foi desenvolvido para Android porem seria neces-

sario fazer alguns ajustes para compila-lo para iOS. Esses ajustes sao necessarios porque

funcoes especıficas como abrir um diretorio do smartphone para selecionar uma mıdia sao

feitas por plugins diferentes para plataformas diferentes. Na maioria das funcionalidades

isso nao acontece, ou seja, utiliza-se um plugin e o codigo escrito e funciona em todas as

plataformas da mesma forma.

2.2.2 Ionic

A equipe do Ionic o define da seguinte forma: “O Ionic e um framework de de-

senvolvimento baseado em HTML5 voltado para a criacao de aplicativos moveis hıbri-

dos. Aplicativos hıbridos sao essencialmente pequenos sites rodando em navegadores com

acesso a camada nativa do smartphone.”[Ionic Preface]

O Ionic foi o framework escolhido para o desenvolvimento do IYPM. Essa escolha

se deu pelo interesse em saber como funciona o desenvolvimento de aplicativos hıbridos

na pratica. O fato do framework nao estar mais em versao beta tambem colaborou

para a escolha, visto que ja nao esta mais em fase de testes e possui alguma maturidade.

Alem disso, possui tambem grande comunidade na internet, facilitando a pesquisa quando

problemas se fazem presentes durante o desenvolvimento do aplicativo.

Mais especificamente, a versao do Ionic utilizada foi a 2.3.3. A estrutura basica

desta versao utiliza codigos-fonte de tres tipos para cada pagina web: TS, HTML e CSS.

HTML e CSS compoem o visual da pagina, ja os codigos-fonte do tipo TS fazem o controle

do fluxo de dados e sao escritos em TypeScript - uma variacao do JavaScript, qualquer

codigo JavaScript compila em TypeScript -, utilizando Angular 2. O angular utiliza a

linguagem Typescript que ao final do processo de compilacao converte-se em Javascript.

Alem disso, esta versao do Ionic utiliza o um pacote de plugins chamado Ionic Native,

atraves deste pacote e possıvel acessar recursos nativos do sistema operacional como por

exemplo gravar um audio com o microfone do aparelho.

Capıtulo 3

Estrutura da aplicacao

A aplicacao esta estruturada em 4 tipos principais de componentes: Controllers,

Providers, Helpers e Paginas Web. Este capıtulo explicara o proposito de cada um des-

ses componentes, alem disso, detalhara a implementacao de algumas funcionalidades e

mostrara estrutura de diretorios criada pelo aplicativo.

Na figura 3.1 e possıvel observar a relacao de dependencia entre esses componentes.

Figura 3.1: Diagrama de dependencia entre os componentes da aplicacao

12

13

3.1 Controllers

Os arquivos Typescript de cada pagina funcionam como controladores, neles encontram-

se funcionalidades especıficas de uma pagina, alem da preparacao das variaveis para o

funcionamento da pagina. Grandes operacoes ou operacoes que podem no futuro servir

mais de uma pagina se encontram em providers e sao chamadas dentro do controlador de

uma pagina.

3.2 Providers

Os providers tem papel importante em um codigo Ionic 2. Tambem sao chamados

de servicos, geralmente sao utilizados para fazer alguma tarefa ou prover alguma informa-

cao para a aplicacao. Exemplo de como os providers foram aplicados no codigo: existe um

provider para paths que provem os nomes dos diretorios utilizados no programa para que

nao seja necessario que cada controlador utilize esses nomes colocando-os manualmente;

alem de prover os nomes dos diretorios, o path provider tambem oferece funcionalidades

relacionadas a diretorio como por exemplo verificar se um diretorio existe. Ha tambem

um provider para notificacao, se um controlador necessita criar uma notificacao, esta ope-

racao e facilmente feita, apenas chamando um metodo; nao fosse o provider se em mais

de um controlador fosse necessario criar a mesma notificacao, um codigo de no mınimo

onze linhas seria adicionado em cada controlador, alem dos benefıcios da reutilizacao de

codigo gerados pelo provider, apenas uma linha e adicionada.

3.3 Helper

Foi criada uma classe helper (escrita em Typescript) que foi utilizada para opera-

coes estaticas extremamente simples acabaram se repetindo ao longo do codigo. Exemplo

de operacao: tirar a extensao (tipo do arquivo) do nome do arquivo.

3.4 Paginas Web

Ha 7 paginas no aplicativo, para cada pagina ha uma pasta com tres arquivos: um

do tipo HTML, um CSS e Typescript. Lista de paginas do aplicativo:

14

(a) Pagina Choose Key. (b) Pagina Import Melody.

(c) Pagina Remove Melody. (d) Pagina Play Melody.

Figura 3.2: Paginas do aplicativo parte 1.

15

(a) Pagina About. (b) Pagina Settings.

Figura 3.3: Paginas do aplicativo parte 2.

• Choose Key (ver figura 3.2a): esta e a pagina mostrada ao abrir o aplicativo, nela

o usuario seleciona um tom e e redirecionado para a pagina play melody do tom

escolhido;

• Import Melody (ver figura 3.2b): nesta pagina e possıvel importar melodias para o

tom selecionado;

• Remove Melody (ver figura 3.2c): nesta pagina e possıvel remover uma ou mais

melodias do tom selecionado;

• Play Melody (ver figura 3.2d): nesta pagina e possıvel reproduzir as melodias do

tom selecionado na pagina choosekey, alem disso, ha um botao para importar e um

para remover melodias do tom;

• About (ver figura 3.3a): nesta pagina se encontram as instrucoes para utilizacao do

aplicativo, e onde o metodo de estudo descrito no capıtulo 2 e explicado;

• Settings (ver figura 3.3b): nesta pagina e possıvel ajustar as configuracoes do apli-

cativo. Ha duas funcionalidades controladas pelas configuracoes: a de loop e a de

enviar notificacoes diarias;

16

• Tabs (e possıvel ver a divisao em abas na figura 3.2a): esta pagina e um template

do aplicativo, ela possui o codigo das abas do aplicativo que ficam sao mostradas

durante todo tempo em que o aplicativo esta sendo utilizado.

A interface do aplicativo esta dividida em tres abas principais, sao elas:

• Melodies: esta aba contem as paginas Choose Key, Play Melody, Import Melody e

Remove Melody;

• Settings: esta aba contem a pagina Settings;

• About: esta aba contem a pagina About.

3.5 Gravacao e Reproducao de audio

Em teoria a funcionalidade de gravacao de audio e uma funcionalidade simples,

porem, foi encontrado um problema ao desenvolve-la. O sample rate de gravacao de

audio do plugin Media, especificamente para Android, era extremamente baixo. Isso

gerava uma gravacao com qualidade inaceitavel para os padroes atuais. Foi necessario

alterar manualmente o sample rate no codigo fonte do plugin e recompila-lo para poder

gerar uma gravacao de qualidade. E possıvel ver essa alteracao na figura 3.4.

Figura 3.4: Alteracao feita no codigo fonte do plugin Media.

17

Visto que ate mesmo em aplicativos grandes como o Instagram e possıvel encontrar

pequenos problemas de reproducao como por exemplo um audio que comeca a tocar e so

para se o aplicativo for fechado, foi investido bastante tempo no desenvolvimento de um

algoritmo de reproducao de audio que fosse extremamente confiavel.

No Android, apos a instalacao do aplicativo nao e possıvel deletar nem adicionar

arquivos a pasta assets, a unica operacao possıvel e a de copia. Sendo assim, quando

o usuario gravasse um audio com o microfone, nao seria possıvel colocar o arquivo de

audio gerado na pasta assets e o plugin Native Audio do Ionic Native apenas reproduz

arquivos que se encontram na pasta assets. Vale ressaltar que o Native Audio e o plugin

mais completo para reproducao de audio, sendo extremamente facil de manipula-lo e

oferecendo diversas opcoes para a reproducao dentre elas podemos destacar a de loop -

funcao importante para o IYPM. Alem disso, foi tentado contato com a equipe do Ionic

Native e obtida a resposta que o plugin baseia-se na utilizacao de uma funcao especıfica

do Android que reproduz assets, deixando a performance melhor, por isso a restricao

de apenas reproduzir arquivos da assets no Native Audio. O unico plugin que reproduz

audios que se encontram fora da pasta assets e o Media do Ionic Native que e um plugin

mais generico, apesar de ter a funcionalidadade para reproduzir audios, esse nao e o foco

do plugin, aumentando assim a complexidade de algumas funcionalidades no algoritmo

de reproducao de audio.

O plugin Media - diferentemente do Native Audio - nao fornece um objeto cen-

tralizador que faca o controle da reproducao de mıdia do aplicativo como um todo, ou

seja, e necessario um objeto do tipo Media para cada entrada de audio. Nao ha um

objeto onde seja possıvel pausar em todos os audios que estejam tocando na aplicacao,

e necessario pausar cada arquivo objeto Media individualmente. Foi necessario criar um

array de objetos Media, um objeto deste tipo e criado e colocado no array quando um

audio e reproduzido pela primeira vez, sendo assim, se um audio nunca e reproduzido,

seu objeto Media nao e criado. O algoritmo fica ainda mais complexo quando e colocada

a funcionalidade de loop e o fato de Javascript ser orientado a eventos.

Para melhor compreensao do codigo e importante salientar alguns detalhes. Quando

a reproducao de um audio comeca e colocado um subscribe no status objeto Media dele.

Com o subscribe, sempre que houver uma mudanca no status objeto o fluxo do codigo e

direcionado para o bloco dentro do subscribe. A variavel stopAll funciona como um eject

18

e e controlada por fora do algoritmo de reproducao, por meio dela e possıvel parar a repro-

ducao de todos os objetos de audio do aplicativo, alem disso, quando o valor da variavel

esta em true todas as subscriptions sao canceladas. Esta variavel e necessaria pois por

exemplo, se o usuario mudar de pagina ou apertar o botao home, a reproducao de todos

os audios precisa ser parada. A variavel loopOption e controlada pelas configuracoes do

aplicativo. This refere-se as variaveis de classe. Os algoritmos a seguir interagem entre si

para construir a reproducao de audio do aplicativo.

Algorithm 1 togglePlay

if (isCallingToPlayAudio) then

if (this.status == 2) {status 2 significa que um audio esta sendo reproduzido} then

this.mediaObjects[this.lastPlayedAudio].pause();

end if

this.playAudio(audioId);

else if (isCallingToPauseAudio) then

this.mediaObjects[this.lastPlayedAudio].pause();

end if

3.6 Algoritmo de copia e busca de melodias

Havia a necessidade do aplicativo vir out-of-the-box com as melodias padrao de

referencia e a unica forma fazer isso e colocando os arquivos de audio dentro da pasta

assets. Colocar as melodias padrao na mesma pasta das melodias importadas diminui a

complexidade do algoritmo que busca as melodias a serem reproduzidas de acordo com o

tom escolhido. Sendo assim, foi necessario criar um algoritmo para buscar melodias na

pasta assets e trazer para a pasta de arquivos do aplicativo. As diretivas tratadas para

desenvolver este algoritmo foram: o algoritmo deve ser simples e nao deve ocupar muito

espaco na memoria RAM; a simplicidade faz a busca ser executada velozmente e quanto

menos espaco ocupado na memoria RAM mais fluidez na navegacao do aplicativo.

3.6.1 Estrutura de diretorios

A solucao escolhida comeca pela criacao de uma estrutura de pastas conforme a

apresentada abaixo:

19

Algorithm 2 playAudio

if (this.mediaObjects[audioId] == null) then

this.mediaObjects[audioId] = new MediaObject();

end if

this.mediaObjects[audioId].play(); {a reproducao do audio comeca aqui}

this.mediaObjects[audioId].onStatusUpdate.subscribe(); {todos os comandos abaixo

sao executados quando ha uma mudanca no status}

this.status = status;

if (status == 2) then

this.lastPlayedAudio = audioId;

else if (status == 4) {status 4 significa que a reproducao chegou ao fim} then

if (stopAll == false) then

if (loopOption == true) then

if (lastPlayedAudio == audioId) then

mediaObjects[audioId].play();

end if

end if

end if

end if

20

External Data Directory/Melodies/

C/J.S. Bach 2 Part Invention.wav

C#/Cinderella Theme.wav

DCantata No. 54.wav

Etc.

Quando o aplicativo e instalado, as melodias padrao se encontram na pasta assets,

quando o usuario abre a pagina Play Melody pela primeira vez o algoritmo copia - copiar e

a unica operacao permitida na pasta assets apos a instalacao do aplicativo - a melodia de

referencia para pasta do tom. Vale lembrar que para cada tom o aplicativo fornece apenas

uma melodia de referencia e ao entrar na pagina Play Melody o usuario ja selecionou um

tom, sendo assim, a operacao de copia e executada em lotes, nao onerando o aplicativo

na primeira execucao.

Quando o usuario abre a pagina Play Melody o algoritmo confere se e a primeira

vez que o aplicativo esta rodando, se for ele copia a melodia referencia do tom para a

pasta de melodias do tom. O processo de leitura de melodias e bem simples, o algoritmo

pega todos os arquivos de audio da pasta do tom escolhido e carrega-os na memoria para

que eles possam ser executados.

Capıtulo 4

Casos de uso

4.1 Reproduzir melodia

Visto que a parte mais importante do estudo se da pela audicao de melodias, a

reproducao de audio e a funcionalidade mais importante do IYPM. Na pagina principal

do aplicativo, o usuario primeiro selecionara um tom para entrar na pagina de reproducao

de melodias. Ao entrar na pagina de reproducao todas as melodias do tom escolhido sao

listadas e e possıvel clicar no botao play para reproduzir a melodia. Quando a reproducao

comeca, o botao play transforma-se em pause e quando a reproducao e pausada, o botao

volta a ser play. Se a opcao de loop esta ativada, a reproducao continuara ate o usuario

apertar o botao pause ou a tela do aparelho apagar. Se o usuario mudar de aba ou apertar

o botao home para sair do aplicativo a reproducao e parada.

A escolha de colocar uma pagina de reproducao para cada tom e nao agrupar

todas as melodias de todos os tons em uma pagina teve o intuito de nao comprometer a

experiencia de visualizacao do usuario. Se todas as melodias estivessem na mesma pagina,

seria necessario uma especie de scroll ou paginacao. Tendo uma pagina de reproducao

para cada tom deixa a pagina com um aspecto limpo.

4.2 Importar ou Remover melodia

E extremamente valoroso para o aplicativo que o usuario possa utilizar suas pro-

prias melodias em seus estudos. Isso se da pois fica mais facil decorar uma melodia em

valores absolutos se o usuario e bem familiarizado com a melodia. Apesar das melodias

21

22

das melodias que vem de fabrica com o aplicativo serem praticamente de senso comum, e

mais facil decorar uma melodia que ja esteja mais presente no dia a dia do usuario.

Importante lembrar que e na aba melodies que acontece a reproducao, importacao

e remocao de melodias. Ha um botao dentro da pagina de reproducao que direciona o

usuario para a pagina de importacao e um que direciona para a de remocao. A decisao

de utilizar a sobreposicao de paginas se deu por conta da estrutura que ja estava toda

montada sobre a escolha de um tom na pagina Home, foi uma opcao logica optar por

colocar as paginas Import e Remove sobrepostas a pagina Play. O nıvel maximo de paginas

sobrepostas no aplicativo e tres, este numero extremamente comum para os padroes dos

aplicativos atuais. Alem disso, o nıvel tres somente e atingido em tarefas nao sao usuais

apos a configuracao final do usuario.

E possıvel importar uma melodia gravando um audio com o microfone do smartphone

ou buscando um audio na memoria. Se o usuario clica no ıcone do microfone (ver figura

3.2b), este se transforma num ıcone de pause e a mensagem muda avisando que quando

ele clicar no pause a gravacao sera finalizada (ver figura 4.1a). Quando a gravacao e fina-

lizada e solicitado ao usuario um nome para a gravacao ou e possıvel cancelar (ver figura

4.1b), o que resulta na delecao da gravacao.

(a) Botao para pausar gravacao.(b) Campo para assinalar o nome da

gravacao.

23

Se a escolha for por buscar um audio na memoria, uma funcionalidade nativa

do sistema e acionada e e possıvel selecionar um arquivo para importar. Nao existe

uma opcao no plugin para que o usuario apenas veja os arquivos de audio da memoria,

portanto, o usuario pode selecionar arquivos de qualquer tipo. Se o arquivo selecionado

for de tipo diferente de WAV, MP3 ou AAC o aplicativo avisa ao usuario que o arquivo

nao e suportado.

Para que o usuario nao corra o risco de apagar por engano uma melodia padrao de

referencia do aplicativo, as melodias deste tipo nao podem ser deletadas. Essa restricao

e avisada na pagina about. Alem disso, os ıcones checkbox das melodias desse tipo

encontram-se em cinza e nao podem ser selecionados. Quando o usuario seleciona uma ou

mais melodias e aperta o botao de remover um dialogo de confirmacao e mostrado. Se a

remocao foi realizada com sucesso, este fato e reportado ao usuario, assim como quando

ha um erro, este e reportado.

4.3 Configuracoes

Ha duas configuracoes disponıveis: reproducao de audio em loop e notificacoes.

Para acessar as configuracoes basta entrar na aba Settings. Ao ativar a opcao de loop,

quando a reproducao de uma melodia chega ao fim, a mesma melodia e reproduzida nova-

mente ate que o botao pause seja pressionado. Esta opcao e valida pois algumas melodias

sao curtas para facilitar o processo de memorizacao, sendo assim, e extremamente util ter

a opcao de ouvir as melodias em loop. Ao ativar a opcao notificacoes, um relogio aparece

na tela (ver figura 4.2) para que o usuario selecione a hora que vai receber as notificacoes

diariamente. Se na hora da escolha do horario, o usuario pressionar o botao cancelar as

notificacoes nao sao ativadas. As notificacoes servem para que o usuario lembre-se de pra-

ticar diariamente - algo fundamental para o desenvolvimento das habilidades de ouvido

absoluto.

24

Figura 4.2: Relogio para definir a hora da notificacao diaria.

Capıtulo 5

Conclusoes, limitacoes e trabalhos

futuros

5.1 Conclusoes

5.1.1 Aplicativo

Este trabalho propos o desenvolvimento de um aplicativo para o desenvolvimento

da habilidade de ouvido absoluto. O estudo com o aplicativo e feito com o metodo

desenvolvido pelo Rick Beato [Release Rick Beato] que envolve ouvir melodias e tentar

decora-las em seus tons originais. O aplicativo fornece uma melodia padrao para cada

tom, alem disso, e possıvel adicionar melodias personalizadas, utilizando o microfone do

smartphone ou importando um audio que esteja na memoria do aparelho. Alem disso, o

aplicativo provem a funcionalidade de loop para a reproducao de melodias e a opcao de

notificar diariamente o usuario para que ele lembre-se de estudar diariamente - o que e

fundamental para o desenvolvimento do ouvido absoluto.

Na pesquisa de aplicativos para treino de ouvido absoluto, nao foi encontrado

nenhum que seguisse um metodo de estudo como o IYPM. Vale lembrar que o ouvido

absoluto e uma habilidade extremamente difıcil de ser desenvolvida durante a idade adulta.

Se o usuario que estiver estudando nao tiver uma metodologia clara para seguir, este

processo torna-se ainda mais complexo.

Segundo relatos do livro [Deutsch 2013], e possıvel obter resultados que se aproxi-

mam da habilidade de quem adquire ouvido absoluto na infancia.

25

26

O feedback sobre o aplicativo mostrado abaixo e do Andre Barreto, ele tem 22

anos, toca guitarra, violao, contra-baixo e e produtor musical. “Nunca tinha feito um

treino especıfico para ouvido absoluto, toda a nocao que tenho ate hoje vem da memoria

musical que desenvolvi apos anos ouvindo e tocando musica. Por isso achei a proposta

do app otima, de ter uma melodia ”decorada”para cada tom. Inicialmente achei muito

complicado treinar, por nao conhecer todas as melodias que vem como padrao do app.

Esse problema e resolvido usando a ferramenta de adicionar uma melodia gravada ao

banco do aplicativo, tornando o treino bem mais natural. A curto prazo nao posso dizer

que decorei todos os tons das melodias, mas com o tempo acredito que e possıvel melhorar

a percepcao de notas e chegar mais perto do tao sonhado ouvido absoluto com a ajuda

do IYPM.”

A grande dificuldade do Andre foi a nao familiarizacao com algumas melodias.

Apesar de ter a opcao de importar melodias que esta mais familiarizado, provavelmente

nao o fez pelo trabalho que teria para configurar um banco de melodias, tendo que conferir

o tom da melodia antes de importa-la. Uma solucao para este problema sera proposta na

secao 5.2.

5.1.2 Desenvolvimento de aplicativos hıbridos

O balanco final sobre aplicativos hıbridos e que os frameworks de desenvolvimento

para aplicativos desse tipo ainda estao em processo de amadurecimento. Foram detectados

diversos problemas ao longo do processo de desenvolvimento estes problemas elevaram a

complexidade de algumas funcionalidades aparentemente simples.

Apesar dos problemas encontrados, ainda e mais rapido desenvolver um codigo

de aplicativo hıbrido que funciona para as principais plataformas do que desenvolver

um codigo para cada plataforma desejada, ainda mais se a intencao for abranger outras

plataformas alem do Android e iOS, como por exemplo Windows Phone e BlackBerry.

5.2 Limitacoes e trabalhos futuros

O IYPM nao tem o proposito de testar o usuario, de maneira que ele acompanhe

seu desenvolvimento, o IYPM foi desenvolvido apenas como uma plataforma de estudo.

Numa versao futura, poderia ser util adicionar um quiz onde uma nota e tocada e logo em

27

seguida pergunta-se qual o nome daquela nota. Diferentemente dos quizzes encontrados

em outros aplicativos, no espaco de tempo entre duas perguntas seriam tocadas algumas

notas aleatoriamente para que usuario nao consiga usar o ouvido relativo para responder

as perguntas. A partir deste quiz seria possıvel verificar os resultados do estudo com o

IYPM dentro do proprio aplicativo.

Uma boa expansao do IYPM seria integra-lo com o aplicativo Spotify para reco-

mendar que o usuario estude com as melodias que mais ouve no dia a dia. Seria super

interessante trabalhar no ambito de reconhecimento de notas musicais, de forma que ao

baixar a lista de musicas mais ouvidas pelo usuario, o IYPM ja as assinalasse ao tom

correto para o estudo, dessa forma o trabalho manual do usuario de descobrir o tom da

melodia que deseja utilizar no IYPM seria poupado.

Referencias Bibliograficas

[Absolute Pitch]ABSOLUTE Pitch. https://play.google.com/store/apps/details?

id=sk.xorsk.pitch. [Accessed: 02-January-2017].

[Deutsch 2013]DEUTSCH, D. The Psychology Of Music. Third edition. [S.l.]: Academic

Press, 2013.

[Easy Perfect Pitch Training]EASY Perfect Pitch Training. https://play.google.

com/store/apps/details?id=jp.viralworks.perfectpitch. [Accessed: 02-January-

2017].

[Ionic Documentation]IONIC Documentation. https://ionicframework.com/docs/.

[Accessed: 02-January-2017].

[Ionic Preface]IONIC Preface. https://ionicframework.com/docs/v1/guide/

preface.html. [Accessed: 02-January-2017].

[Perfect Pitch Trainer]PERFECT Pitch Trainer. https://play.google.com/store/

apps/details?id=com.trifonopoulos.perfectPitchTrainer. [Accessed: 02-

January-2017].

[PhoneGap Documentation]PHONEGAP Documentation. http://docs.phonegap.

com/. [Accessed: 02-January-2017].

[Pitch Perfect]PITCH Perfect. https://play.google.com/store/apps/details?id=

depollsoft.pitchperfect. [Accessed: 02-January-2017].

[Pitch Trainer]PITCH Trainer. https://play.google.com/store/apps/details?id=

edu.cpp.pitchtrainer. [Accessed: 02-January-2017].

28

29

[React Native Documentation]REACT Native Documentation. https://facebook.

github.io/react-native/docs/getting-started.html. [Accessed: 02-January-

2017].

[Release Rick Beato]RELEASE Rick Beato. https://rickbeato.com/pages/about. [Ac-

cessed: 02-January-2017].

[Showcase React Native]SHOWCASE React Native. https://facebook.github.io/

react-native/showcase.html. [Accessed: 02-January-2017].

[Vincent 2017]VINCENT, J. 99.6 percent of new smartphones run An-

droid or iOS. February 2017. [Accessed: 02-January-2017]. Disponıvel em:

<https://www.theverge.com/2017/2/16/14634656/android-ios-market-share-

blackberry-2016>.

[Vincent 2017]VINCENT, J. Hybrid Mobile Apps are Overtaking Native. July

2017. https://blog.phonegap.com/hybrid-mobile-apps-are-overtaking-native-

951a3aacacd1. [Accessed: 02-January-2017].