{"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-08-27T12:13:08","modified_gmt":"2026-08-27T12:13:08","slug":"6475125-hostinger-ai-builder-manual-mode-how-to-embed-audio-files","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6475125-hostinger-ai-builder-manual-mode-how-to-embed-audio-files\/","title":{"rendered":"Hostinger AI Builder: How to embed audio files in manual mode"},"content":{"rendered":"

Add an audio player to your Hostinger AI Builder manual mode website using a third-party platform, an online widget, or your own audio file, along with the embed code<\/a> element..<\/p>

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

Using digital music services<\/h2>

You can copy the code of a preferred audio track from Spotify<\/a> or SoundCloud<\/a>.<\/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>

Embedding your own audio track<\/h2>

If you wish to add an audio file from your local device, follow the steps below 👇<\/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
You will update again this Embed Code later with your audio file URL.<\/p>\n<\/div>
Step 2 – Upload your audio file to your Media Library<\/h3>
    \n
  1. Access the Media Library<\/a> of your editor:
    \n\"\"<\/li>\n
  2. 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:
    \n\"Media<\/li>\n
  3. Copy the file path URL of your audio file – you will need it in the next step:
    \n\"Hostinger<\/li>\n<\/ol>
    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>
    After:<\/p>
    <audio controls> <source src=\"https:\/\/assets.zyrosite.com\/AoPeKzbBJpFBJ2QQ\/my-audio-file-xxxxg13X6VIlL41d.mp3\"> <\/audio><\/code><\/pre>
    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":"
    Embed a soundtrack, playlist, or your own audio file on your Hostinger AI Builder manual mode 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":[293],"tags":[],"class_list":["post-859","post","type-post","status-publish","format-standard","hentry","category-ai-builder"],"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-BR","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":4,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/859\/revisions"}],"predecessor-version":[{"id":17291,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/859\/revisions\/17291"}],"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}]}}