DEV Community: Louis Austke

Local Text-to-Speech is finally practical on CPU-only machines

Louis Austke — Fri, 23 Jan 2026 04:15:57 +0000

Until recently, getting natural-sounding text-to-speech usually meant using a hosted service. If you wanted good quality, you ended up calling an API from Amazon, Microsoft, or Google. That works, but it means relying on a remote service and paying per use for a task that doesn't inherently need to be remote.

There are now models that run fast enough on a regular CPU to be useful in practice. They don't need a GPU, and the audio quality is comparable to what you get from common cloud TTS services. Everything runs locally, without relying on third-party APIs.This aligns well with the expectations of privacy-oriented users.

I wanted to make local, CPU-only text-to-speech conversion usable without requiring people to understand or assemble the underlying tooling, so I built a simple GUI converter that can convert long texts to speech in a matter of minutes.

It supports basic desktop workflows like drag and drop, which makes it more convenient than uploading text to a service and downloading the generated audio files. You can drop in text files, run batch conversions, and get audio files out, all locally.

This is what the main conversion tab looks like while a conversion is running. The focus is on keeping the workflow simple and local: drop text files, process them in batches, and get audio files out without external services.

Here's what the main conversion tab looks like while a conversion is running.

The application is free and runs entirely offline. Project details and downloads are available at https://jimlet.com

This project exists because CPU-only text-to-speech is finally fast enough to be useful. That makes it practical to build local tools that don't rely on cloud APIs or specialized hardware, and to keep them simple and self-contained.

I created a video tutorial on how to make a responsive sidebar using CSS and vanilla Javascript

Louis Austke — Thu, 24 Oct 2024 22:58:55 +0000

Part One: Building a Responsive Drawer

Part Two: Building a Vertical Navigation Menu

I coded a vertical, two-level, responsive navigation sidebar from scratch using vanilla JavaScript and CSS, without frameworks, preprocessors, or any build/compilation process, and described the process in detail in two YouTube tutorials.

This sidebar can be used as the foundation for a simple website or web application.

A one-stop comparison of several synthetic and human voices

Louis Austke — Sun, 11 Feb 2024 21:36:08 +0000

For the impatient: Go to the Voice Comparison Page to test the voices right away.

It's no secret that text-to-speech technology has made significant advancements recently, with voices now sounding almost as natural as human voices. Major giants in the field include Google, Amazon, and Microsoft, alongside smaller companies like ElevenLabs, which boasts of providing the most hyper-realistic voice generator on the market. Actually, the spectrum of these smaller companies is so diverse that making a direct comparison and deciding for yourself which voice is better becomes difficult.

Usually, the voice example page is deeply embedded within the documentation of a text-to-speech API, requiring you to navigate between several sites and generate speech for various text snippets to form your judgment. So, to simplify the comparison process, I collected all of them on one page. I compiled a set of text snippets that imitate commonly used topics for voiceovers and created audio files where these texts are read by all the voices.

Highlighting words

I wanted the words to be karaoke-style highlighted while the text is spoken. First of all, this is visually pleasing, and it makes the text much easier to follow. So, for every audio file, I created a speech mark file that contains a list of pairs, each consisting of a word and the time when its pronunciation starts.

Microsoft, Amazon Polly, and Google provide this functionality. It is referred to differently - marks, speech marks, or subtitles. Essentially, alongside the events when audio is generated, there are other events like 'WordBoundary' that include supplementary information, such as the starting time.

I have a 'highlightWord' function that highlights the word in the textbox. When the audio player starts playing the speech file, this function is scheduled to run multiple times, each at the starting time when a specific word is pronounced.

audioPlayer.onplay = function () {
    ...
    scheduledHighlightWordIDs = []
    for (const { word, offset } of speechMarks) {
        const timeoutId = setTimeout(function () {
            highlightWord(word)
        }, offset)
        scheduledHighlightWordIDs.push(timeoutId)
    }
}

I keep the timeout IDs so that I can unschedule the function, for example, when playing is interrupted.

Pre-fetching audio

Another problem I faced was the desynchronization of speech and highlighting when I provided a URL for the MP3 file to the Audio Player. Apparently, depending on the user's connection speed, it takes a while to download and start playing the file, but the highlighting functions are scheduled immediately. The Audio Player has an option to notify the user when it has downloaded a sufficient portion of the audio content to start playing, but this was not good enough for me. I wanted to make sure that the entire file was downloaded before getting started. So, I pre-fetched the audio content into a blob, created a URL that represents the blob object in memory, and passed it to the Audio Player.

try {
        const response = await fetch(audioUrl)
        blob = await response.blob()
} catch (error) {
    console.log(`Cannot fetch url: ${audioUrl}`)
}

const audioObjectUrl = URL.createObjectURL(blob)

const audioPlayer = new Audio(audioObjectUrl)

Adding real human voices

Eventually, I thought, why stop here? So, I added recordings from actual voiceover artists to the comparison. Now, you can compare synthesized voices with real human voices to get a firsthand feel for the current state of text-to-speech technology.

This is the link to the page: Compare Voices.

Now, it's your turn to weigh in. Which synthetic voice do you find the most realistic? In a blind test, would you be able to tell AI-generated voices apart from those of actual voiceover artists?

Ramblings on HTML Page Structure and Bootstrap

Louis Austke — Sat, 06 Jan 2024 15:32:06 +0000

When people talk about the Bootstrap CSS framework, the conversation usually revolves around CSS classes: there is this class and that class, and this is how to display a primary button on a webpage.

However, Bootstrap is, essentially, a declarative language. It describes how a web page is supposed to look like.

