Discussion on Zaudio - HTML5 JavaScript Audio Player


aclusion supports this item


This author's response time can be up to 2 business days.

56 comments found.

Give to separate mp3 by category? I wanted to create music categories

Hi I have a website and I use Zaudio (cece6ace-1abb-475a-8153-27a84e086917) on it! There are several pages on the site (Main, About, Portfolio … etc) I also use the swup.js library to navigate the site. When I go from the Main page to the Portfolio page (here is your Zaudio plugin), the Zaudio script does not work. But when I just reload the Portfolio page, the zaudio script works well and correctly. Please help me with solving this problem.

Hi, It looks like you’re using the player on a single page application. if you’re just putting the zaudio initialization code (new zAudio(...)) inside a script tag it will just run once and fail as it can’t find the target div because its not on the home page.

To solve this, I think you should put the initialization code in the navigation code when the current page is “portfolio” or any other pages you need the player to work.

interested in Zaudio – HTML5 JavaScript Audio Player. where can I see how easy it is to use?


you can visit to see the demo

Will I be able to show the player inside the description of a prestashop product page? I understand I would had to place the code in every product I want to show the player in.


Legitti Purchased

Hey, there are tons of new music related icons on FontAwesome, would it be possible to update to use those icons?

Hi Legitti,

Current version , you cannot update icons to FontAwesome. ( But it’s still possible if you edit markup from the source we have provided). Somehow we will consider this as an option in version 3.0 update.

Thank You, Aclusion Support

Hello, can this player be used to stream live audio to my website?

Hi Arayaroots,

Yes you can attach all the HTML5 audio element supported streaming urls to this player.

Thank You, Aclusion Support


jack611 Purchased

Is there a way to remove the album artwork?

Hi jack611,

There’s no option no remove artwork. But you can remove artwork using CSS. Please send us the link. So we can help you to remove it.

Or add following CSS to your html,

<style> .zaudio_art { display: none !important; } </style>

Thank You, Aclusion Support


jack611 Purchased

Thank you. Great product. I also like that it doesn’t interfere with other scripts on my page.

Hello! Is this item still maintained? regards!

Thanks for your answer! Can it be integrated somehow to a joomla article? (Even if it is manually done) regards!

And one last question, is it compatible to stream from SoundCloud?

Hi carloscid,

If you can attach java-script inside Joomla article , Yes you can integrate. But “somehow” you can integrate player to any kind of HTML web application.

If soundcloud stream supports native HTML player. zAudio is compatible with soundcloud. Because zAudio is powered by browser HTML5 player.

Thank You, Aclusion Support


MKayW Purchased

Sorry, but I am new to HTML. What does an ‘empty div with an Id’ look like?

Hi, it should look something like,

Where “zaudio” is the id


MKayW Purchased

Thank you


MKayW Purchased

My website is not connected to the internet (Raspberry Pi) so the icons/fonts obviously won’t work for me. How can I insert local icons for the player? thanks


MKayW Purchased

I have managed to replace the fonts, but it doesn’t seem to work the same for the play icons.

Hi, can you try to save this as font.css to your local(and the font file defined as src inside it) and replace the font url in @font-face rule to use the local font file.

after that import the font.css in zaudio.css or link it in your html page


I am trying to extend the playlist height to show the total list of Songs on the playlist. I have already read your comment on another post about changing the height from ‘200px’ to ‘100%’ but that didn’t change anything.

You can take a look at the following URL to see what I am talking about: You will see the player when you scroll down.

Look forward to your reply ASAP.


Is it possible for this player to switch between two audio clips on the click of a button for the purpose of quickly comparing two audio tracks? For example, you choose one track and it starts playing two tracks simultaneously, however one will be muted and there’d be like a toggle or before/after button to toggle muting between to the two tracks.

Hi tubescreamer_,

It’s not impossible , But you can only play one audio clip at a time from a single player instance. So you might able to achieve the requirement by using 2 player instances. And still you have to add some extra codes to get it working.

Thank you, Aclusion Support

my artwork always shows up as a little thumbnail in the list of songs, but I can’t figure out why some artwork shows up for the current song and others no. I’ve tried both .jpg and .png. Are there specific parameters for the files? Thanks

Hi, I have limited experience with audio players and would please like to ask two questions.

I have read on the description that it is possible to change the player’s primary color and unsure what it means. Would I be able to change the background from White to Black?

I am also unsure if I will be able to change the width of the player. Is this possible?

Thank you.

Hello. Can you please tell me how to change the width and length of the audio player.

Hello, how can i run multiple instance on the same page with playlist ? e.g. I want to display three players in different sections of the page with playlist. Currently I’m only getting 1 player’s output. Looking forward.