Trabalhando com som no React

Aprimorando as interações da interface do usuário com sons simples.

Quando adicionado cuidadosamente, o som pode fornecer ações do usuário com mais profundidade e pode ajudar a melhorar o contexto. Muitas vezes, o som nem é levado em consideração na hora de projetar sites, mas não precisa ser assim!

Neste artigo, você aprenderá como usar som no React. Começaremos escrevendo um gancho React personalizado simples usando a HTMLAudioElementinterface e, em seguida, pegaremos o que escrevemos e usaremos em três exemplos.

Este artigo não entra em detalhes sobre quando não usar som. Como a maioria das coisas, você deve usar seu bom senso. Considere se isso será irritante para seus usuários e se realmente contribui para a experiência geral. Se a resposta não for óbvia, então você provavelmente não deveria usar som.

Todos os arquivos de áudio neste artigo são do Pixabay .

Escrevendo um Gancho React Personalizado

Começaremos mergulhando imediatamente na escrita de um gancho React.

Crie um novo arquivo chamado useWithSound.

Este gancho personalizado usa um único parâmetro audioSource, que é uma referência a um arquivo ou caminho de áudio.

import { useRef, useEffect } from 'react';

export const useWithSound = (audioSource) => {
  const soundRef = useRef();

  return {};
}

Em seguida, crie uma nova Audioinstância passando o audioSourcepara o Audio construtor. Isso deve estar dentro de um useEffectarquivo que é executado uma vez. Armazenaremos esta instância em um React refpara acessá-la por meio do gancho.

export const useWithSound = (audioSource) => {
  const soundRef = useRef();

  useEffect(() => {
    soundRef.current = new Audio(audioSource);
  }, []);

  return {};
}

Para reproduzir um som, é tão fácil quanto chamar o .play()método. Pausar é igualmente simples. Escreveremos duas funções que fazem isso.

export const useWithSound = (audioSource) => {
  ...

  const playSound = () => {
    soundRef.current.play();
  }

  const pauseSound = () => {
    soundRef.current.pause();
  }

  return {};
}

Nosso gancho retorna as duas funções que acabamos de escrever, então qualquer componente consumidor pode usá-las.

export const useWithSound = (audioSource) => {
  ...

  return {
    playSound,
    pauseSound,
  }
}

E é isso para o gancho personalizado. Agora vamos usá-lo!

Não deixe de conferir Construindo um reprodutor de áudio com React Hooks para um uso mais avançado da HTMLAudioElementAPI.

O CSS usado nesses exemplos não é o foco deste artigo, por isso não entraremos em detalhes. Consulte as demonstrações para obter o código completo.

Reproduzindo um som ao clicar no botão

A primeira coisa que faremos com nosso novo gancho será tocar um som quando um botão for clicado.

https://codesandbox.io/embed/j8xst7?&hidenavigation=1&theme=dark&view=preview&hidedevtools=1

Crie um novo componente chamado ButtonClicke importe o useWithSoundgancho.
Este componente retorna algum HTML, incluindo um botão com um manipulador de cliques chamado handleButtonClick.

import { useWithSound } from './useWithSound';

export const ButtonClick = () => {
  return (
    <section className="example">
      <div className="container">
        <button type="button" onClick={handleButtonClick}>
          Click here
        </button>
      </div>
    </section>
  );
}

Agora use o gancho passando um som de clique do mouse e execute-o dentro de uma handleButtonClickfunção.

import { useWithSound } from './useWithSound';
import click from './assets/click.mp3';

export const ButtonClick = () => {
  const { playSound } = useWithSound(click);

  const handleButtonClick = () => {
    playSound();
  }

  return (...);
}

Reproduzindo um som ao mostrar uma mensagem

A seguir reproduziremos um som ao mostrar uma nova mensagem na tela. Após descartar a mensagem, clicar no botão de disparo reproduzirá a animação e o som.

https://codesandbox.io/embed/working-with-sound-in-react-message-xnhylp?fontsize=14&hidenavigation=1&theme=dark

Assim como no exemplo anterior, crie um novo componente e importe o gancho. Daremos um nome Messagee o som que tocaremos terá o mesmo nome.

Desta vez usamos um showMessagevalor de estado que mostra a mensagem quando true.

import { useState, useEffect } from 'react';
import { useWithSound } from './useWithSound';
import message from './assets/message.mp3';

export const Message = () => {
  const [showMessage, setShowMessage] = useState(false);

  return ();
}

A seguir, na instrução return, vamos adicionar um pouco de HTML.

A marcação consiste em alguns elementos contidos, um botão que define o showMessageestado como truee a própria mensagem.

return (
  <section className="example">
    <div className="container">
      <button 
        type="button"
        className="message-trigger"
        onClick={() => setShowMessage(true)}
      >Show a message</button>
      {showMessage && (
        <div className="message">
          <div>
            <div>You have a new message!</div>
            <a href="#">View</a>
          </div>
          <button type="button" onClick={() => setShowMessage(false)}>X</button>
        </div>
      )}
    </div>
  </section>
);

Agora vamos configurar nosso gancho com o som que importamos e, em um useEffectgancho separado, tocá-lo quando o showMessagevalor do estado for true.

export const Message = () => {
  const [showMessage, setShowMessage] = useState(false);
  const { playSound } = useWithSound(message);

  useEffect(() => {
    if (showMessage) {
      playSound();
    }
  }, [showMessage]);
	
  return (...);
}