Add Audio Player to Hostinger AI Builder

Updated 7 November 2026 · Standard formula, shown below

Yes, you can add an audio player to a Hostinger AI Builder site, and the method depends on whether you want to embed a file you host yourself or stream from a service like Spotify or SoundCloud. The builder includes a dedicated Audio element for direct MP3 uploads, and a custom HTML block for embedding third‑party players.

What the Hostinger AI Builder Offers

Hostinger’s website builder (formerly Zyro) is a drag‑and‑drop tool with a set of content blocks. The relevant ones for audio are:

Audio block – uploads an MP3 file directly to your site’s storage and shows a simple play/pause bar.
HTML block – lets you paste an embed code from Spotify, SoundCloud, Apple Podcasts, or any other service that provides an iframe.
Video block – can be used as a workaround if your audio is part of a video file, though it is not ideal for pure audio.

The Audio block is the simplest for a single track or a short voice clip. The HTML block is better for playlists, podcasts, or when you want a branded player with artwork and track lists.

How to Add the Built‑in Audio Block

Open your site in the Hostinger AI Builder editor.
Click the + (Add) button on the left‑hand panel.
Scroll to the Media section and drag the Audio element onto your page.
Click the placeholder that appears, then choose Upload to select an MP3 file from your computer.
Once uploaded, the player appears on the page. You can adjust its width, alignment, and background color in the right‑hand settings panel.
Publish the site to make the player live.

There is no file size limit stated in the builder’s documentation, but Hostinger’s general hosting plans typically allow files up to 512 MB. For a standard song (3–5 MB), this is more than enough. If you have a long podcast episode (50–100 MB), consider compressing it or using an external host.

How to Embed a Third‑Party Player

If you prefer Spotify, SoundCloud, or a podcast host, use the HTML block:

Go to the service where your audio is hosted.
Find the Share or Embed option (usually a button with three dots or a share icon).
Copy the iframe code provided (it looks like <iframe src="..."></iframe>).
Back in the Hostinger editor, add an HTML block (under Advanced or Embed in the add menu).
Paste the code into the block’s content area.
Click outside the block to preview; the player should render.

This method works for any service that gives an embed code, including YouTube (for audio‑only videos), Mixcloud, and many podcast hosting platforms like Buzzsprout or Podbean. The player will retain its original features—playlist, skip buttons, artwork—which the basic Audio block cannot replicate.

Common Problems and Fixes

Several issues can arise when adding audio, and most have straightforward solutions:

Player doesn’t appear after upload – Refresh the editor, or re‑upload the file. Large files may take time to process.
Audio plays on desktop but not mobile – The built‑in Audio block uses HTML5 audio, which is supported on all modern phones. If you embedded a third‑party player, check that the service’s mobile embed is enabled (most are).
File format not supported – The Audio block accepts MP3 and WAV. If you have an M4A or FLAC, convert it to MP3 first using a free converter.
Embed code shows as text – Make sure you pasted into an HTML block, not a Text block. Text blocks render code as plain text.
Player is too large or small – For the built‑in block, adjust the width in the settings. For embeds, you can often change the width="100%" and height="..." attributes in the iframe code.

If the audio still fails, test the MP3 file in a separate browser tab. If it plays there, the issue is with the block placement—try deleting and re‑adding it.

Choosing the Right Method

Your choice depends on three factors: how many tracks you have, whether you need analytics, and how much control you want over the player’s appearance.

Single track, no analytics – Use the built‑in Audio block. It’s quick and requires no external account.
Playlist or podcast series – Use Spotify or SoundCloud embed. They handle multiple tracks and give you a professional interface.
You need download stats or email capture – Use a dedicated podcast host (like Buzzsprout or Transistor) and embed its player. Those services provide detailed listener data that Hostinger’s basic player cannot.
You want a custom‑looking player – The HTML block lets you paste any custom code, including players from services like Podigee or Audioboom, which offer more styling options.

There is no cost difference—all these methods work on any Hostinger plan, including the free tier (though free sites show Hostinger branding).

Audio Hosting and Storage Considerations

When you upload an MP3 directly to your site, it counts against your hosting storage. Hostinger’s shared plans typically include 50–200 GB, so a few songs won’t matter. However, if you plan to host hundreds of episodes, consider an external audio host. Reasons:

Bandwidth – Every play downloads the file. On a popular site, this can consume your monthly bandwidth allowance (usually 100 GB+ on Hostinger plans).
Speed – External hosts use CDNs (content delivery networks) that serve files from servers close to the listener, reducing buffering.
Backup – If you ever delete the file from your Hostinger media library, the player breaks. External hosts keep your files safe and separate from your site.

For a small personal site, direct upload is fine. For a serious podcast, always embed from a dedicated host.

Costs and Limits

Adding an audio player does not cost extra on Hostinger. The builder is included in all website plans, and the Audio block is a standard feature. The only potential cost is if you exceed your storage or bandwidth, which would require upgrading to a higher plan.

There is no limit on the number of audio blocks you can add, but each one adds to your page load time. If you have many tracks, consider putting them on a single page or using a playlist embed instead of ten separate players.

Frequently Asked Questions

Can I add a podcast player to Hostinger AI Builder?

Yes. Use the HTML block and paste the embed code from your podcast host (e.g., Buzzsprout, Podbean, or Spotify for Podcasters). The player will show your episodes with play, pause, and episode list. You cannot use the built‑in Audio block for multiple episodes—it only plays one file.

Does the built‑in audio player support autoplay?

No. The Audio block does not have an autoplay setting. You can manually add autoplay by editing the HTML of the block, but most browsers block autoplay with sound, so it likely won’t work for visitors. It’s best to let users start playback themselves.

Can I use a YouTube video as an audio player?

Yes, but it will show the video player, not just audio. You can embed a YouTube video via the HTML block and set it to a low height (e.g., 80 px) to hide the video, but the controls will still show. For pure audio, use SoundCloud or a direct MP3.

Why is my audio file not playing on Safari?

Safari requires the audio file to be served with the correct MIME type. Hostinger typically does this automatically for MP3 files. If it fails, try converting the file to MP3 (Safari supports MP3, AAC, and WAV, but not OGG). Also, ensure the file name has no spaces or special characters.

Can I add a play button to an image or text?

Not directly. The builder doesn’t have a “click image to play audio” feature. You can use an HTML block with custom JavaScript, but that requires coding knowledge. A simpler workaround is to place the Audio block next to the image, so users see both.

Does the audio player work on all devices?

Yes, the built‑in player uses HTML5 audio, which is supported on Windows, macOS, iOS, and Android. Third‑party embeds (Spotify, SoundCloud) also work on all modern devices, though some services require an account to play full tracks.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.