Ola, neste post vou mostrar uma maneira simples de fazer um player utilizando a tag <audio>
do html junto com o React.js
primeiramente precisamos criar a estrutura do projeto, para isso iremos utilizar o create-next-app
para gerar a estrutura base para começarmos a desenvolver. Utilize o comando de sua preferencia:
yarn create next-app player-audio
// ou
npx create-next-app player-audio
Após finalizar o procedimento acima iremos deletar alguns arquivos que não serão utilizados como:
public/favicon.icon
public/vercel.svg
pages/api/
styles/Home.modules.css
Dentro do arquivo pages/index.js
deixe somete uma <div></div>
dentro do return
.
No inicio do arquivo index.js faremos algumas importações que serão uteis ao decorrer do projeto.
import { useEffect, useRef, useState } from "react"
Agora iremos criar o HTML e as funções para a manipulação do áudio dentro da pagina.
export default function Home() {
const audioRef = useRef(null)
const [isPlaying, setIsPlaying] = useState(false)
function setPlayingState(state) {
setIsPlaying(state)
}
function toggleIsPlaying() {
setIsPlaying(!isPlaying)
}
useEffect(()=> {
if (!audioRef.current) {
return;
}
if (isPlaying) {
audioRef.current.play()
} else {
audioRef.current.pause()
}
}, [isPlaying])
return (
<div>
<div>
{isPlaying ? (
<button onClick={toggleIsPlaying}>Pause</button>
): (
<button onClick={toggleIsPlaying}>Play</button>
)
}
<button>Reload</button>
</div>
<audio
src='/music.mp3'
autoPlay={true}
ref={audioRef}
onPlay={() => setPlayingState(true)}
onPause={() => setPlayingState(false)}
/>
</div>
)
}
Na linha 5 onde declaramos a const audioRef
definimos o hook useRef(null)
pois na primeira vez que o React carregar o useRef antes da tag <audio>
onde ele é chamado, então o primeiro valor dessa ref ira ser null, somente após o elemento ser construído em tela que será atribuído um novo valor a ele. As propriedades onPlay
e onPause
server para chamar a função quando as teclas ou atalhos de ação do navegador é ativado
Na linha 7 declaramos um estado para controlar se o áudio esta ativo.
Nas linhas 9 a 15 são as funções que manipulam o estado do isPlaying
Na linha 17 é utilizado o useEffect
para poder disparar uma função ou evento sempre que a variável isPlaying
mudar.
Na linha 32 a 37 é feito uma validação para mostrar o botão correspondente, caso isPlaying for verdadeiro ele ira exibir o botão de Pausar, caso for falso ira mostrar o botão de play.
Como exemplo coloquei um arquivo .mp3 na pasta public
, no Next.js todo arquivo colocado dentro dessa pasta é servido de modo estático dentro da aplicação, os arquivos podem ser acessado pela rota /nomedoarquivo.tipo
.
Com tudo isso configurado já é possível controlar o áudio pela nossa página. Para rodar sua aplicação em sua maquina possui dois modos, o modo desenvolvedor ou o build.
// dev
yarn dev
//ou
npm run dev
// build
yarn build && yarn start
//ou
npm run build && npm run start
link do repositório de exemplo: https://github.com/sanderpaniago/poc-player
Muito obrigado se leu ate aqui e me sigam nas rede sociais.
linkedin: https://www.linkedin.com/in/sander-paniago/
Github: https://github.com/sanderpaniago
Top comments (0)