Componente React Audio Motion con analisi visuale

Introduzione al nuovo componente React: Audio Motion con Analisi Visuale. Questo componente non solo permette la riproduzione di audio da diverse sorgenti, ma include anche una visualizzazione dinamica e accattivante grazie all'uso di audioMotion-analyzer.

Funzionalità principali

Il nostro Audio Motion include le seguenti funzionalità:

• Riproduzione di live streaming: Puoi riprodurre flussi audio in diretta.
• Riproduzione di file audio statici: Carica e riproduci file audio locali.
• Visualizzazione dinamica: Mostra un’analisi visiva dell’energia audio in diverse bande di frequenza.

Implementazione del componente

Installazione delle dipendenze

Per iniziare, è necessario installare il pacchetto audiomotion-analyzer tramite npm. Apri il terminale nella directory del tuo progetto e esegui:

npm install audiomotion-analyzer

Codice del componente React

import React, { useEffect, useRef } from 'react';
import AudioMotionAnalyzer from 'audiomotion-analyzer';

const AudioPlayer = () => {
  const audioRef = useRef(null);
  const containerRef = useRef(null);
  const versionRef = useRef(null);

  useEffect(() => {
    // instantiate analyzer
    const audioMotion = new AudioMotionAnalyzer(containerRef.current, {
      source: audioRef.current,
      showBgColor: false,
      onCanvasDraw: energyMeters,
      gradient: "orangered",
      overlay: true
    });

    // display module version
    versionRef.current.innerText = `v${AudioMotionAnalyzer.version}`;

    // play stream
    document.getElementById('live').addEventListener('click', () => {
      audioRef.current.src = 'https://icecast2.ufpel.edu.br/live';
      audioRef.current.play();
    });

    // file upload
    document.getElementById('upload').addEventListener('click', () => {
      const fileBlob = "/better-day.mp3";
      if (fileBlob) {
        audioRef.current.src = fileBlob;
        audioRef.current.play();
      }
    });

    // callback function
    function energyMeters() {
      const canvas = audioMotion.canvas,
            ctx = audioMotion.canvasCtx,
            pixelRatio = audioMotion.pixelRatio,
            baseSize = Math.max(20 * pixelRatio, canvas.height / 27 | 0),
            centerX = canvas.width >> 1,
            centerY = canvas.height >> 1;

      // helper function
      const drawLight = (posX, color, alpha) => {
        const width = 50 * pixelRatio,
              halfWidth = width >> 1,
              doubleWidth = width << 1;

        const grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
        grad.addColorStop(0, color);
        grad.addColorStop(.75, `${color}0`);

        ctx.beginPath();
        ctx.moveTo(posX - halfWidth, 0);
        ctx.lineTo(posX - doubleWidth, canvas.height);
        ctx.lineTo(posX + doubleWidth, canvas.height);
        ctx.lineTo(posX + halfWidth, 0);

        ctx.save();
        ctx.fillStyle = grad;
        ctx.shadowColor = color;
        ctx.shadowBlur = 40;
        ctx.globalCompositeOperation = 'screen';
        ctx.globalAlpha = alpha;
        ctx.fill();
        ctx.restore();
      }

      // bass, midrange and treble meters
      ctx.fillStyle = '#fff8';
      ctx.textAlign = 'center';
      const growSize = baseSize * 4;

      const bassEnergy = audioMotion.getEnergy('bass');
      ctx.font = `bold ${baseSize + growSize * bassEnergy}px sans-serif`;
      ctx.fillText('BASSI', canvas.width * .15, centerY);
      drawLight(canvas.width * .15, '#f00', bassEnergy);

      drawLight(canvas.width * .325, '#f80', audioMotion.getEnergy('lowMid'));

      const midEnergy = audioMotion.getEnergy('mid');
      ctx.font = `bold ${baseSize + growSize * midEnergy}px sans-serif`;
      ctx.fillText('MEDI', centerX, centerY);
      drawLight(centerX, '#ff0', midEnergy);

      drawLight(canvas.width * .675, '#0f0', audioMotion.getEnergy('highMid'));

      const trebleEnergy = audioMotion.getEnergy('treble');
      ctx.font = `bold ${baseSize + growSize * trebleEnergy}px sans-serif`;
      ctx.fillText('ALTI', canvas.width * .85, centerY);
      drawLight(canvas.width * .85, '#0ff', trebleEnergy);
    }

    // cleanup event listeners on unmount
    return () => {
      document.getElementById('live').removeEventListener('click', () => {});
      document.getElementById('upload').removeEventListener('click', () => {});
    };
  }, []);

  return (
    <div id="audioMotionContainer">
      <div id="container" ref={containerRef}></div>
      <audio id="audio" ref={audioRef} src="https://icecast2.ufpel.edu.br/live" controls crossOrigin="anonymous"></audio>
      <button id="upload">Riproduci audio statico</button>
      <button id="live">Riproduci live streaming</button>
      <div className="info">
        <a href="https://audiomotion.dev">audioMotion-analyzer</a> <span id="version" ref={versionRef}></span>
      </div>
    </div>
  );
};

export default AudioPlayer;

Utilizzo del componente

Per utilizzare questo componente, basta importarlo e includerlo nel render di un altro componente o direttamente nel render della tua applicazione principale:

import React from 'react';
import ReactDOM from 'react-dom';
import AudioPlayer from './AudioPlayer'; // Assicurati che il percorso sia corretto

const App = () => (
  <div>
    <h1>Audio Player con Visualizzazione</h1>
    <AudioPlayer />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

Utilizzi Potenziali

Il componente React Audio Motion può essere utilizzato in una varietà di contesti, tra cui:

• Per aggiungere un tocco di dinamicità e interattività ai tuoi progetti web che coinvolgono audio.

• Per creare effetti visivi personalizzabili e accattivanti basati sul suono.

• Per sperimentare con le possibilità creative offerte dalle API Web Audio e Canvas.

Il nostro nuovo componente React Audio Player con Analisi Visuale offre un modo semplice e visivamente accattivante per integrare la riproduzione audio e la visualizzazione dell’energia audio nella tua applicazione. Speriamo che questo componente sia utile per i tuoi progetti e ti invitiamo a esplorare ulteriori personalizzazioni per adattarlo alle tue esigenze specifiche.

Per ulteriori informazioni, visita il sito ufficiale di audioMotion-analyzer.