Você está na página 1de 7

UNIVERSIDADE FEDERAL RURAL DO SEMI-ÁRIDO

CAMPUS DE PAU DOS FERROS


B ACHARELADO EM T ECNOLOGIA DA I NFORMAÇÃO
DISCIPLINA: MULTIMIDIA - PEX1253
Professor: Reudismam Rolim de Sousa
Turma: 02

PROJETO 01 – MULTIMÍDIA

Discente: Luan Guilherme Dantas – guilherme.luan2019@gmail.com

Pau dos Ferros - RN


2019
RÁDIO MULTIMÍDIA – UFERSA Play Music

1. INTRODUÇÃO

Multimédia ou Multimídia é um termo que provém da língua inglesa e que se refere a


técnicas de transmissão de conteúdo/informações que recorre a vários meios de comunicação
em simultâneo (CONCEITO.DE, 2014). Uma apresentação ou projeto de multimídia, por
conseguinte, pode incluir imagens, animações, vídeos, sons, texto, etc. Onde essas mídias são
os elementos principais para a construção de um projeto multimídia, e a boa interação entre eles
é objetivo e responsabilidade de uma excelente autoria.

Um dos principias meios de comunicação utilizados em projetos de multimidias é o


som que em sua essência trata-se de uma onda do tipo mecânica e tridimensional que pode ser
percebido pelo ouvido humano (JÚNIOR, 2019). Assim para integra essa mídia ao projeto, ou
seja, para ser interpretado pelo computador é necessário entender as suas propriedades físicas e
realizar processamento e síntese do som, pois se trata de um sinal analógico, contínuo, que
necessita ser convertidos, representados em um sinal digital, série de valores discretos
(descontínuos), onde é convertido em duas etapas: amostragem e quantização (IAZZETTA).

Assim, com o objetivo de desenvolver competências para projeto e desenvolvimento de


software de multimídias, mais especificamente um software para processamento de áudio, este
trabalho é proposto. Projeto referente a nota da primeira unidade da disciplina de “Multimídia”
que visa implementar uma aplicação web para manipulação e reprodução de áudio, uma rádio.
Dessa forma, este documento reunirá informações sobre a aplicação web desenvolvida neste
projeto, batizada de “UFERSA Play Music”, que disponibilizara algumas funcionalidades,
opções de interação/processamento de áudio.

2. DESENVOLVIMENTO

A criação da “UFERSA Play Music” teve como inspiração duas aplicações de


reprodução de músicas muito conhecidas, o Spotify e principalmente o Deezer, mesclando essas
duas ideias para se chegar algo novo e criativo, mantendo unicidade da própria autoria. A ideia
da aplicação é disponibiliza ao usuário opções de interação com o áudio, como permite que
escolha a playlist e a música que deseja ouvir, aumentar e diminuir o som, controlar o balanço,
etc.

Mediante as funcionalidades destacadas, essas são manipuladas atreves de elementos de


interface simplificada, mas agradável. Elementos como botões (pause e play), elementos inputs
do tipo range (controla o volume e o balanço), hyperlinks, utilizados para seleção das músicas
e playlists, e animações para visualização do áudio no domínio de tempo e no domínio da
frequência da música escolhida.

2.1. DESCRIÇÃO DAS TECNOLOGIAS UTILIZADAS

O sistema da rádio “UFERSA Play Music” foi desenvolvido utilizando três principais
linguagens: HTML, CSS, JavaScrit. O HTML foi utilizado para a estrutura principal da página
web, isto é, construir os principais elementos visuais e de interação com o usuário (imagens,
botões, ícones e outros), o CSS para formata e estilizar a página, dando uma melhor e agradável
aparência, e o JavaScrit que permite gerencia/executa as funcionalidades que aplicação esta
encarregada de realizar, ou seja, permite a implementação de itens complexos na página que
possa inserir uma lógica na aplicação. A implementação do sistema foi estruturada em alguns
arquivos separados com auxílio de um editor de código-fonte, o software Visual Studio Code,
visando melhor suporte, visando aumentar a organização e entendimento dos elementos.

Como já foi mencionado para que o computador toque a música, interprete-a e gere o
som é necessário que ocorra o processamento e manipulação dos dados do arquivo de música,
para isso, foi utilizado a API Web Áudio que disponibiliza um poderoso e versátil sistema de
controle e manipulação de operações com áudio dentro de um contexto de áudio para a Web.
Além disso, nos permiti escolher arquivos de áudio, adicionar efeitos nesses áudios, criar
reprodutores de áudio, aplicar spatial effects (como panning) e muito mais (MDN
CONTRIBUTORS, 2019).

2.2. APLICAÇÃO DESENVOLVIDA

A aplicação inicialmente foi implementada de forma simples apenas para simulação de


um reprodutor de música, com apenas uma página principal que simula a playlist
“ELETRÔNICA” como se estive selecionada inicialmente, como mostra a Imagem 1. Essa
primeira página criada e representada principalmente por meio da combinação entre os arquivos
index.html e o style.css.

A tela principal é dívida em 4 (quatro) containers, que disponibiliza diversas opções


