@xbibzlibrary/editmusik

v1.0.6

Published

4 months ago

editor music web beta, ada bug? pv tele gw 🤬

0High
0Medium
0Low

xbibzbackup

audio music editor effect remix metadata browser

🎵 EditMusik Library

🚀 Modern & Powerful Music Editor Library

Transform, Mix, and Master Your Audio with Advanced Web Audio API

📦 Installation • 🎯 Quick Start • 📖 Documentation • 🎨 Examples

✨ Features

🎚️ Multi-Track Editing

✅ Up to 32 simultaneous tracks
✅ Independent volume & pan control
✅ Solo/Mute functionality
✅ Color-coded track management

🎛️ Professional Effects

🌊 Reverb - Spatial depth
⏱️ Delay - Echo effects
📊 Equalizer - 3-band EQ
🔊 Compressor - Dynamic range

🎼 Advanced Processing

🔄 Time-stretching
🎵 Pitch-shifting
🎭 Audio morphing
📈 Real-time analysis

💾 Export Options

📤 WAV/MP3 export
🎨 Album art support
📋 Full metadata editing
🔄 Project saving/loading

🎪 Effect Showcase

| Effect | Icon | Description | Use Case | |--------|------|-------------|----------| | Reverb | 🌊 | Creates spatial depth and ambiance | Vocals, guitars, orchestral | | Delay | ⏱️ | Echo and rhythmic repeats | Creative timing effects | | Equalizer | 📊 | 3-band frequency control | Tone shaping, mixing | | Compressor | 🔊 | Dynamic range control | Loudness, punch | | Distortion | ⚡ | Harmonic saturation | Rock, EDM, creative | | Chorus | 🎭 | Thickness and width | Guitars, synths | | Flanger | 🌀 | Sweeping jet effect | Transitions, FX | | Phaser | 🔮 | Swirling phase shift | Psychedelic, vintage |

📦 Installation

Via CDN (Recommended)

<script src="https://cdn.jsdelivr.net/npm/@xbibzlibrary/editmusik/dist/editmusik.js"></script>

Via NPM

npm install @xbibzlibrary/editmusik

import EditMusik from '@xbibzlibrary/editmusik';

🎯 Quick Start

🚀 Create Your First Music Editor in 3 Steps!

Step 1️⃣: Initialize

// Create editor instance
const editor = new EditMusik({
    sampleRate: 44100,
    bufferSize: 4096,
    maxTracks: 32,
    quality: 'high'
});

console.log('🎵 Editor initialized!', editor.getSystemInfo());

Step 2️⃣: Add Tracks & Audio

// Create a track
const trackId = editor.createTrack('Lead Vocal', {
    volume: 0.8,
    panning: 0,
    color: '#FF6B6B'
});

// Load audio file
const audioFile = document.getElementById('fileInput').files[0];
await editor.loadAudio(trackId, audioFile);

// Or load from URL
await editor.loadAudio(trackId, 'https://example.com/audio.mp3');

Step 3️⃣: Add Effects & Export

// Add reverb effect
editor.addEffect(trackId, 'reverb', {
    mix: 0.3,
    decay: 2.5,
    duration: 2
});

// Add delay
editor.addEffect(trackId, 'delay', {
    delayTime: 0.5,
    feedback: 0.4,
    mix: 0.3
});

// Set metadata
editor.setMetadata({
    title: 'My Awesome Track',
    artist: 'DJ Producer',
    album: 'Summer Vibes',
    genre: 'Electronic',
    bpm: 128
});

// Export and download
await editor.exportProject('wav', 'high');
editor.downloadAudio('wav', 'my-track.wav');

📖 Documentation

🎼 Track Management

`createTrack(name, options)`

Creates a new audio track.

const trackId = editor.createTrack('Drums', {
    volume: 1.0,      // 0.0 to 1.0
    panning: 0,       // -1 (left) to 1 (right)
    color: '#4ECDC4'  // Visual color
});

`loadAudio(trackId, audioData, options)`

Loads audio into a track. Accepts File, Blob, ArrayBuffer, or URL.

// From file input
const file = event.target.files[0];
await editor.loadAudio(trackId, file);

// From URL
await editor.loadAudio(trackId, 'path/to/audio.mp3');

// From Blob
const blob = new Blob([arrayBuffer], { type: 'audio/wav' });
await editor.loadAudio(trackId, blob);

`playTrack(trackId, startTime)`

// Play from beginning
editor.playTrack(trackId);

// Play from 30 seconds
editor.playTrack(trackId, 30);

`stopTrack(trackId)`

editor.stopTrack(trackId);

`removeTrack(trackId)`

editor.removeTrack(trackId);

🎛️ Effects System

Available Effects & Parameters

editor.addEffect(trackId, 'reverb', {
    mix: 0.5,        // Wet/dry mix (0-1)
    decay: 2.0,      // Decay time (0-10)
    duration: 2      // Impulse duration (0-5)
});

Best for: Adding space and depth to vocals, instruments

editor.addEffect(trackId, 'delay', {
    delayTime: 0.5,  // Delay time in seconds
    feedback: 0.5,   // Feedback amount (0-1)
    mix: 0.5         // Wet/dry mix (0-1)
});

