Cómo capturar el tab del browser y ejecutar acciones

Hola mis amigos de la #nerdytud.

En el día de hoy les estoy compartiendo un truco muy sencillo. Con el cual, al capturar el evento de cambio de tab del browser, ejecute una determinada acción.

Inicialización del proyecto

npm init vite@latest tabs -- --template react

cd tabs

npm install

Modificación de app.jsx

import { useEffect, useState } from 'react'

function App() {
  const [audio] = useState(new Audio("./music/cerati.mp3"));

  const handleMusic = () => {
    audio.play();
  };

  useEffect(() => {
    document.addEventListener("visibilitychange", () => {
      if (document.visibilityState === 'visible') {
        audio.play();
      } else {
        audio.pause();
      }
    });
  }, []);

  return (
    <div>
      <button onClick={handleMusic}>play</button>
    </div >
  )
}

export default App

Ejecutar la aplicación

npm run dev

http://localhost:5173/