para selecionar. O primeiro container localizado a esquerda (Imagem 2), que simula a
disponibilização das opções para o usuário escolher a biblioteca de músicas e a playlist favoritas
criadas por ele. Nesta versão apenas a playlist “ELETRÔNICA” ao clicar é disponibilizar as
músicas, que são exibidas no 3º container, mostrado a Imagem 3. Assim, esse container é
encarregado de disponibilizar as músicas da playlist selecionada, mostrando o nome da música
e do artista ou álbum, permitindo o usuário escolhe (clicar) a música que deseja escutar.
Imagem 1: Página inicial UFERSA Play Music.

Fonte: Autoria própria.

Imagem 2: Container que disponibiliza as opções de bibliotecas e playlist para selecionar.

Fonte: Autoria própria.

Imagem 3: Container que disponibiliza as músicas para ser selecionadas.

Fonte: Autoria própria.


Ao clica em uma das músicas listada no 3º container, a musica será reproduzida
automaticamente, e a aplicação disponibilizara no 2º container, que de início não apresenta
nada, informações mais detalhadas da música, tais como: nome e imagem do álbum, nome da
musica completa e o nome do artista, como destacado na Imagem 4.

Imagem 4: Segundo container quando selecionada uma música para reprodução.

Fonte: Autoria própria.

No 2º container, também é apresentado duas animações do áudio requisitadas neste


trabalho, onde uma dessas animações é no domínio de tempo da música (Imagem 5) e a outra
é no domínio da frequência da música (Imagem 6). Animações que foram possíveis ser criadas
graças as funcionalidades disponibilizadas pela API Web Áudio.

Imagem 5: Animação no domínio do tempo.

Fonte: Autoria própria.

Imagem 5: Animação no domínio da frequência.

Fonte: Autoria própria.

No último container, o quarto (Imagem 6), é disponibilizado um reprodutor de música


padrão da API Web Áudio, que já dispõem de um botão de play/pause e uma barra de
monitoramento do tempo da música, que possibilitar selecionar de qual tempo deseja que toque
música. Também nesses mesmos containers encontra-se dois slides que possibilita dois tipos
de interação que o usuário pode realizar, que foram possíveis de cria-las graças a API Web
Áudio, a interação de aumenta/diminuir o volume e de controla o balaço das saídas som, ou
seja, que permite definir de qual canal de saída esquerda ou direita deseja que o som saia mais.

Todas essas iterações, de processamento de áudio, de criação de animações, de seleção


de opções foram conseguidas principalmente pela combinação do arquivo index.html e os
arquivos em JavaScrit audio.js e playlist.js onde estão representadas.

Imagem 6: Reprodutor de áudio, e slides interativos de volume e balanço.

Fonte: Autoria própria.

3. CONCLUSÃO

Dessa forma, ao final de toda descrição, pode-se concluir que a aplicação UFERSA play
Music tem um objetivo bastante simples: um sistema para reprodução e manipulação de
músicas. Além disso, a partir desse trabalho visualiza-se uma aplicação Web, como já
mencionado anteriormente, que envolve conceitos de multimídia onde permitirá usuários a
visualização de algumas informações detalhadas das músicas e visualização de animações que
relaciona conceitos da física das ondas sonoras com a tecnologia da informação, animações do
áudio no domínio de tempo e animações no domínio da frequência.

Com isso, pude perceber que não há muita dificuldade com o desenvolvimento de
aplicações com HTML5, JavaScrit e CSS, e notar o quanto essas linguagens são importantes
para a maioria das tecnologias que possuímos atualmente, afinal, tudo gira em torno de áudio,
imagens e texto, que são as principais tecnologias base para qualquer ambiente multimídia. O
projeto foi extremamente interessante, pois mim possibilitou conhecer novas linguagens de
programação, trazendo uma experiencia em aplicações Webs e aprendendo criando
funcionalidades que utilizo diariamente, como manipular (ouvir, pausar ou começar do início)
uma música.

Das funcionalidades requisitadas pelo trabalho apenas uma não foi contemplada, que
tinha o objetivo de apresenta para o usuário a visualização do áudio em forma de onda que
poderiam estar presentes em nova versões, junto com outras melhorias para página Web e
aplicação, onde seria possível apenas com aprofundamento nas linguagens envolvidas faladas
anteriormente. Assim, servindo como estimulo para buscar conhecer mais a área de
desenvolvimento Web para desenvolver uma aplicação de uma rádio mais robusta e mais
elegante.

REFERENCIAS

CONCEITO.DE. Conceito de multimédia. Conceito.de, 2014. Disponivel em:


<https://conceito.de/multimedia>. Acesso em: 11 novembro 2019.
IAZZETTA, F. Áudio Digital. ECA-USP. Disponivel em:
<http://www2.eca.usp.br/prof/iazzetta/tutor/audio/a_digital/a_digital.html>. Acesso em:
12 novembro 2019.
JÚNIOR, J. S. D. S. O que é som? Brasil Escola., 2019. Disponivel em:
<https://brasilescola.uol.com.br/o-que-e/fisica/o-que-e-som.htm.>. Acesso em: 12
novembro 2019.
MDN CONTRIBUTORS. API Web Áudio. MDN web docs - moz: //a, 2019. Disponivel em:
<https://developer.mozilla.org/pt-BR/docs/Web/API/API_Web_Audio>. Acesso em: 12
novembro 2019.