Best for: Echo effects, rhythmic enhancement

editor.addEffect(trackId, 'equalizer', {
    lowFreq: 250,    // Low frequency (Hz)
    lowGain: 3,      // Low gain (dB, -12 to 12)
    midFreq: 1000,   // Mid frequency (Hz)
    midGain: 0,      // Mid gain (dB)
    midQ: 1,         // Mid Q factor
    highFreq: 4000,  // High frequency (Hz)
    highGain: -2     // High gain (dB)
});

Best for: Tone shaping, removing mud, adding brightness

editor.addEffect(trackId, 'compressor', {
    threshold: -24,  // Threshold (dB)
    knee: 30,        // Knee (dB)
    ratio: 12,       // Compression ratio
    attack: 0.003,   // Attack time (seconds)
    release: 0.25    // Release time (seconds)
});

Best for: Controlling dynamics, adding punch

editor.addEffect(trackId, 'distortion', {
    amount: 50,      // Distortion amount (0-100)
    gain: 0.5        // Output gain (0-1)
});

Best for: Rock guitars, creative sound design

editor.addEffect(trackId, 'chorus', {
    depth: 0.02,     // Modulation depth
    rate: 1.5,       // LFO rate (Hz)
    feedback: 0.5,   // Feedback amount
    delayTime: 0.03  // Base delay time
});

Best for: Adding thickness and width

📋 Metadata Management

// Set basic metadata
editor.setMetadata({
    title: 'Song Title',
    artist: 'Artist Name',
    album: 'Album Name',
    genre: 'Electronic',
    year: 2025,
    bpm: 128,
    key: 'Am'
});

// Add album cover
const coverFile = document.getElementById('coverInput').files[0];
await editor.setAlbumCover(coverFile);

// Or from URL
await editor.setAlbumCover('https://example.com/cover.jpg');

💾 Export & Download

Export Project

// Export with high quality
const projectData = await editor.exportProject('wav', 'high');

// Export with standard quality
const projectData = await editor.exportProject('wav', 'standard');

Download Files

// Download complete project (JSON)
editor.downloadProject('my-project.json');

// Download mixed audio
editor.downloadAudio('wav', 'final-mix.wav');

🔄 Remix Engine

// Create automated remix
const remixData = await editor.createRemix('pattern1', {
    bpm: 140,
    length: 180,
    stretchFactor: 1.2
});

🎨 Examples

Example 1: Simple Vocal Processor

const editor = new EditMusik();

// Create vocal track
const vocalTrack = editor.createTrack('Lead Vocal');

// Load vocal file
await editor.loadAudio(vocalTrack, vocalFile);

// Add professional vocal chain
editor.addEffect(vocalTrack, 'equalizer', {
    lowGain: -3,
    midGain: 2,
    highGain: 4
});

editor.addEffect(vocalTrack, 'compressor', {
    threshold: -18,
    ratio: 4,
    attack: 0.005,
    release: 0.1
});

editor.addEffect(vocalTrack, 'reverb', {
    mix: 0.25,
    decay: 1.8
});

// Play
editor.playTrack(vocalTrack);

Example 2: Multi-Track Mix

const editor = new EditMusik();

// Create multiple tracks
const drums = editor.createTrack('Drums', { volume: 0.9 });
const bass = editor.createTrack('Bass', { volume: 0.8 });
const synth = editor.createTrack('Synth', { volume: 0.7, panning: 0.3 });
const vocal = editor.createTrack('Vocal', { volume: 0.85 });

// Load audio files
await Promise.all([
    editor.loadAudio(drums, drumsFile),
    editor.loadAudio(bass, bassFile),
    editor.loadAudio(synth, synthFile),
    editor.loadAudio(vocal, vocalFile)
]);

// Add effects to each track
editor.addEffect(drums, 'compressor', { threshold: -20, ratio: 6 });
editor.addEffect(bass, 'equalizer', { lowGain: 6 });
editor.addEffect(synth, 'chorus', { depth: 0.03, rate: 2 });
editor.addEffect(vocal, 'reverb', { mix: 0.3 });

// Set project metadata
editor.setMetadata({
    title: 'Summer Hit',
    artist: 'DJ Producer',
    bpm: 128
});

// Play all tracks
editor.playTrack(drums);
editor.playTrack(bass);
editor.playTrack(synth);
editor.playTrack(vocal);

// Export final mix
await editor.exportProject('wav', 'high');
editor.downloadAudio('wav', 'summer-hit-final.wav');

Example 3: Real-time Effect Control

const editor = new EditMusik();
const trackId = editor.createTrack('Dynamic Track');

await editor.loadAudio(trackId, audioFile);

// Add effect and get reference
const reverbEffect = editor.addEffect(trackId, 'reverb', { mix: 0.2 });

// Control effect in real-time
document.getElementById('reverbSlider').addEventListener('input', (e) => {
    const mix = e.target.value / 100;
    reverbEffect.nodes.gain.gain.value = mix;
});

editor.playTrack(trackId);

