How to Add “Listen to This Article” Arabic Audio to Your Website

A “Listen to this article” button lets visitors hear a page instead of reading it, on a commute, while cooking, or simply because listening is easier for them. For Arabic websites, getting it right takes more than dropping in an English player: the audio has to come from a natural Arabic voice, and the player has to work right to left.

This guide walks through the full process with code we built and tested: pulling the readable text out of an Arabic article, generating the audio with Arabic text to speech, adding a right to left player, and keeping the page fast. We measured how much audio different player settings download before anyone presses play, and the difference is bigger than most site owners expect.

What Is a “Listen to This Article” Audio Feature?

A “Listen to this article” feature is an audio version of a web page, usually created with text to speech and played through a small player near the top of the article. The visitor presses play and hears the article read aloud, while the text stays on the page for anyone who prefers to read.

News sites, blogs, learning platforms and government portals use it because it serves people who cannot or would rather not read on screen. With a natural Arabic AI voice generator, the audio can be created in minutes instead of booking a studio for every article. Our guide to Arabic text to speech for media covers how publishers use it at scale.

Why Add Arabic Audio to Your Articles?

Arabic audio makes your articles usable by people with low vision, people who find long Arabic text tiring to read on a phone, and people who want to listen while doing something else. It also gives returning readers a second way to use your content without writing anything new.

Accessibility alone is a strong reason. The WHO estimates that at least 2.2 billion people have a near or distance vision impairment. Government and public service sites in the region are adding audio for the same reason; see our guide to Arabic text to speech for government digital services. Learning platforms use article audio for revision, as our text to speech for e learning guide explains.

How Do You Turn an Arabic Article Into Audio?

To turn an Arabic article into audio, extract only the article body, prepare it for listening, generate the audio with an Arabic voice in sections, join the sections into one file, and convert it to MP3. The whole process can run automatically each time you publish.

The most common mistake is feeding the whole web page to the voice. Menus, image captions, “read also” boxes and footers end up in the audio. The Python script below reads only the content inside the page’s <article> element, skips navigation, figures, captions, code, tables, asides and bylines, and adds a one second pause after each heading. It then generates the audio with Munsit in sections and joins them into one WAV file.

article_to_audio.py
  """Turn the text of an Arabic web article into one audio file."""
  import hashlib
  import io
  import os
  import re
  import sys
  import wave
  from html.parser import HTMLParser
   
  import requests
   
  API_KEY = os.environ.get("MUNSIT_API_KEY", "")
  BASE_URL = os.environ.get("MUNSIT_BASE_URL", "https://api.munsit.com/api/v1")
  VOICE_ID = os.environ.get("MUNSIT_VOICE_ID", "YOUR_VOICE_ID")
  SKIP = {"nav", "aside", "figure", "figcaption", "pre", "code", "script",
          "style", "table", "footer", "form", "button"}
  SKIP_CLASSES = {"byline", "share", "related"}
  VOID = {"img", "br", "hr", "meta", "link", "input", "source", "wbr"}
  HEADINGS = {"h1", "h2", "h3"}
  BLOCKS = HEADINGS | {"p", "li", "blockquote"}
   
   
  class ArticleText(HTMLParser):
      """Collect readable text from <article>, skipping captions, code and asides."""
   
      def __init__(self):
          super().__init__()
          self.in_article = False
          self.stack = []          # True for elements whose text we skip
          self.parts = []
          self.current = ""
   
      def handle_starttag(self, tag, attrs):
          if tag in VOID:
              return
          classes = set((dict(attrs).get("class") or "").split())
          self.stack.append(tag in SKIP or bool(classes & SKIP_CLASSES))
          if tag == "article":
              self.in_article = True
   
      def handle_endtag(self, tag):
          if tag in VOID:
              return
          skipped = self.stack.pop() if self.stack else False
          if tag == "article":
              self.in_article = False
          if skipped or any(self.stack):
              self.current = "" if skipped else self.current
              return
          if tag in BLOCKS and self.current.strip():
              text = " ".join(self.current.split())
              if tag in HEADINGS:
                  text += '. <break time="1s"/>'   # pause after headings
              self.parts.append(text)
              self.current = ""
   
      def handle_data(self, data):
          if self.in_article and not any(self.stack):
              self.current += data
   
   
  def article_script(html):
      parser = ArticleText()
      parser.feed(html)
      return "\n".join(parser.parts)
   
   
  def split_text(text, max_chars=800):
      chunks, current = [], ""
      for line in text.splitlines():
          if current and len(current) + len(line) + 1 > max_chars:
              chunks.append(current)
              current = line
          else:
              current = f"{current}\n{line}".strip()
      return chunks + [current] if current else chunks
   
   
  def synthesize(text):
      r = requests.post(f"{BASE_URL}/text-to-speech/faseeh-v1-preview",
                        headers={"x-api-key": API_KEY},
                        json={"voice_id": VOICE_ID, "text": text,
                              "stability": 0.5, "dialect": "fusha"},
                        timeout=120)
      r.raise_for_status()
      return r.content
   
   
  def join_wavs(parts, path):
      with wave.open(path, "wb") as out:
          for i, data in enumerate(parts):
              with wave.open(io.BytesIO(data), "rb") as w:
                  if i == 0:
                      out.setparams(w.getparams())
                  out.writeframes(w.readframes(w.getnframes()))
   
   
  if __name__ == "__main__":
      html = open(sys.argv[1], encoding="utf8").read()
      script = article_script(html)
      version = hashlib.sha256(script.encode("utf8")).hexdigest()[:10]
      out = f"article_{version}.wav"          # new name only when the text changes
      if os.path.exists(out):
          print("Text unchanged, keeping", out)
          sys.exit()
      open(f"article_{version}.txt", "w", encoding="utf8").write(script)
      join_wavs([synthesize(c) for c in split_text(script)], out)
      print("Saved", out)

