# "Listen to This Article" Button

> Adds a play button above posts that reads the article aloud with the visitor's browser text-to-speech, with no external service or cost.

- Type: PHP
- Runs: Frontend only
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: accessibility, audio, text-to-speech, content
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-listen-to-article/

## Code

```php
add_filter( 'the_content', function ( $content ) {
    if ( ! is_singular( 'post' ) || ! in_the_loop() || ! is_main_query() ) {
        return $content;
    }

    $button = '<p><button type="button" class="wpide-listen" hidden style="padding:6px 14px;border:1px solid currentColor;border-radius:20px;background:transparent;cursor:pointer;">&#9654; Listen to this article</button></p>';

    $script = "<script>(function(){var b=document.querySelector('.wpide-listen');if(!b||!('speechSynthesis' in window)){return;}b.hidden=false;var playing=false;b.addEventListener('click',function(){if(playing){speechSynthesis.cancel();playing=false;b.innerHTML='&#9654; Listen to this article';return;}var c=b.closest('.entry-content,.wp-block-post-content')||document.querySelector('article');var u=new SpeechSynthesisUtterance((c?c.innerText:'').replace(b.innerText,''));u.lang=document.documentElement.lang||'en';u.onend=function(){playing=false;b.innerHTML='&#9654; Listen to this article';};speechSynthesis.cancel();speechSynthesis.speak(u);playing=true;b.innerHTML='&#9632; Stop';});})();</script>";

    return $button . $content . $script;
}, 25 );
```

## Notes

Uses the browser's built-in speech voices, which vary by device. The button is hidden in browsers without speech support.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find ""Listen to This Article" Button" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/