{"id":859,"date":"2022-08-16T11:37:18","date_gmt":"2022-08-16T11:37:18","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/16\/6475125-hostinger-website-builder-how-to-embed-audio-files\/"},"modified":"2026-03-16T12:12:06","modified_gmt":"2026-03-16T12:12:06","slug":"6475125-hostinger-website-builder-how-to-embed-audio-files","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6475125-hostinger-website-builder-how-to-embed-audio-files\/","title":{"rendered":"Hostinger Website Builder: How to Embed Audio Files"},"content":{"rendered":"

If you use Hostinger Website Builder and want to add an audio player to your site, you can do that with the help of a third-party platform and our embed code<\/a> element.<\/p>

\n<\/p>

All you need to do is get the iframe code<\/b> of the audio track you want to add to the site.<\/p>

\n<\/p>

Using digital music services<\/h2>

You can copy the code of a preferred audio track from Spotify<\/a> or SoundCloud<\/a>.<\/p>

\n<\/p>

Using online tools and widgets<\/h2>

Alternatively, you may create a third-party audio player widget using Elfsight<\/a>, CommonNinja<\/a> or another preferred online tool. <\/p>

\n<\/p>

Embedding your own audio track<\/h2>

If you wish to add an audio file from your local device, follow the steps below 👇<\/p>

\n<\/p>

Step 1 – Create an Embed Code element<\/h3>

Insert the embed code<\/a> element where you want to show your audio file. Then, copy this line of code:<\/p>

<audio controls> <source src=\"URL\"> <\/audio><\/code><\/pre>
And paste it within the Embed Code element that you just created. <\/p>
\n<\/p>
\n
You will update again this Embed Code later with your audio file URL.<\/p>\n<\/div>
\n<\/p>
Step 2 – Upload your audio file to your Media Library<\/h3>
Access the Media Library<\/a> of your editor:<\/p>
\n<\/p>
<\/div>
\n<\/p>
\n<\/p>
There, click on the Upload files <\/b>button to upload your file. Once it’s uploaded, hover your cursor over the file and click on the details:<\/p>
\n<\/p>
<\/div>
\n<\/p>
Copy the file path URL of your audio file – you will need it in the next step:<\/p>
\n<\/p>
<\/div>
\n<\/p>
Step 3 – Edit the embed code element<\/h3>
Go back to the Embed Code element that you previously created, then paste the URL of your audio file there, like this:<\/p>
Before:<\/p>
<audio controls> <source src=\"INSERT URL HERE\"> <\/audio><\/code><\/pre>
\n<\/p>
After:<\/p>
<audio controls> <source src=\"https:\/\/assets.zyrosite.com\/AoPeKzbBJpFBJ2QQ\/my-audio-file-xxxxg13X6VIlL41d.mp3\"> <\/audio><\/code><\/pre>
\n<\/p>
Step 4 – Save the Embed Code element<\/h3>
Once everything is done, save the changes and check the audio file on your live website or in the preview mode.<\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to embed a soundtrack or a playlist to your website<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[280],"tags":[],"class_list":["post-859","post","type-post","status-publish","format-standard","hentry","category-website-elements"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6475125-hostinger-website-builder-how-to-embed-audio-files\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6475125-hostinger-creador-de-sitios-web-como-anadir-archivos-de-audio\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6475125-hostinger-createur-de-site-web-comment-integrer-des-fichiers-audio\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6475125-hostinger-svetainiu-kurimo-irankis-kaip-prideti-audio-faila\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6475125-hostinger-criador-de-sites-como-adicionar-arquivos-de-audio\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=859"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/859\/revisions"}],"predecessor-version":[{"id":3516,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/859\/revisions\/3516"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}