POC - Player de áudio com Next.js
Published: 2021-05-03 03:51:23

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:

```bash
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.

```jsx
import { useEffect, useRef, useState } from "react"
```

Agora iremos criar o HTML e as funções para a manipulação do áudio dentro da pagina.

```jsx
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.

```bash
// 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](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/](https://www.linkedin.com/in/sander-paniago/)

Github: [https://github.com/sanderpaniago](https://github.com/sanderpaniago)