search

practice-uffs / app-practice

Aplicativo móvel do programa que permite que usuários usufruam das tecnologias do PRACTICE
MIT License
6 stars 10 forks source link

Criar funcionalidade de gravação de audio #47

Closed Dovyski closed 4 years ago

Dovyski commented 4 years ago

O app do practice precisa ser capaz de gravar audio do microfone do celular do usuário, da mesma forma que o whatsapp/telegram permitem isso. A diferença é que, no nosso caso, usaremos esses audios como narrações de materiais.

O objetivo dessa issue não é desenvolver a tela com a UI/UX necessária para o usuário final. Pelo contrário, o objetivo é desenvolver a funcionalidade básica, que funcione, para que possamos criar a tela depois.

Para isso, na página sobre, colocar em algum local a seção "Experimentos", e lá colocar um link para uma página nova chamada record-audio.html. Essa página deve conter um botão de gravar simples, com dois estados (gravar e parar gravação). Algo estilo o mostrado abaixo:

image"

Não precisa se preocupar com a UI, não é o foco.

Em relação a gravação, ela deve, obrigatoriamente, ser armazenada localmente utilizando IndexedDB. Eu recomendo que a lib idb seja usada para isso. O audio precisa ser armazenado no banco do indexedDb com informações sobre a data de criação e duração.

O usuário pode gravar quantos audios quiser, e todos eles ficam disponíveis para consulta. Os audios já gravados devem ser listados nessa página e o usuário pode ouvir o audio ou apagar ele.

Dovyski commented 4 years ago

Acho que esse é um caminho bom para a implementação: https://blog-addpipe-com.cdn.ampproject.org/v/s/blog.addpipe.com/using-webaudiorecorder-js-to-record-audio-on-your-website/amp/?amp_js_v=a3&amp_gsa=1&usqp=mq331AQFKAGwASA%3D#aoh=15999553282037&csi=1&referrer=https%3A%2F%2Fwww.google.com&amp_tf=From%20%251%24s&ampshare=https%3A%2F%2Fblog.addpipe.com%2Fusing-webaudiorecorder-js-to-record-audio-on-your-website%2F

andrewmsilva commented 4 years ago

Dando um feedback do progresso, o UI simplificado da tela está pronto, ela já está acessível pela seção Experimentos na tela Sobre e eu já comecei a implementar a gravação usando coisas nativas do JS.

Vide um GIF para melhor visualização: recorder-practice

Era pra estar pronto já, pois a gravação está funcionando, mas estou com dificuldade para salvar o áudio (que vem como um Blob).

Dovyski commented 4 years ago

Para salvar os dados localmente, tu pode converter eles para base64. Para enviar para o servidor, podemos mandar esse base64 mesmo via post.

andrewmsilva commented 4 years ago

O único detalhe que falta agora é armazenar o nome do áudio e o base64 numa lista que o app consiga obter quando precisa. Tentei utilizar o IndexedDB, mas tive algumas dificuldades. Portanto, farei uma solução provisória usando LocalStorage mesmo, pois é mais simples e assim a funcionalidade fica funcional. Após isso, mudo para o IndexedDB.

andrewmsilva commented 4 years ago

A funcionalidade foi feita utilizando js puro (navigator.mediaDevices, localStorage e DOM <audio>) e já está disponível para testes. Fiz um vídeo mostrando ela funcionando e coloquei no Drive.

Por conta das características da implementação, é necessário realizar testes com o app em um celular para ver como os elementos puros vão se comportar num celular, visto que no navegador é natural que tudo funcione. No entanto, meus testes para rodar o app no celular não deram muito certo, infelizmente.

De qualquer forma, aguardo feedback do resultado.

Dovyski commented 4 years ago

O resultado ficou fantástico, parabéns, @andrewmsilva 💪 Essa feature será uma das primeiras que colocaremos em produção no app depois que o básico estiver implementado. Por agora, deixamos ela finalizada mas na memória para lapidação/ajuste quando as outras partes básicas estiverem lapidadas no app.