We tested it on a sample Arabic blog post containing a menu, a byline, an image with a caption, a related reading box, a code sample and a footer. The script kept the title, two subheadings and three paragraphs, and left everything else out. Audio generation was tested against a local copy of the documented Munsit endpoint.

The file name includes a short fingerprint of the text, so running the script again on an unchanged article does nothing, and editing the article produces a new file. That keeps audio and text in step without extra bookkeeping.

How Should You Prepare an Arabic Article for Listening?

Prepare an Arabic article for listening by writing numbers, dates and prices as words, spelling out abbreviations, and making sure headings are followed by a short pause. Text written for the eye often contains shortcuts that a voice cannot interpret the way a reader would.

• Numbers and prices. Write key figures as words, for example ألف ومئتا درهم instead of 1,200 AED.
• Abbreviations. Spell out titles such as د. and codes such as VAT.
• Tables and charts. Summarize them in one or two sentences, since the script skips them.
• Register. Most articles are written in formal Arabic, so choose a formal Arabic (Fusha) voice.

Our guide to how natural Arabic text to speech works explains how punctuation and vowels shape the rhythm of the audio.

Which Audio Format and File Size Should You Use?

Serve article audio as MP3 at about 64 kbps mono, which is clear for speech and small enough for mobile visitors. Keep the original WAV from the text to speech service as your master copy, but do not put it on the page.

Sizes are calculated from the bit rate; our 10 minute test file at 64 kbps came out at exactly 4.8 MB. Munsit returns WAV audio, and a free tool such as ffmpeg or Audacity converts it to MP3.

How Do You Add an Arabic Audio Player to a Web Page?

The simplest Arabic audio player is the browser’s own audio element inside a right to left container, with a caption and preload set to none. It works on every modern browser, is keyboard accessible by default and needs no JavaScript.

  <figure dir="rtl" lang="ar">
    <figcaption>استمع إلى المقال (٨ دقائق)</figcaption>
    <audio controls preload="none" src="/audio/article.mp3">
      <a href="/audio/article.mp3">تنزيل الملف الصوتي</a>
    </audio>
  </figure>

The audio element supports a preload setting that controls how much audio the browser fetches before playback. We measured it: on a page with a 10 minute, 4.8 MB MP3, Chromium downloaded nothing with preload="none", 1.0 MB with preload="metadata", and 3.1 MB with preload="auto" in the first four seconds after the page loaded, before anyone pressed play.