In a sense, regular HTML/CSS describe the same thing, but on a lower level: they define block elements, inline elements, and how you can position them on a page. Bootstrap is a higher-level language typically used to describe webpages in more generic terms.

Structure of a webpage

If you take a look at the typical homepage of almost any website, you'll see they all have a similar structure. First comes the menu, followed by several sections containing the main content, and then the footer.

How is it expressed by the bootstrap?

In Bootstrap, the menu is a special and probably the most complex component. Bootstrap features a horizontal dropdown menu that, on smaller screens, is replaced by a vertical menu with a hamburger button. The Bootstrap menu deserves its own separate discussion, which I won't go into right now.

Following the menu are several page sections. A section is essentially a horizontal band containing various elements. Usually, you need to define the distance between this section and the previous one.

How can we describe this, loosely drawing on an analogy of objects with properties and values?

Section

If we were to define 'Section' as an object with properties, it would look like this:

Section:
    name: Product Features
    margin-top: 3
    margin-right: 0
    margin-bottom: 3
    margin-left: 0

And this is how it is done in bootstrap:

<section class="product-features my-3">

The "my-3" class specifies vertical margins (along the 'Y' axis) - both top and bottom margins - with a value of '3' on Bootstrap's spacing utility scale. This scale ranges from 0 to 5, where '0' implies no space between sections and '5' indicates maximum spacing, creating a significant gap. Thus, '3' provides a moderate amount of vertical space, ensuring the sections are neither too close nor too far apart.

If your perception of 'very far apart' differs from that of the Bootstrap creators, or if you need more steps to define your own distance scale, you have the option to customize it yourself.

Continuing with the 'Section' object from our earlier analogy, you set the values for its 'margin-top' and 'margin-bottom' properties in this way.

Now that we have placed a section on the page, we can concentrate on what's inside.

Container

Normally, we don't want our text to stick to the left border of the page; instead, we prefer to give it a bit of a margin. To ensure aesthetic appeal, the size of this margin should vary for different screen sizes. This important consideration is expressed in Bootstrap as follows:

<div class="container"></div>

Naturally, I am oversimplifying things, and there is more to the 'container' than this, but for now on, here is the rule: Inside every section, there should be a container.

12 column grid

Often, the content we want to place inside the container doesn't span the full width. For example, we might have an image on the left side and some text on the right side. This is where the grid system comes into play.

It consists of 12 columns because this allows for easy division of the full width into halves, thirds, quarters, and combinations like 3/4 and 1/4 without referring to ratios.

In any case, simple two column grid looks like this:

<div class="row">
    <div class="col-6">
        Left
    </div>
    <div class="col-6">
        Right
    </div>
<div>

Bootstrap is designed to accommodate different screen sizes, and for many classes, there is a way to specify the screen size to which the feature applies. If you want your content to be placed in two columns on medium or larger screens, you can use 'col-md-6'. In this case, on devices with smaller screens, the columns will stack vertically, one below the other.

The concept of columns in Bootstrap is so integral that even when defining full-width content, it is often described as a single-column cell spanning the full width.

Centered content and offsets

When you want centered content that occupies a certain percentage of the full width, it's achieved using a column with an offset. Imagine you have 12 vertical bands, and you want to place something in the middle of your section that is approximately half wide.

You say

<div class="row">
     <div class="col-6 offset-3">
         Centered content
     </div>
<div>

Essentially, 3 left vertical bands are left empty, then comes your column, which is 6/12 or 1/2 of the width. Then, two more bands are left empty, although this is not described explicitly.

Again, you can decide that on smaller screens the offset should be smaller or even disappear completely. This is achieved using appropriate size modifiers, such as 'offset-md-2' and similar.

Footer

The footer is a special kind of section that is placed at the very bottom of your page. There is a special HTML tag for it, , similar to the tag used for headers.

Final page structure

So, this is what the outline of a

element on a typical Bootstrap HTML page looks like:

<body>

    <!-- Navigation bar -->
    <nav class="...">
        <div class="container">...</div>
    </nav>

    <!-- Header -->
    <header class="...">
        <div class="container">...</div>
    </header>

    <!-- Multiple sections -->
    <section class="product-features my-3">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    Left
                </div>
                <div class="col-6">
                    Right
                </div>
            <div>
        </div>

    ... repeat

    <!-- Footer -->
    <footer class="...">
        <div class="container">...</div>
    </footer>

</body>

There are libraries that describe GUI interfaces declaratively, for example, through XML. You have two options: either build your interface by directly creating GUI objects like Frames, Textboxes, etc., or create them from an XML description. In the latter case, a Window (or Page) object with the appropriate widgets and GUI controls will be created.

So, in this case, the Bootstrap framework is a tool used to declaratively describe a typical HTML page and its common elements. It is the browser that renders this description and creates the actual GUI objects.

What are the alternatives?

Many people advocate for writing everything from scratch. While CSS has greatly improved since the time when tables were used for layout, and now we have CSS Flexbox and CSS Grid layouts, there is still much more complexity than it appears.

For example, Bootstrap uses different fonts for headers on devices with various screen sizes. Building a responsive dropdown menu would be an especially daunting task on its own. Yes, it is possible, but would it be better than the regular Bootstrap menu?

When I looked into the code of Bootstrap pages, I always thought they were too verbose with all these lengthy "mt-3 mb-2 py-md-1 offset-lg-4" class names. Not to the extent of Tailwind CSS's verbosity, but still, from my perfectionist perspective, HTML sections should only contain the class name, with the rest of the styling defined via CSS.

Now, I'm not so sure. I am ready for compromises. I am even okay with creating columns with single full-width cells, as long as it provides consistency and helps me understand the myriad examples of Bootstrap template code out there.