Transform Data into Sound

Data visualization charts cannot provide the same experience to non-visual users.
Now use @uturi/sonification to quickly and easily convey data changes through sound.

Interactive Demo

Conversion Method

Advanced Options

Getting Started

📦 Installation

npm install @uturi/sonification

🚀 Quick Start

Basic Example

import { Sonifier } from '@uturi/sonification';

// Simple array sonification
const salesData = [100, 150, 80, 200, 175, 300];
const sonifier = new Sonifier();
const result = await sonifier.sonify(salesData, 'frequency', { autoPlay: true });

React Component Example

import { Sonifier } from '@uturi/sonification';
import { useState, useRef, useEffect, useCallback } from 'react';

function ChartWithSound() {
  const [isPlaying, setIsPlaying] = useState(false);
  const chartData = [10, 25, 15, 40, 35, 60];
  const sonifierRef = useRef<Sonifier | null>(null);

  // Sonifier 인스턴스 초기화
  useEffect(() => {
    sonifierRef.current = new Sonifier();
    
    return () => {
      sonifierRef.current?.cleanup();
    };
  }, []);

  const handlePlaySound = useCallback(async () => {
    if (!sonifierRef.current) return;
    
    setIsPlaying(true);
    try {
      await sonifierRef.current.sonify(chartData, 'frequency', { autoPlay: true });
    } finally {
      setIsPlaying(false);
    }
  }, [chartData]);

  return (
    <div>
      <button onClick={handlePlaySound} disabled={isPlaying}>
        {isPlaying ? 'Playing...' : 'Play Chart Sound'}
      </button>
    </div>
  );
}

🎵 Sonification Methods

4 Different Audio Mapping Methods

// 4 different conversion methods
const data = [10, 20, 30, 40, 50];
const sonifier = new Sonifier();

// 1. Frequency variation (higher value = higher pitch)
await sonifier.sonify(data, 'frequency', { autoPlay: true });

// 2. Volume variation (higher value = louder sound)
await sonifier.sonify(data, 'volume', { autoPlay: true });

// 3. Rhythm variation (higher value = faster rhythm)
await sonifier.sonify(data, 'rhythm', { autoPlay: true });

// 4. Melody variation (musical scale: C, D, E, F, G, A, B)
await sonifier.sonify(data, 'melody', { autoPlay: true });

⚙️ Custom Configuration

Detailed Audio Settings

// Fine-tuned configuration customization
const sonifier = new Sonifier({
  // Basic audio settings
  duration: 3.0,        // 3 seconds playback
  sampleRate: 44100,    // CD quality
  
  // Frequency range (Hz)
  minFrequency: 200,    // Lowest pitch
  maxFrequency: 800,    // Highest pitch
  
  // Volume range (0-1)
  minVolume: 0.1,       // Minimum volume
  maxVolume: 0.8,       // Maximum volume
  
  // Rhythm range (0-1)
  minRhythm: 0.2,       // Minimum rhythm
  maxRhythm: 0.9,       // Maximum rhythm
});

await sonifier.sonify(salesData, 'frequency', { autoPlay: true });