DEV Community

Cover image for POC - Player de áudio com Next.js
Sander Paniago
Sander Paniago

Posted on

POC - Player de áudio com Next.js

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)