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 element.
All you need to do is get the iframe code of the audio track you want to add to the site.
Using digital music services
You can copy the code of a preferred audio track from Spotify or SoundCloud.
Using online tools and widgets
Alternatively, you may create a third-party audio player widget using Elfsight, CommonNinja or another preferred online tool.
Embedding your own audio track
If you wish to add an audio file from your local device, follow the steps below 👇
Step 1 - Create an Embed Code element
Insert the embed code element where you want to show your audio file. Then, copy this line of code:
<audio controls> <source src="URL"> </audio>
And paste it within the Embed Code element that you just created.
You will update again this Embed Code later with your audio file URL.
Step 2 - Upload your audio file to your Media Library
Access the Media Library of your editor:
There, click on the Upload files button to upload your file. Once it's uploaded, hover your cursor over the file and click on the details:
Copy the file path URL of your audio file - you will need it in the next step:
Step 3 - Edit the embed code element
Go back to the Embed Code element that you previously created, then paste the URL of your audio file there, like this:
Before:
<audio controls> <source src="INSERT URL HERE"> </audio>
After:
<audio controls> <source src="https://assets.zyrosite.com/AoPeKzbBJpFBJ2QQ/my-audio-file-xxxxg13X6VIlL41d.mp3"> </audio>
Step 4 - Save the Embed Code element
Once everything is done, save the changes and check the audio file on your live website or in the preview mode.