DEV Community: Kaleem Ullah

How I’m Improving a Local Service Website for SEO, AEO & GEO

Kaleem Ullah — Sat, 22 Aug 2026 01:13:24 +0000

I’ve been working on improving a local pressure washing website in Jacksonville, FL, and I’ve been focusing on more than just traditional SEO.

Some of the areas I’m working on:

Improving image implementation and consistency across the site
Better semantic HTML and page structure
Internal linking and contextual relevance
Structured data/schema
Making service and location information easier for search engines and LLMs to understand
Improving Core Web Vitals and overall performance
Strengthening entity relationships and local relevance
Making content more useful for both traditional search and AI-powered search

The interesting part is that optimizing for Google and optimizing for AI systems aren't necessarily the same thing. I’m trying to build the site so that the business, services, locations, and relationships are extremely clear to machines—not just humans.

Website: https://pressurecleaningjacksonvillefl.com/

I’d be interested in hearing from other developers/SEOs:

What technical changes have you found most effective for improving visibility in AI search/LLM answers while still maintaining strong traditional SEO?

Building a Real-Time Pitch Shifter with the Web Audio API

Kaleem Ullah — Tue, 18 Aug 2026 08:15:55 +0000

Building a Real-Time Pitch Shifter with the Web Audio API

Introduction

Pitch shifting is one of the most requested audio effects—musicians use it to change the key of a song without affecting tempo, and content creators use it for voice modulation.

I built SonicLab's Voice Pitch Shifter to do exactly that, entirely in the browser. In this post, I'll explain how it works, the challenges I faced, and how you can build one too.

The Approach: Granular Pitch Shifting
The granular approach works like this:

Split the audio into tiny overlapping grains (e.g., 10–50 ms)
Stretch or compress the grains in time
Resample the grains to change pitch
Crossfade the grains to avoid artifacts

Here's a simplified implementation:

class PitchShifterEngine {
  constructor(audioContext) {
    this.ctx = audioContext;
    this.grainSize = 0.1; // 100ms grains
    this.overlap = 0.5;    // 50% overlap
  }

  async shiftPitch(audioBuffer, semitones) {
    const pitchRatio = Math.pow(2, semitones / 12);
    const sampleRate = audioBuffer.sampleRate;
    const channelData = audioBuffer.getChannelData(0); // Mono for simplicity

    // Calculate grain parameters
    const grainLength = Math.floor(this.grainSize * sampleRate);
    const hopSize = Math.floor(grainLength * (1 - this.overlap));
    const outputLength = Math.floor(channelData.length / pitchRatio);

    // Create output buffer
    const outputData = new Float32Array(outputLength);

    // Granular processing loop
    let readIndex = 0;
    let writeIndex = 0;

    while (readIndex < channelData.length - grainLength && writeIndex < outputLength) {
      // Extract a grain
      const grain = channelData.slice(readIndex, readIndex + grainLength);

      // Apply window (Hanning window to reduce artifacts)
      const windowedGrain = applyWindow(grain);

      // Resample the grain (pitch shift)
      const resampledGrain = resampleAudio(windowedGrain, pitchRatio);

      // Add to output with crossfade
      for (let i = 0; i < resampledGrain.length && writeIndex + i < outputLength; i++) {
        outputData[writeIndex + i] += resampledGrain[i] * getCrossfadeFactor(i, resampledGrain.length);
      }

      // Move forward
      readIndex += hopSize * pitchRatio;
      writeIndex += hopSize;
    }

    // Create a new AudioBuffer from the output
    const outputBuffer = this.ctx.createBuffer(1, outputData.length, sampleRate);
    outputBuffer.copyToChannel(outputData, 0);
    return outputBuffer;
  }

  // Resample audio (change pitch)
  resampleAudio(data, ratio) {
    const outputLength = Math.floor(data.length / ratio);
    const output = new Float32Array(outputLength);

    for (let i = 0; i < outputLength; i++) {
      const srcIndex = i * ratio;
      const srcIndexFloor = Math.floor(srcIndex);
      const srcIndexCeil = Math.min(srcIndexFloor + 1, data.length - 1);
      const fraction = srcIndex - srcIndexFloor;

      // Linear interpolation
      output[i] = data[srcIndexFloor] * (1 - fraction) + data[srcIndexCeil] * fraction;
    }
    return output;
  }

