Adicionar sons ao seu aplicativo é uma ótima maneira de envolver os usuários. Um pequeno ding para uma nova notificação, um som de”whoosh”para um e-mail enviado ou um ruído de desintegração para excluir arquivos pode ajudar muito a construir uma melhor experiência do usuário para seu aplicativo React Native.
Em Neste guia, exploraremos o som nativo-reativo, um poderoso componente de áudio que pode lidar com tarefas relacionadas ao som para o seu aplicativo React Native.
Cobriremos o seguinte com exemplos práticos:
O que é react-native-sound? Configurando o react-native-sound (iOS e Android) Adicionando sons ao seu aplicativo React Native Reproduzindo sons de um pacote Importando arquivos de som Reproduzindo arquivos de som de um caminho remoto
Para acompanhar, você deve estar familiarizado com o noções básicas do React Native , incluindo JSX , c omponentes (classe e f uncional) e styling .
Você poderia simplesmente copiar e colar os blocos de código deste guia, mas eu sugeriria a leitura de todo o tutorial para um entendimento completo. Este guia assume que você já fez a configuração básica para seu aplicativo.
O que é react-native-sound?
react-native-sound é um módulo no React Native para reproduzir clipes de som no iOS, Android e Windows. Este módulo permite que você adicione áudio de várias fontes, como o pacote de aplicativos (nativo), o pacote de JavaScript ou caminhos remotos (armazenamento local ou URLs remotos).
react-native-sound é mais de uma classe do que um componente de classe, o que ajuda a controlar as instâncias usando métodos predefinidos sem atualizar estados ou props. Isso alivia as preocupações relacionadas a rerenders lentos do aplicativo.
Embora sua documentação avise que o som react-native tem “qualidade alfa e pode ter bugs”, é um dos sons React Native mais populares e amplamente usados bibliotecas hoje.
Configurando o react-native-sound (iOS e Android)
Para começar a usar o react-native-sound, você precisará dos sons que deseja tocar no seu aplicativo se eles não estiverem disponíveis remotamente (ou seja, eles estão dentro do pacote do aplicativo em vez de no armazenamento externo do dispositivo ou em um servidor remoto).
Para adicionar som nativo-reativo ao seu aplicativo, basta insira o seguinte comando dentro do diretório do seu aplicativo usando o gerenciador de pacotes de sua preferência (por exemplo, npm ou yarn):
$ yarn add react-native-sound
Se você está construindo para Android, a vinculação é tratada durante a construção processo.
Para iOS, simplesmente navegue até o diretório do iOS e chame a instalação do pod. Isso adicionará pods necessários para o som react-native.
Adicionando sons ao seu aplicativo React Native
Agora é hora de adicionar os sons que você deseja reproduzir. Esta etapa serve apenas para aprender como agrupar os arquivos de áudio dentro do pacote nativo. Também abordaremos uma maneira mais simples de exigir os arquivos de áudio do diretório de ativos.
Para Android, crie o diretório bruto e copie os sons para ele:
{appDirectory}/android/app/src/main/res/raw
Para iOS, abra a área de trabalho no Xcode, clique com o botão direito do mouse no projeto e clique em Adicionar arquivos a {project_name} , conforme mostrado abaixo:
O resultado deve ser parecido com este:
Depois de adicionar os arquivos de som, basta construir o aplicativo e execute-o em um simulador ou, de preferência, em um dispositivo real.
Tocando sons de um pacote
Depois de succ executando essencialmente o aplicativo, é hora de começar a codificar.
Primeiro, precisamos importar o componente de som no aplicativo:
import Sound from’react-native-sound’;
Antes de configurar o som que vamos tocar, precisamos especificar a categoria do som:
Sound.setCategory (‘Playback’);
Para inicializar o som, use o seguinte código:
var ding=new Sound (‘ding.mp3’, Sound.MAIN_BUNDLE, (erro)=> {if (erro) {console.log (‘falhou para carregar o som’, erro); return;}//quando carregado com sucesso console.log (‘duração em segundos:’+ whoosh.getDuration () +’número de canais:’+ whoosh.getNumberOfChannels ());}) ;
O código acima usa o primeiro argumento, ding.mp3, um arquivo do pacote especificado usando o segundo argumento, Sound.MAIN_BUNDLE, e retorna um retorno de chamada no terceiro argumento.
\ “ getDuration é usado para obter a duração do arquivo de áudio em segundos, e getNumberOfChannels é usado para obter a contagem dos canais de áudio.
Para definir o volume da reprodução, podemos usar o seguinte método:
ding.setVolume (1);
Aqui, 1 é o volume mais alto e 0 é o mais baixo, com a diferença entre eles em casas decimais-por exemplo, para reduzir o volume para 50 por cento, defina-o como 0,5.
Para jogar o arquivo, podemos usar o método de reprodução de Som, da seguinte maneira:
ding.play (sucesso=> {if (sucesso) {console.log (‘terminou a reprodução com sucesso’);} else {console.log (‘a reprodução falhou devido a erros de decodificação de áudio’);}});
Há um retorno de chamada após a conclusão bem-sucedida do retorno (ou se algo der errado, nesse caso).
Para resumir as etapas descritas acima:
Defina a categoria do som que é a ser reproduzido Inicialize um arquivo de som Ajuste o volume, se necessário Toque o som
Aqui está o código final para reproduzir um som do pacote:
import React, {useEffect} from’react’; import {View, StyleSheet, TouchableOpacity} de’react-native’; importar Ionicons de’react-native-vector-icons/Ionicons’; var Sound=require (‘react-native-sound’); Sound.setCategory (‘Reprodução’); var ding=new Sound (‘ding.mp3’, Sound.MAIN_BUNDLE, (erro)=> {if (erro) {console.log (‘falha ao carregar o som’, erro); return;}//se carregado com sucesso console.log (‘duração em segundos:’+ ding.getDuration () +’número de canais:’+ ding.getNumberOfChannels ());}); const App=()=> {useEffect (()=> {ding.setVolume (1); return ()=> {ding.release ();};}, []); const playPause=()=> {ding.play (sucesso=> {if (sucesso) {console.log (‘finalizou a reprodução com sucesso’);} else {console.log (‘a reprodução falhou devido a erros de decodificação de áudio’); }}); }; return (
Importando arquivos de som
Agora, quanto aos arquivos do diretório de ativos (ou qualquer diretório do aplicativo), podemos apenas usar o mesmo antigo require ou import para obter a instância do arquivo e reproduzi-lo usando react-native-sound.
Basta importar o arquivo-
importar dings de’./src/assets/ding.mp3′;
-e use-o no pacote de som, conforme mostrado abaixo:
var ding=new Sound (dings, error=> {if (error) {console.log (‘falhou ao carregar o som’, erro ); return;}//se carregado com sucesso console.log (‘duração em segundos:’+ ding.getDuration () +’número de canais:’+ ding.getNumberOfChannels ());});
A diferença ao usar um arquivo importado ou necessário dos ativos em vez de arquivos agrupados é que você não precisa especificar o basePath para o arquivo. Em vez disso, o retorno de chamada toma seu lugar.
Aqui está o código para o componente reproduzir um arquivo importado:
import React, {useEffect} from’react’; import {View, StyleSheet, TouchableOpacity} de’react-native’; importar dados de’./src/assets/ding.mp3′; importar Ionicons de’react-native-vector-icons/Ionicons’; var Sound=require (‘react-native-sound’); Sound.setCategory (‘Reprodução’); var ding=new Sound (dings, error=> {if (error) {console.log (‘falha ao carregar o som’, erro); return;}//se carregado com sucesso console.log (‘duração em segundos:’+ ding.getDuration () +’número de canais:’+ ding.getNumberOfChannels (),);}); const App=()=> {useEffect (()=> {ding.setVolume (1); return ()=> {ding.release ();};}, []); const playPause=()=> {ding.play (sucesso=> {if (sucesso) {console.log (‘finalizou a reprodução com sucesso’);} else {console.log (‘a reprodução falhou devido a erros de decodificação de áudio’); }}); }; return (
Abaixo está o resultado do código acima. Basta tocar no botão de reprodução para reproduzir o som.
Reproduzindo arquivos de som de um caminho remoto
Você pode querer reproduzir arquivos remotos ou de armazenamento local. Isso é basicamente tão fácil quanto reproduzir um arquivo agrupado usando o som nativo do react. Você só precisa adicionar o URL como o primeiro parâmetro para Sound e definir o segundo parâmetro como null porque o arquivo é de um armazenamento remoto ou local, não do aplicativo.
var audio=new Sound (‘https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3’, null, error=> {if (error) {console.log (‘falhou ao carregar o som’, erro); return; }//se carregado com sucesso console.log (‘duração em segundos:’+ audio.getDuration () +’número de canais:’+ audio.getNumberOfChannels (),);},);
Abaixo está um exemplo completo de como reproduzir, pausar e liberar o áudio depois que o aplicativo é fechado ou o componente é desmontado:
import React, {useEffect, useState} from’react’; import {View, StyleSheet, TouchableOpacity} de’react-native’; importar Ionicons de’react-native-vector-icons/Ionicons’; var Sound=require (‘react-native-sound’); Sound.setCategory (‘Reprodução’); var audio=new Sound (‘https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3’, null, error=> {if (erro) {console.log (‘falhou ao carregar o som’, erro); return;}//se carregado com sucesso console.log (‘duração em segundos:’+ audio.getDuration () +’número de canais:’+ audio.getNumberOfChannels (),);}, ); const App=()=> {const [playing, setPlaying]=useState (); useEffect (()=> {audio.setVolume (1); return ()=> {audio.release ();};}, []); const playPause=()=> {if (audio.isPlaying ()) {audio.pause (); setPlaying (false); } else {setPlaying (true); audio.play (success=> {if (success) {setPlaying (false); console.log (‘execução bem-sucedida’);} else {setPlaying (false); console.log (‘reprodução falhou devido a erros de decodificação de áudio’);}}); }}; return (
.release () é usado para liberar a memória reservada para reproduzir os arquivos de áudio. É muito importante liberar a memória depois que o componente for desmontado ou o áudio não será reproduzido novamente. Isso ajuda a evitar vazamentos de memória ou outros erros.
