Whispers of the Web

Abstract

A haunted web experience where whispers follow you, and the ghosts in the code want to play.

️ Whispers Of The Web

Immersive Horror Experience — Hear The Presence Before It Finds You

Why We Made This Project

We wanted to explore how technology can evoke raw emotion through sound, light, and interaction. Halloween is the perfect season to experiment with fear as a medium, and we asked ourselves:

What if the web could whisper back?

“Whispers of the Web” is a browser-based psychological horror experience that combines:

3D positional audio (to simulate whispers behind you),
ambient visuals, and
interactive storytelling that reacts to what you type and hear.

It’s a blend of art, sound design, and code — meant to show that fear can be generated with nothing but the web itself.

How It Works

When the player starts, the game:

Enters full-screen dark mode.
Begins whispering sounds from random directions (using Web Audio API panning).
Prompts the player to “type what you hear.”
Ends with a sudden, creepy visual and sound cue if the player fails — or a cryptic message if they succeed.

Everything runs entirely in the browser — no installs or backend processing required.

️ Tech Stack

Component	Technology Used
Frontend	HTML, CSS, JavaScript
Audio	Web Audio API (spatial panning + gain control)
Hosting	Vercel
Assets	Custom whispers recorded + processed in Audacity
Optional Backend	Node.js (for logging or user tracking if enabled)

Steps to Recreate “Whispers Of The Web”

Follow these steps to build your own version of the experience.

1. Clone or Create the Folder

or create a new directory manually:

2. Add the Game Script

Add this inside your main JavaScript file (e.g. script.js):

function startCreepyGame() {
  const game = document.createElement("div");
  game.id = "whisper-game";
  game.innerHTML = `
    <div id="game-overlay">
      <div class="game-instructions">Don't look away. Type what you hear...</div>
      <input id="game-input" type="text" placeholder="_ _ _" autofocus />
    </div>
  `;
  document.body.appendChild(game);
  document.documentElement.requestFullscreen().catch(() => {});
  document.body.style.overflow = "hidden";

  const whispers = [
    "audio/game_whisper1.mp3",
    "audio/game_whisper2.mp3",
    "audio/game_whisper3.mp3",
    "audio/game_whisper4.mp3",
  ];
  let index = 0;

  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  const gain = audioCtx.createGain();
  gain.gain.value = 1.0;
  gain.connect(audioCtx.destination);

  function playNextWhisper() {
    if (index >= whispers.length) return endGame();
    fetch(whispers[index])
      .then((r) => r.arrayBuffer())
      .then((b) => audioCtx.decodeAudioData(b))
      .then((decoded) => {
        const src = audioCtx.createBufferSource();
        src.buffer = decoded;
        const panner = audioCtx.createPanner();
        panner.panningModel = "HRTF";
        panner.setPosition(Math.random() < 0.5 ? -1 : 1, 0, 2);
        src.connect(panner).connect(gain);
        src.start();
      });
    index++;
    setTimeout(playNextWhisper, 8000);
  }

  playNextWhisper();

  const input = document.getElementById("game-input");
  input.addEventListener("input", () => {
    if (input.value.toLowerCase().includes("presence")) endGame(true);
  });

  function endGame(success) {
    const end = document.createElement("div");
    end.className = "end-message";
    end.textContent = success
      ? "The presence retreats... for now."
      : "It lingers behind you.";
    game.appendChild(end);

    //  Jump scare image
    const scare = document.createElement("img");
    scare.src = "images/scare.png"; // Add your scary image here
    scare.className = "scare-popup";
    setTimeout(() => game.appendChild(scare), 7000);

    setTimeout(() => {
      document.exitFullscreen().catch(() => {});
      document.body.style.overflow = "";
      game.remove();
      window.location.reload();
    }, 9000);
  }
}

3. Style It (CSS)

#whisper-game {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, #000000 70%, #210000);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: crimson;
  z-index: 999999;
  text-shadow: 0 0 20px red;
  animation: fadeIn 2s ease;
}

.scare-popup {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: jumpIn 0.2s ease;
}

@keyframes jumpIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1.1); opacity: 1; }
}

4. Add Your Audio and Image Files

Place your audio in the /audio folder and your jump scare image in /images/scare.png.

For extra realism, record whispers yourself or use AI-generated soundscapes processed with reverb and low-pass filters.

5. Run Locally

Just open index.html in your browser — no server required.

Or start a simple local server:

Then visit http://localhost:3000.

6. Deploy to Vercel

Choose your project folder, and it will go live instantly.

️ What’s Next

Multiplayer “presence mode” — players in different rooms hear each other’s whispers.
Mobile vibration feedback (using the Vibration API).
Procedural whisper generation via AI.

Media

Demo video
️ Screenshots of the gameplay and scare moment

Category : project