  // Apply Hanning window
  applyWindow(data) {
    const output = new Float32Array(data.length);
    for (let i = 0; i < data.length; i++) {
      const windowValue = 0.5 * (1 - Math.cos((2 * Math.PI * i) / (data.length - 1)));
      output[i] = data[i] * windowValue;
    }
    return output;
  }
}

Alternative Approach: Using an AudioWorklet

For production use, I moved the processing to an AudioWorklet for better performance and lower latency:

// pitch-shifter-worklet.js
class PitchShifterWorklet extends AudioWorkletProcessor {
  constructor() {
    super();
    this.grainSize = 0.1;
    this.overlap = 0.5;
    this.pitchRatio = 1.0;
    this.buffer = [];
  }

  process(inputs, outputs) {
    const input = inputs[0];
    const output = outputs[0];

    if (input.length === 0) return true;

    // Process audio in real-time
    const inputData = input[0];
    // ... granular processing logic

    return true;
  }
}

The User Experience

The user interface is simple but effective:

Semitone slider — from -12 to +12 semitones
Real-time preview — hear changes instantly
Format support — MP3, WAV, FLAC, M4A, AAC, OGG
Download — export the shifted audio

<div className="pitch-controls">
  <label>
    Pitch Shift: {semitoneValue} semitones
    <input
      type="range"
      min="-12"
      max="12"
      value={semitoneValue}
      onChange={(e) => handlePitchChange(parseFloat(e.target.value))}
    />
  </label>
  <button onClick={playPreview}>▶ Preview</button>
  <button onClick={downloadAudio}>⬇ Download</button>
</div>

Real-World Usage

Since launching the pitch shifter, I've seen it used for:

Music production — changing the key of samples
Voice modulation — creating character voices
Language learning — adjusting speech speed without pitch change
Content creation — adding vocal effects to videos

Try It Yourself

You can test the live pitch shifter here: SonicLab Voice Pitch Shifter

Building a 10-Band Equalizer with the Web Audio API

Kaleem Ullah — Tue, 18 Aug 2026 08:06:34 +0000

Introduction

A few weeks ago, I set out to build a fully functional 10-band audio equalizer that runs entirely in the browser—no server uploads, no signups, just pure client-side audio processing.

The result is SonicLab's Equalizer, a free online tool that lets users boost or cut specific frequency ranges in real-time.

In this post, I'll walk through how I built it using the Web Audio API's BiquadFilterNode, and share some lessons learned along the way.

Why Build a Browser-Based Equalizer?

Most online audio tools require uploading files to a server, which raises privacy concerns and adds latency. By processing audio entirely in the browser using the Web Audio API, we can:

Keep user data private — audio never leaves the device

Provide real-time preview — users hear changes instantly

Eliminate server costs — all processing is client-side

Support offline usage — no internet connection required after the page loads

The Core Technology: BiquadFilterNode

The Web Audio API provides a BiquadFilterNode that implements various filter types. For an equalizer, we use the peaking filter type, which boosts or cuts a specific frequency range.

// Create a filter node for a specific frequency band
const createFilter = (audioContext, frequency, gain, Q) => {
  const filter = audioContext.createBiquadFilter();
  filter.type = 'peaking';
  filter.frequency.value = frequency;  // e.g., 32Hz, 64Hz, 125Hz...
  filter.gain.value = gain;            // -12dB to +12dB
  filter.Q.value = Q || 1.0;           // Bandwidth control
  return filter;
};

The 10 Frequency Bands

A 10-band equalizer typically covers the audible spectrum with these center frequencies:

Band Frequency Typical Use
1 32 Hz Sub-bass
2 64 Hz Bass
3 125 Hz Low-mid
4 250 Hz Mid-low
5 500 Hz Mid
6 1 kHz Upper-mid
7 2 kHz Presence
8 4 kHz High-mid
9 8 kHz Brilliance
10 16 kHz Air
Wiring It Together
The signal flow is straightforward:

