<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>O Ses Türkiye Simülatörü</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #111;
color: white;
text-align: center;
margin: 0;
padding: 20px;
overflow-x: hidden;
}
h1 {
color: #e50914;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 10px rgba(229, 9, 20, 0.5);
}
.jury-container {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 50px;
flex-wrap: wrap;
perspective: 1000px;
}
.chair {
width: 120px;
height: 160px;
background-color: #333;
border: 5px solid #555;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
position: relative;
}
.chair::after {
content: "O SES";
position: absolute;
bottom: 10px;
font-size: 0.8rem;
color: #888;
}
/* Jüri döndüğünde uygulanacak sınıf */
.chair.turned {
background-color: #e50914;
border-color: #ff3333;
transform: rotateY(180deg);
box-shadow: 0 0 30px rgba(229, 9, 20, 0.8);
}
.chair.turned .name,
.chair.selected .name {
transform: rotateY(180deg);
}
.chair.turned::after {
content: "SANA DÖNDÜ";
color: white;
transform: rotateY(180deg);
}
/* Jüri seçilebilir olduğunda */
.chair.choosable {
cursor: pointer;
animation: pulse 1.5s infinite;
}
.chair.choosable:hover {
transform: rotateY(180deg) scale(1.05);
border-color: #fff;
}
/* Kullanıcı jüriyi seçtiğinde */
.chair.selected {
background-color: #28a745;
border-color: #1e7e34;
transform: rotateY(180deg) scale(1.1);
box-shadow: 0 0 40px rgba(40, 167, 69, 0.9);
z-index: 10;
}
.chair.selected::after {
content: "TAKIMINDASIN";
color: white;
transform: rotateY(180deg);
font-size: 0.7rem;
}
/* Seçilmeyen jüriler kararır */
.chair.not-selected {
opacity: 0.4;
transform: rotateY(180deg) scale(0.9);
}
@keyframes pulse {
0% { box-shadow: 0 0 20px rgba(229, 9, 20, 0.6); }
50% { box-shadow: 0 0 40px rgba(229, 9, 20, 1); }
100% { box-shadow: 0 0 20px rgba(229, 9, 20, 0.6); }
}
.stage {
margin-top: 60px;
padding: 30px;
background: radial-gradient(circle, #2a2a2a 0%, #111 70%);
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 50px rgba(255, 255, 255, 0.1);
}
button {
background-color: #e50914;
color: white;
border: none;
padding: 15px 30px;
font-size: 1.2rem;
border-radius: 50px;
cursor: pointer;
font-weight: bold;
transition: 0.3s;
margin: 10px;
box-shadow: 0 5px 15px rgba(229, 9, 20, 0.4);
}
button:hover {
background-color: #ff1a1a;
transform: scale(1.05);
}
button:disabled {
background-color: #555;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
canvas {
display: block;
margin: 20px auto;
background-color: #000;
border-radius: 10px;
border: 2px solid #333;
}
#feedback {
margin-top: 30px;
font-size: 1.3rem;
min-height: 60px;
line-height: 1.5;
color: #ddd;
}
</style>
</head>
<body>
<h1>O Ses Simülatörü</h1>
<p>Mikrofon izni ver, sahnede şarkını söyle ve jürileri etkile!</p>
<div class="jury-container">
<div class="chair" id="jury1" data-name="Muro"><span class="name">Muro</span></div>
<div class="chair" id="jury2" data-name="Hado"><span class="name">Hado</span></div>
<div class="chair" id="jury3" data-name="Ebo"><span class="name">Ebo</span></div>
<div class="chair" id="jury4" data-name="Beyo"><span class="name">Beyo</span></div>
</div>
<div class="stage">
<canvas id="visualizer" width="300" height="100"></canvas>
<button id="startBtn">🎤 Şarkıya Başla</button>
<button id="stopBtn" disabled>⏹️ Performansı Bitir</button>
</div>
<div id="feedback">Sahnede yerini al ve şarkıya başla...</div>
<script>
let audioContext;
let analyser;
let microphone;
let animationId;
let isRecording = false;
// Ses seviyesi ölçümü için değişkenler
let totalVolume = 0;
let volumeChecks = 0;
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');
const feedback = document.getElementById('feedback');
const chairs = document.querySelectorAll('.chair');
// Mikrofonu başlat ve sesi görselleştir
async function startPerformance() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
audioContext = new (window.AudioContext || window.webkitAudioContext)();
analyser = audioContext.createAnalyser();
microphone = audioContext.createMediaStreamSource(stream);
microphone.connect(analyser);
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
isRecording = true;
totalVolume = 0;
volumeChecks = 0;
startBtn.disabled = true;
stopBtn.disabled = false;
feedback.innerHTML = "Harika söylüyorsun! Ses dalgaların ekranda...<br><em>Ne kadar güçlü söylersen dönme ihtimalleri o kadar artar!</em>";
// Jürileri ve tıklama olaylarını sıfırla
chairs.forEach(chair => {
chair.className = 'chair'; // Sadece chair sınıfı kalsın
chair.onclick = null;
});
function draw() {
if (!isRecording) return;
animationId = requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
const barWidth = (canvas.width / bufferLength) * 2.5;
let barHeight;
let x = 0;
let sumVolume = 0;
for (let i = 0; i < bufferLength; i++) {
barHeight = dataArray[i] / 2;
sumVolume += dataArray[i]; // Toplam sesi hesapla
ctx.fillStyle = `rgb(${barHeight + 100}, 20, 20)`;
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
x += barWidth + 1;
}
// Anlık sesin ortalamasını al ve performansa kaydet
let currentAvgVolume = sumVolume / bufferLength;
totalVolume += currentAvgVolume;
volumeChecks++;
}
draw();
} catch (err) {
alert("Mikrofonuna erişilemedi! Oyunu oynamak için mikrofon izni vermelisin.");
console.error(err);
}
}
// Performansı bitir ve jüri kararını hesapla
function stopPerformance() {
isRecording = false;
cancelAnimationFrame(animationId);
startBtn.disabled = false;
stopBtn.disabled = true;
if (audioContext) {
audioContext.close();
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
feedback.innerText = "Şarkı bitti... Jüriler düşünüyor...";
setTimeout(evaluatePerformance, 1500);
}
function evaluatePerformance() {
// Şarkı boyunca çıkan ortalama ses seviyesini hesapla
let averageSessionVolume = volumeChecks > 0 ? (totalVolume / volumeChecks) : 0;
// Eğer ortalama ses seviyesi 10'un altındaysa (sessizlik veya çok kısık ortam sesi)
let didSing = averageSessionVolume > 10;
let turnedCount = 0;
const turnedChairs = [];
chairs.forEach((chair, index) => {
let willTurn = false;
if (didSing) {
// Şarkı söylendiyse ses yüksekliğine göre dönme şansı hesapla (%40 taban + sese göre bonus)
let turnChance = 0.4 + (averageSessionVolume / 150);
willTurn = Math.random() < turnChance;
} else {
// Şarkı söylenmediyse dönme şansı %0
willTurn = false;
}
if (willTurn) {
setTimeout(() => {
chair.classList.add('turned');
turnedChairs.push(chair);
}, index * 500);
turnedCount++;
}
});
setTimeout(() => {
if (turnedCount > 1) {
feedback.innerHTML = `<strong>TEBRİKLER! ${turnedCount} JÜRİ BİRDEN DÖNDÜ!</strong><br> Şimdi dönen jürilerin üzerine tıklayarak <strong>takımını seç</strong>!`;
enableJurySelection(turnedChairs);
} else if (turnedCount === 1) {
feedback.innerHTML = `<strong>Tebrikler! ${turnedChairs[0].getAttribute('data-name')} sana döndü!</strong><br> Otomatik olarak onun takımına katıldın.`;
turnedChairs[0].classList.add('selected');
dimOtherChairs(turnedChairs[0]);
} else {
if (!didSing) {
feedback.innerHTML = "<strong>Hiç ses gelmedi!</strong><br> Şarkı söylemediğin için jüriler dönmedi. Biraz daha yüksek sesle tekrar dene.";
} else {
feedback.innerHTML = "<strong>Maalesef kimse dönmedi...</strong><br> Sesin duyuldu ama jürileri ikna edemedin. Pes etme, tekrar dene!";
}
}
}, 2500);
}
// Dönen jürileri tıklanabilir yap
function enableJurySelection(turnedChairs) {
turnedChairs.forEach(chair => {
chair.classList.add('choosable');
chair.onclick = function() {
// Seçim yapıldıktan sonra tüm tıklama olaylarını kaldır
chairs.forEach(c => c.onclick = null);
// Seçileni vurgula
this.classList.remove('choosable');
this.classList.add('selected');
dimOtherChairs(this);
let juriName = this.getAttribute('data-name');
feedback.innerHTML = `<strong>Mükemmel Seçim!</strong><br> Artık <strong>${juriName}</strong>'nun takımındasın! Şampiyonluğa giden yol açıldı!`;
};
});
}
// Seçilmeyen jürileri soluklaştır
function dimOtherChairs(selectedChair) {
chairs.forEach(c => {
if (c !== selectedChair) {
c.classList.remove('choosable');
if (c.classList.contains('turned')) {
c.classList.add('not-selected');
}
}
});
}
startBtn.addEventListener('click', startPerformance);
stopBtn.addEventListener('click', stopPerformance);
</script>
</body>
</html>
Selamlar şarkıya başla diyin mikrofonunuz ile kendiniz şarkınızı söyleyin jüri dönsün sizi seçsin geliştirmek size kalmış yapay zeka yapımıdır iyi forumlar
