VoxTransform - 50+ Pro Video Voice Effects
About this app
Transform your video voice with 50+ unique effects including Robot, Chipmunk, Deep Space, and more. Free online video voice changer.
VoxTransform - 50+ Pro Video Voice Effects VoxTransform Pro Voice Changer for Video Web Audio Powered Upload Video MP4, WEBM, or MOV files Upload New Play Mixed ✨ Select 50+ Effects VoxTransform © 2023. Real-time audio processing happens in your browser. Note: Effects are applied during live playback. Use screen recording or browser capture to save your creation. Effect Applied!
Put this on your site
Related apps
VoiceSong Studio - Créez votre propre hit !
Baccara Suite Master - Prédiction 1xBet & Casino
Elite Baccarat - Professional Casino Experience
YTPMV Scan - Ultimate Meme Sequencer
YTPMV Scan - Ultimate Audio Visual Sequencer
Pro-Roulette 0-14 Predictor | Advanced Strategic Analytics
Twelve - The Ultimate 12-Step Daily Harmony Planner
Otter Python - Calc Runner Game
Harmony - Гид по здоровым отношениям и романтике
LoopTube 2016 - Infinite Video Looper & Repeater
TinyTip | Simple Tip Calculator & Bill Splitter
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Source
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>VoxTransform - 50+ Pro Video Voice Effects</title>
<meta name="description" content="Transform your video voice with 50+ unique effects including Robot, Chipmunk, Deep Space, and more. Free online video voice changer.">
<meta name="keywords" content="voice changer, video effects, audio processor, web audio api, robot voice, pitch shifter, video editor">
<style>
/* Mobile-first base */
*, *::before, *::after { box-sizing: border-box; }
:root {
--primary: #6366f1;
--secondary: #ec4899;
--accent: #06b6d4;
--bg: #0f172a;
--card-bg: #1e293b;
--text: #f8fafc;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
background-color: var(--bg);
color: var(--text);
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
#main-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
min-height: 100dvh;
padding: 1rem;
padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
gap: 1.5rem;
}
header {
text-align: center;
padding: 1rem 0;
}
h1 {
margin: 0;
font-size: 2.2rem;
background: linear-gradient(to right, #818cf8, #f472b6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -1px;
}
.upload-zone {
border: 3px dashed #475569;
border-radius: 1.5rem;
padding: 2.5rem 1rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(30, 41, 59, 0.5);
position: relative;
}
.upload-zone:hover {
border-color: var(--primary);
background: rgba(99, 102, 241, 0.1);
}
.upload-zone input {
display: none;
}
.video-preview-container {
display: none; /* Hidden until video loaded */
flex-direction: column;
gap: 1rem;
background: var(--card-bg);
padding: 1rem;
border-radius: 1rem;
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
}
video {
width: 100%;
border-radius: 0.75rem;
background: #000;
max-height: 400px;
object-fit: contain;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
button {
padding: 0.75rem 1.25rem;
border-radius: 0.75rem;
border: none;
background: var(--primary);
color: white;
font-weight: 600;
cursor: pointer;
transition: transform 0.1s, opacity 0.2s;
touch-action: manipulation;
}
button:active {
transform: scale(0.95);
}
button.secondary {
background: var(--secondary);
}
.effects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 0.75rem;
margin-top: 1rem;
}
.effect-btn {
background: #334155;
border: 2px solid transparent;
padding: 0.75rem 0.5rem;
font-size: 0.85rem;
text-align: center;
border-radius: 0.75rem;
color: #cbd5e1;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
transition: all 0.2s ease;
}
.effect-btn i {
font-size: 1.4rem;
}
.effect-btn.active {
background: var(--primary);
color: white;
border-color: #818cf8;
box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
}
.status-badge {
font-size: 0.8rem;
background: rgba(255,255,255,0.1);
padding: 0.2rem 0.6rem;
border-radius: 1rem;
display: inline-block;
}
.loader {
width: 24px;
height: 24px;
border: 3px solid #fff;
border-bottom-color: transparent;
border-radius: 50%;
display: none;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive tweaks */
@media (max-width: 480px) {
.effects-grid {
grid-template-columns: repeat(3, 1fr);
}
h1 { font-size: 1.8rem; }
}
.section-title {
font-size: 1.1rem;
font-weight: 600;
margin-top: 1.5rem;
color: var(--accent);
display: flex;
align-items: center;
gap: 0.5rem;
}
.toast {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
padding: 0.75rem 1.5rem;
border-radius: 2rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 1000;
display: none;
animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translate(-50%, 20px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
</style>
<script type="text/javascript">
try {
let audioCtx;
let videoElement;
let sourceNode;
let biquadFilter;
let distortionNode;
let gainNode;
let reverbNode;
let currentEffect = 'Normal';
const effectsData = [
{ name: 'Normal', icon: '👤', settings: { type: 'normal' } },
{ name: 'Chipmunk', icon: '🐿️', settings: { pitch: 1.5 } },
{ name: 'Giant', icon: '👹', settings: { pitch: 0.7 } },
{ name: 'Robot', icon: '🤖', settings: { distortion: 50, filter: 'lowpass' } },
{ name: 'Radio', icon: '📻', settings: { filter: 'bandpass', freq: 1500 } },
{ name: 'Telephone', icon: '📞', settings: { filter: 'highpass', freq: 500 } },
{ name: 'Cave', icon: '🕳️', settings: { reverb: 0.8 } },
{ name: 'Space', icon: '🚀', settings: { reverb: 1.2, pitch: 0.9 } },
{ name: 'Underwater', icon: '🌊', settings: { filter: 'lowpass', freq: 400 } },
{ name: 'Alien', icon: '👽', settings: { mod: 20, pitch: 1.2 } },
{ name: 'Drunk', icon: '🥴', settings: { speed: 0.85 } },
{ name: 'Demon', icon: '😈', settings: { pitch: 0.5, distortion: 30 } },
{ name: 'High Voice', icon: '🎈', settings: { pitch: 1.8 } },
{ name: 'Slow Motion', icon: '🐢', settings: { speed: 0.5 } },
{ name: 'Fast Forward', icon: '🏃', settings: { speed: 1.7 } },
{ name: 'Megaphone', icon: '📢', settings: { distortion: 100, filter: 'highpass', freq: 800 } },
{ name: 'Grand Canyon', icon: '🏜️', settings: { delay: 0.5, reverb: 0.7 } },
{ name: 'Church', icon: '⛪', settings: { reverb: 0.6 } },
{ name: 'Stadium', icon: '🏟️', settings: { delay: 0.3, reverb: 0.5 } },
{ name: 'Bathroom', icon: '🛁', settings: { reverb: 0.4 } },
{ name: 'Nightmare', icon: '😱', settings: { pitch: 0.4, reverb: 0.9, distortion: 20 } },
{ name: 'Cartoon', icon: '🤡', settings: { pitch: 1.6, mod: 5 } },
{ name: 'Vibrato', icon: '📳', settings: { mod: 10 } },
{ name: 'Ghost', icon: '👻', settings: { reverb: 1.5, pitch: 1.1 } },
{ name: 'Nervous', icon: '😰', settings: { mod: 30, speed: 1.1 } },
{ name: 'Dinosaur', icon: '🦖', settings: { pitch: 0.3 } },
{ name: 'Fairy', icon: '🧚', settings: { pitch: 2.2, reverb: 0.5 } },
{ name: 'Cyborg', icon: '🦾', settings: { distortion: 80, mod: 15 } },
{ name: 'TV News', icon: '📺', settings: { filter: 'bandpass', freq: 1000 } },
{ name: 'Old Tape', icon: '📼', settings: { distortion: 10, filter: 'lowpass', freq: 2000 } },
{ name: 'Witch', icon: '🧙♀️', settings: { pitch: 1.3, mod: 8 } },
{ name: 'Satan', icon: '🔥', settings: { pitch: 0.2, distortion: 150 } },
{ name: 'Mosquito', icon: '🦟', settings: { pitch: 3.0, mod: 20 } },
{ name: 'Big Hall', icon: '🏛️', settings: { reverb: 1.0 } },
{ name: 'Bee', icon: '🐝', settings: { mod: 50, pitch: 1.5 } },
{ name: 'Ogre', icon: '👺', settings: { pitch: 0.6 } },
{ name: 'Small Room', icon: '📦', settings: { reverb: 0.1 } },
{ name: 'Tunnel', icon: '🚇', settings: { delay: 0.2, reverb: 0.6 } },
{ name: 'Mechanical', icon: '⚙️', settings: { distortion: 120, filter: 'lowpass' } },
{ name: 'Heroic', icon: '🛡️', settings: { pitch: 0.95, reverb: 0.3 } },
{ name: 'Tiny', icon: '🐭', settings: { pitch: 2.5 } },
{ name: 'Walkie-Talkie', icon: '📻', settings: { distortion: 40, filter: 'bandpass', freq: 1200 } },
{ name: 'Distant', icon: '🌫️', settings: { filter: 'lowpass', freq: 800, gain: 0.5 } },
{ name: 'Crunchy', icon: '🍪', settings: { distortion: 200 } },
{ name: 'Cyberpunk', icon: '🌃', settings: { reverb: 0.5, distortion: 15, pitch: 0.8 } },
{ name: 'Dreamy', icon: '✨', settings: { reverb: 1.5, pitch: 1.05 } },
{ name: 'Hollow', icon: '🕳️', settings: { filter: 'notch', freq: 1000 } },
{ name: 'Submarine', icon: '🚢', settings: { filter: 'lowpass', freq: 500, mod: 2 } },
{ name: 'Interstellar', icon: '🌌', settings: { reverb: 2.0, speed: 0.9 } },
{ name: 'Retro Gaming', icon: '🎮', settings: { distortion: 300, filter: 'lowpass', freq: 3000 } }
];
document.addEventListener("DOMContentLoaded", function() {
const videoInput = document.getElementById('videoInput');
const uploadZone = document.getElementById('uploadZone');
videoElement = document.getElementById('videoPreview');
const grid = document.getElementById('effectsGrid');
// Generate Effects Grid
effectsData.forEach(fx => {
const btn = document.createElement('div');
btn.className = 'effect-btn';
btn.innerHTML = `<span>${fx.icon}</span><span>${fx.name}</span>`;
btn.onclick = () => applyEffect(fx);
grid.appendChild(btn);
});
uploadZone.onclick = () => videoInput.click();
videoInput.onchange = (e) => {
const file = e.target.files[0];
if (file) {
const url = URL.createObjectURL(file);
videoElement.src = url;
videoElement.parentElement.style.display = 'flex';
uploadZone.style.display = 'none';
initAudio();
}
};
videoElement.onplay = () => {
if (audioCtx && audioCtx.state === 'suspended') {
audioCtx.resume();
}
};
});
function initAudio() {
if (audioCtx) return;
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
sourceNode = audioCtx.createMediaElementSource(videoElement);
biquadFilter = audioCtx.createBiquadFilter();
distortionNode = audioCtx.createWaveShaper();
reverbNode = audioCtx.createConvolver();
gainNode = audioCtx.createGain();
// Wire them up: source -> filter -> distortion -> gain -> destination
sourceNode.connect(biquadFilter);
biquadFilter.connect(distortionNode);
distortionNode.connect(gainNode);
gainNode.connect(audioCtx.destination);
}
function makeDistortionCurve(amount) {
const k = typeof amount === 'number' ? amount : 50;
const n_samples = 44100;
const curve = new Float32Array(n_samples);
const deg = Math.PI / 180;
for (let i = 0 ; i < n_samples; ++i ) {
const x = i * 2 / n_samples - 1;
curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
}
return curve;
}
function applyEffect(fx) {
if (!audioCtx) return;
// Clean state
videoElement.playbackRate = 1.0;
videoElement.preservesPitch = false;
biquadFilter.type = 'allpass';
distortionNode.curve = null;
gainNode.gain.value = 1.0;
const s = fx.settings;
// High-level Pitch / Speed
if (s.pitch) {
videoElement.playbackRate = s.pitch;
}
if (s.speed) {
videoElement.playbackRate = s.speed;
videoElement.preservesPitch = true; // Modern browsers
}
// Filters
if (s.filter) {
biquadFilter.type = s.filter;
biquadFilter.frequency.setValueAtTime(s.freq || 1000, audioCtx.currentTime);
}
// Distortion
if (s.distortion) {
distortionNode.curve = makeDistortionCurve(s.distortion);
}
// Gain
if (s.gain) {
gainNode.gain.value = s.gain;
}
// UI Update
document.querySelectorAll('.effect-btn').forEach(b => b.classList.remove('active'));
const clicked = Array.from(document.querySelectorAll('.effect-btn')).find(b => b.innerText.includes(fx.name));
if (clicked) clicked.classList.add('active');
showToast(`Applied: ${fx.name}`);
}
function showToast(msg) {
const toast = document.getElementById('toast');
toast.innerText = msg;
toast.style.display = 'block';
setTimeout(() => {
toast.style.display = 'none';
}, 2000);
}
function resetVideo() {
location.reload();
}
} catch (error) {
console.error(error);
}
</script>
</head>
<body>
<div id="main-container">
<header>
<h1>VoxTransform</h1>
<p>Pro Voice Changer for Video</p>
<div class="status-badge">Web Audio Powered</div>
</header>
<!-- Upload Zone -->
<div id="uploadZone" class="upload-zone">
<svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--primary); margin-bottom: 1rem;">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="17 8 12 3 7 8"></polyline>
<line x1="12" y1="3" x2="12" y2="15"></line>
</svg>
<h3>Upload Video</h3>
<p>MP4, WEBM, or MOV files</p>
<input type="file" id="videoInput" accept="video/*">
</div>
<!-- Editor Preview -->
<div id="editorArea" class="video-preview-container">
<video id="videoPreview" controls crossorigin="anonymous"></video>
<div class="controls">
<button class="secondary" onclick="resetVideo()">Upload New</button>
<button onclick="document.getElementById('videoPreview').play()">Play Mixed</button>
</div>
<div class="section-title">
<span>✨</span> Select 50+ Effects
</div>
<div id="effectsGrid" class="effects-grid">
<!-- Javascript populates this -->
</div>
</div>
<footer style="text-align: center; margin-top: 2rem; font-size: 0.8rem; color: #64748b; padding: 2rem;">
<p>VoxTransform © 2023. Real-time audio processing happens in your browser.</p>
<p>Note: Effects are applied during live playback. Use screen recording or browser capture to save your creation.</p>
</footer>
</div>
<div id="toast" class="toast">Effect Applied!</div>
</body>
</html>
NEW APPS
These are apps made by the community!