AudioBufferSourceNode ↓ BiquadFilterNode (32Hz) ↓ BiquadFilterNode (64Hz) ↓ ... (all 10 filters in series) ↓ AudioDestinationNode (speakers/headphones)

Here's the simplified implementation:

class EqualizerEngine {
  constructor(audioContext) {
    this.ctx = audioContext;
    this.filters = [];
    this.source = null;
  }

  // Create all 10 filters and connect them in series
  setupFilters(frequencies, gains) {
    // Create the filter chain
    let previousNode = null;

    frequencies.forEach((freq, index) => {
      const filter = this.ctx.createBiquadFilter();
      filter.type = 'peaking';
      filter.frequency.value = freq;
      filter.gain.value = gains[index] || 0;
      filter.Q.value = 1.0;

      this.filters.push(filter);

      if (previousNode) {
        previousNode.connect(filter);
      }
      previousNode = filter;
    });

    return this.filters[0]; // Return the first filter (input)
  }

  // Apply EQ to an audio buffer
  async applyEQ(audioBuffer, gains) {
    const frequencies = [32, 64, 125, 250, 500, 1000, 2000, 4000, 8000, 16000];
    const firstFilter = this.setupFilters(frequencies, gains);

    // Connect the last filter to the destination
    const lastFilter = this.filters[this.filters.length - 1];
    lastFilter.connect(this.ctx.destination);

    // Create and start the source
    this.source = this.ctx.createBufferSource();
    this.source.buffer = audioBuffer;
    this.source.connect(firstFilter);
    this.source.start(0);

    return this.source;
  }

  // Clean up
  dispose() {
    this.filters.forEach(filter => filter.disconnect());
    this.filters = [];
    if (this.source) {
      this.source.stop();
      this.source.disconnect();
      this.source = null;
    }
  }
}

Real-Time Preview vs. Offline Processing

One challenge was handling both real-time preview (for immediate feedback) and offline rendering (for export).

For preview, I use a standard AudioContext:

javascript

const ctx = new (window.AudioContext || window.webkitAudioContext)();

For export, I use OfflineAudioContext, which renders the audio faster than real-time:

const offlineCtx = new OfflineAudioContext(
  2,                              // Stereo
  audioBuffer.length,             // Same duration
  audioBuffer.sampleRate          // Same sample rate
);

The UI Challenge: Responsive Sliders
With 10 frequency bands, the UI needs to be both compact and usable. I used a horizontal layout with sliders, where each slider's position visually represents the gain value.

<div className="equalizer-bands">
  {frequencies.map((freq, index) => (
    <div key={freq} className="band">
      <input
        type="range"
        min="-12"
        max="12"
        value={gains[index]}
        step="0.5"
        onChange={(e) => handleGainChange(index, parseFloat(e.target.value))}
        className="eq-slider"
        style={{
          transform: `rotate(-90deg)`,
          height: '150px'
        }}
      />
      <span className="frequency-label">{freq}Hz</span>
    </div>
  ))}
</div>

Performance Considerations

A 10-band equalizer processes audio in real-time, so performance is critical. Here are a few optimizations I applied:

Use AudioWorklet for heavy processing — but for a 10-band EQ, BiquadFilterNode is efficient enough.

Limit the number of concurrent AudioContexts — only one context at a time.

Disconnect nodes when not in use — prevents memory leaks.

Use OfflineAudioContext for exports — faster than real-time.

Lessons Learned

The Q factor matters — A Q value of 1.0 provides a smooth, musical EQ curve. Lower values create wider bands, higher values create narrower, more surgical cuts/boosts.

User expectations — Most users expect visual feedback. Adding a waveform display or spectrum analyzer significantly improves the experience.

Headphone warning — Like with 8D audio, equalizer effects are more noticeable on headphones. A gentle reminder helps set expectations.

Try It Yourself

You can test the live equalizer here: SonicLab Equalizer

Have you built an audio tool with the Web Audio API? I'd love to hear about your experience in the comments!

How to Raise Your Vocal Pitch with AI (Free Browser-Based Tool)

Kaleem Ullah — Sat, 25 Jul 2026 20:13:10 +0000

