AudioWidget Setup Guide
Auto-convert blog posts into audio. Follow the steps below and copy the provided code into your theme template.
Step 1 — Backup your template
In Blogger: Theme > Backup/Restore → click Download theme to save a copy locally.
Step 2 — Edit the theme HTML
Go to Theme > Edit HTML. Press Ctrl + F (or Cmd + F on Mac) and search for <data:post.body/>. Replace the occurrence used by your main post content (often the third occurrence).
Step 3 — Replace with AudioWidget wrapper
Replace <data:post.body/> with the block below inside your post content area:
<b:if cond='data:view.isPost'>
<div id='audio-container'></div>
<script src='https://cdn.jsdelivr.net/npm/audiowidget@latest/dist/audiowidget.min.js'></script>
<script>
AudioWidget.init({
container: '#audio-container',
content: document.querySelector('.post-body').innerText
});
</script>
</b:if>
<data:post.body/>Step 4 — Save and test
Click Save theme, then open an individual post (not the homepage). The player should appear where the post content is rendered.
How it works
The AudioWidget script extracts your post’s text, converts it to speech, and renders a player with play/pause, progress bar, and timestamps inside #audio-container.
Troubleshooting
- Confirm you replaced the correct
<data:post.body/>occurrence. - Make sure you’re viewing a single post page (
data:view.isPost).