🎮 Complete HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EditMusik - Music Editor</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            margin: 0;
        }
        .container {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        h1 {
            color: #667eea;
            text-align: center;
        }
        .control-group {
            margin: 20px 0;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            margin: 5px;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
        input[type="file"] {
            margin: 10px 0;
        }
        .info {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎵 EditMusik - Music Editor</h1>
        
        <div class="control-group">
            <h3>📁 Load Audio</h3>
            <input type="file" id="audioFile" accept="audio/*">
            <button onclick="loadAudio()">Load Audio</button>
        </div>
        
        <div class="control-group">
            <h3>🎛️ Effects</h3>
            <button onclick="addReverb()">Add Reverb</button>
            <button onclick="addDelay()">Add Delay</button>
            <button onclick="addCompressor()">Add Compressor</button>
        </div>
        
        <div class="control-group">
            <h3>🎮 Playback</h3>
            <button onclick="play()">▶️ Play</button>
            <button onclick="stop()">⏹️ Stop</button>
        </div>
        
        <div class="control-group">
            <h3>💾 Export</h3>
            <button onclick="exportAudio()">Export & Download</button>
        </div>
        
        <div class="info" id="info">
            <strong>Status:</strong> Ready
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@xbibzlibrary/editmusik/dist/editmusik.js"></script>
    <script>
        let editor = new EditMusik();
        let trackId = null;
        
        async function loadAudio() {
            const file = document.getElementById('audioFile').files[0];
            if (!file) {
                alert('Please select an audio file first!');
                return;
            }
            
            trackId = editor.createTrack('Main Track');
            await editor.loadAudio(trackId, file);
            
            document.getElementById('info').innerHTML = 
                `<strong>✅ Audio loaded!</strong><br>
                Track: ${editor.getTrackInfo(trackId).name}<br>
                Duration: ${editor.getTrackInfo(trackId).duration.toFixed(2)}s`;
        }
        
        function addReverb() {
            if (!trackId) {
                alert('Load audio first!');
                return;
            }
            editor.addEffect(trackId, 'reverb', { mix: 0.3, decay: 2.0 });
            document.getElementById('info').innerHTML += '<br>🌊 Reverb added!';
        }
        
        function addDelay() {
            if (!trackId) {
                alert('Load audio first!');
                return;
            }
            editor.addEffect(trackId, 'delay', { delayTime: 0.5, feedback: 0.4 });
            document.getElementById('info').innerHTML += '<br>⏱️ Delay added!';
        }
        
        function addCompressor() {
            if (!trackId) {
                alert('Load audio first!');
                return;
            }
            editor.addEffect(trackId, 'compressor', { threshold: -20, ratio: 4 });
            document.getElementById('info').innerHTML += '<br>🔊 Compressor added!';
        }
        
        function play() {
            if (!trackId) {
                alert('Load audio first!');
                return;
            }
            editor.playTrack(trackId);
            document.getElementById('info').innerHTML += '<br>▶️ Playing...';
        }
        
        function stop() {
            if (!trackId) return;
            editor.stopTrack(trackId);
            document.getElementById('info').innerHTML += '<br>⏹️ Stopped';
        }
        
        async function exportAudio() {
            if (!trackId) {
                alert('Load audio first!');
                return;
            }
            
            editor.setMetadata({
                title: 'My Track',
                artist: 'My Name'
            });
            
            await editor.exportProject('wav', 'high');
            editor.downloadAudio('wav', 'my-mix.wav');
            
            document.getElementById('info').innerHTML += '<br>💾 Exported!';
        }
    </script>
</body>
</html>

🛠️ API Reference

Utility Methods

// Get track information
const info = editor.getTrackInfo(trackId);
console.log(info);
// {
//   id: "track_xxx",
//   name: "Track Name",
//   duration: 120.5,
//   sampleRate: 44100,
//   channels: 2,
//   volume: 0.8,
//   effects: 2
// }

// Get all tracks
const allTracks = editor.getAllTracksInfo();

// System information
const sysInfo = editor.getSystemInfo();

// Clear all tracks
editor.clearAllTracks();

// Suspend/Resume audio context
await editor.suspend();
await editor.resume();

// Close editor
await editor.close();

🎓 Tips & Best Practices

✅ DO's

✅ Always initialize editor before using
✅ Use try-catch for async operations
✅ Set appropriate buffer sizes for your use case
✅ Monitor system resources with getSystemInfo()
✅ Use quality presets wisely (high quality = larger files)

❌ DON'Ts

❌ Don't create more than 32 tracks (system limit)
❌ Don't forget to stop tracks before removing them
❌ Don't export without setting metadata
❌ Don't use very high effect parameters (can cause distortion)

🤝 Contributing

We welcome contributions! Please follow these steps:

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit changes (git commit -m 'Add AmazingFeature')
Push to branch (git push origin feature/AmazingFeature)
Open a Pull Request

📞 Support & Contact

💬 Get Help

📄 License

MIT License - feel free to use in your projects!

Copyright (c) 2025 Xbibz Official

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software...

🌟 Star us on GitHub if you find this useful!

Made with ❤️ by Xbibz Official

Version 1.0.0 | Report Bug | Request Feature