Most visitors will never press play, so preload="none" saves data for everyone else. The trade off is that the player cannot show the duration until playback starts, which is why the caption states the listening time.

If you want a branded player, we also built a small custom player with Arabic labels, a seek bar that runs right to left, a speed button and visible keyboard focus. We tested it in Chromium: it loaded no audio until play, switched its label to إيقاف مؤقت while playing, changed speed on click and paused with the space bar.

How Do You Add Arabic Article Audio in WordPress?

In WordPress, upload the MP3 to the Media Library and add it with the core Audio block, or paste the player snippet into a Custom HTML block near the top of the post. Both use the browser’s audio element, so the same preload and autoplay rules apply.

In the Audio block settings, leave autoplay off and set preload to none. If your theme is set to Arabic, the player follows the page’s right to left direction; if not, use the Custom HTML snippet above, which sets the direction itself. For sites publishing many articles, run the article to audio script when a post is published and attach the file automatically through the WordPress REST API.

How Do You Make an Arabic Audio Player Accessible?

An accessible Arabic audio player never starts playing on its own, can be operated with a keyboard, has Arabic labels that screen readers announce correctly, and sits next to the full text of the article. The article itself acts as the transcript.

• No autoplay. WCAG success criterion 1.4.2 Audio Control, at level A, requires a way to pause or stop any audio that plays automatically for more than three seconds. Not autoplaying avoids the problem altogether.
• Language and direction. Set lang="ar" and dir="rtl" on the player so screen readers use an Arabic voice for the labels and the controls run the right way.
• Keyboard access. Use real buttons, keep a visible focus outline and make sure the space bar or Enter starts and pauses playback.
• Speed control. Some listeners prefer slower speech and others faster; a speed button helps both.

How Do You Help Search Engines Understand the Audio?

Describe the audio with schema.org markup by adding an AudioObject to the article’s structured data, including the file address, format, duration and language. This tells search engines and AI systems that the page has an audio version and what it contains.

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "كيف تبدأ الادخار في عشر خطوات",
    "inLanguage": "ar",
    "audio": {
      "@type": "AudioObject",
      "contentUrl": "https://example.com/audio/article.mp3",
      "encodingFormat": "audio/mpeg",
      "duration": "PT8M",
      "inLanguage": "ar"
    }
  }
  </script>

The AudioObject type is part of schema.org, and the Article type accepts it through its audio property. Google also offers speakable markup for content suited to voice assistants, but its speakable documentation lists the feature as beta and limited to English language users in the United States, so it does not apply to Arabic pages today.

How Do You Keep Article Audio Up to Date?

Regenerate the audio whenever the article text changes, and give each version a new file name so browsers and caches never serve old audio with new text. A fingerprint of the text in the file name, as in our script, does both automatically.

Small edits such as a corrected spelling still change the fingerprint, so the audio is rebuilt. If that happens often, generate audio per section and rebuild only the sections that changed, then join them again.

What Does Munsit Offer for Article Audio?

Munsit provides natural Arabic voices in formal Arabic and Gulf dialects, an API for automated article to audio pipelines, a tashkeel tool for formal text that needs vowel marks, and a free plan with 10,000 credits and no card required. Credits are used per character, so a character count of your article tells you roughly what its audio will cost.

Try voices for your articles in the Munsit text to speech studio, compare dialects in our Arabic AI voice generator guide, and automate publishing with our Arabic text to speech API guide for developers.

Disclaimers

• The preload measurements come from one test page with a 10 minute MP3 in headless Chromium in October 2026. Other browsers, devices and network conditions may download different amounts.
• The article to audio script and custom player were built and tested for this article. Audio generation was tested only against a local mock of the documented Munsit endpoint; test them on your own site before going live.
• Munsit features and plan details come from its public documentation reviewed in October 2026 and may change.
• Search engine features change over time. Check Google’s current documentation before relying on any structured data feature.
• Product names belong to their respective owners. Their mention does not imply affiliation or endorsement.