Calculator Tools Calculator Tools
Create

Voice Changer

Jan 6, 2024

About this app

Change your voice in real time with this fun voice changer app.

Voice Changer Voice Changer Select Voice: Normal Deep High Microphone Input: Start Stop Speaker Output:

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Voice Changer</title>
<meta name="description" content="Change your voice in real time with this fun voice changer app.">
<meta name="keywords" content="voice changer, real-time, app">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
document.addEventListener("DOMContentLoaded", function() {
const audioContext = new window.AudioContext();
const audioInput = document.getElementById('audioInput');
const audioOutput = document.getElementById('audioOutput');
const playButton = document.getElementById('playButton');
const stopButton = document.getElementById('stopButton');
const voiceSelect = document.getElementById('voiceSelect');

let mediaRecorder;
let audioStream;

// Check if getUserMedia is supported
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(function(stream) {
audioStream = stream;
const mediaStreamSource = audioContext.createMediaStreamSource(stream);
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.addEventListener('dataavailable', function(e) {
audioOutput.src = URL.createObjectURL(e.data);
});
mediaRecorder.addEventListener('stop', function() {
audioStream.getTracks().forEach(function(track) {
track.stop();
});
});
mediaStreamSource.connect(audioContext.destination);
})
.catch(function() {
alert('Error: Could not access microphone');
});
} else {
alert('Error: getUserMedia is not supported on this browser');
}

playButton.addEventListener('click', function() {
mediaRecorder.start();
playButton.disabled = true;
stopButton.disabled = false;
});

stopButton.addEventListener('click', function() {
mediaRecorder.stop();
playButton.disabled = false;
stopButton.disabled = true;
});

voiceSelect.addEventListener('change', function() {
const selectedVoice = voiceSelect.value;
const options = audioContext.createBiquadFilter();
options.type = 'allpass';
options.frequency.value = 1000;
options.gain.value = 0;
options.Q.value = 0;
options.detune.value = selectedVoice;
audioInput.connect(options);
options.connect(audioContext.destination);
});
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f8f9fa;
}

.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
text-align: center;
}

h1 {
font-size: 24px;
margin-bottom: 20px;
}

.form-group {
margin-bottom: 20px;
}

.form-label {
display: block;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}

.form-control {
width: 100%;
padding: 10px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ccc;
}

.btn {
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
border: none;
color: #fff;
background-color: #007bff;
cursor: pointer;
}

.btn:disabled {
background-color: #ccc;
cursor: not-allowed;
}

audio {
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Voice Changer</h1>
<div class="form-group">
<label for="voiceSelect" class="form-label">Select Voice:</label>
<select id="voiceSelect" class="form-control">
<option value="0">Normal</option>
<option value="100">Deep</option>
<option value="-100">High</option>
</select>
</div>
<div class="form-group">
<label for="audioInput" class="form-label">Microphone Input:</label>
<audio id="audioInput" controls></audio>
</div>
<div class="form-group">
<button id="playButton" class="btn">Start</button>
<button id="stopButton" class="btn" disabled>Stop</button>
</div>
<div class="form-group">
<label for="audioOutput" class="form-label">Speaker Output:</label>
<audio id="audioOutput" controls></audio>
</div>
</div>
</body>
</html>