If you've ever recorded your voice and realized it sounds a little too low, you don't necessarily need expensive software like Adobe Audition, FL Studio, or Logic Pro.

Modern browser technology makes it possible to shift vocal pitch directly in your browser without uploading your files to a server.

I recently built a browser-based Voice Pitch Shifter that lets you:

Raise or lower vocal pitch
Shift by semitones
Preview changes instantly
Process everything locally
Keep your audio private

Unlike many online tools, your audio never leaves your computer.

Why raise vocal pitch?

Some common use cases:

Singing in a more comfortable key
Creating higher vocal harmonies
Karaoke practice
Music production
Podcast editing
Content creation
Voice experimentation

Browser-based audio processing

One challenge was making everything run entirely inside the browser using the Web Audio API.

That means:

No uploads
No waiting for servers
Better privacy
Faster processing
Works on desktop and mobile

Technologies used

Next.js
TypeScript
Web Audio API
OfflineAudioContext
React
Vercel

Try it yourself

🎵 Voice Pitch Shifter

I'd love feedback from developers and audio enthusiasts.

Suggestions and ideas are always welcome!``

How I Built My First AI Tools Website with Next.js: Lessons Learned

Kaleem Ullah — Fri, 26 Jun 2026 20:54:40 +0000

If you're thinking about building your own AI tools website, there's never been a better time to start. With the rapid growth of open-source models, modern web frameworks, and AI APIs, individual developers can now create products that were once only possible for large companies.

Over the past few months, I've been working on building an AI tools platform using Next.js. My goal wasn't just to create another AI website—it was to build a fast, scalable platform that provides genuinely useful tools while following modern development and SEO best practices.

In this article, I'll share what I've learned during the journey.

Why I Chose Next.js

When selecting a framework, I wanted something that could handle both performance and search engine optimization.

Next.js offered several advantages:

Server-side rendering (SSR)
Static site generation (SSG)
Excellent SEO support
Fast routing
Great developer experience
Easy deployment on platforms like Vercel

These features make it a strong choice for AI applications where speed and discoverability matter.

Project Structure

Instead of placing everything in one large project, I organized the application into reusable components.

My project includes:

Reusable UI components
API routes
Individual tool pages
Blog system
SEO metadata
Responsive layouts

Keeping the code modular has made it much easier to maintain as the number of tools continues to grow.

Performance Matters

AI applications often feel slow because the model itself takes time to generate responses.

To improve the user experience, I focused on:

Loading states
Skeleton components
Optimized images
Lazy loading
Code splitting
Efficient API calls

Even when AI processing takes a few seconds, users feel more comfortable when the interface provides clear feedback.

SEO Is More Than Keywords

Many developers build amazing applications but ignore SEO until after launch.

I decided to integrate SEO from the beginning.

Some of the optimizations include:

Clean URLs
Unique page titles
Meta descriptions
Open Graph tags
Structured headings
Internal linking
Sitemap generation
Robots.txt
Optimized images

These improvements help search engines understand the website while creating a better experience for users.

Building Useful AI Tools

One lesson I learned quickly is that users don't care which AI model powers your application.

They care about solving a problem.

Instead of trying to build everything, I focused on creating tools that save users time and improve productivity.

Whenever I evaluate a new idea, I ask:

Does this tool solve a real problem?

If the answer is yes, it's worth building.

Challenges Along the Way

Every project comes with obstacles.

Some of the biggest challenges I encountered were:

Managing API costs
Designing intuitive user interfaces
Optimizing performance
Handling AI response delays
Keeping the codebase organized
Planning long-term scalability

Each challenge taught me something that improved the project.

What I'm Learning Next

My roadmap includes learning more about:

Machine Learning
Deep Learning
Prompt Engineering
AI Agents
Vector Databases
Retrieval-Augmented Generation (RAG)
Advanced Next.js patterns

The AI ecosystem evolves quickly, so continuous learning is essential.

Final Thoughts

Building AI applications has been one of the most rewarding experiences of my development journey.

You don't need a huge team or massive funding to create something valuable. Start with a single useful idea, build it well, gather feedback, and improve it over time.

If you're also building AI projects, I'd love to hear about your experience. Feel free to share what you're working on in the comments.

Happy coding! 🚀