How to add player to HTML website

Inserting audio files to your site can be beneficial for engaging your visitors, growing your reach and boosting brand awareness. Back in the 90’s the first graphical browsers required a flash installed to display multimedia content and play mp3 music and video. Now, the technologies are evolving fast and there are several options for integrating a free web player on an HTML page!

What is an HTML player

It can take up a separate page, look like a large playlist with many tracks, or be a small floating bar in the lower part of a screen. It can be an integral part of your page, as this language enables inserting additional content with <audio> and <video> tags. Audio files embedded this way are played via HTML5 engine built into compatible browsers. But this method requires knowledge of this markup and substantial web developing skills.

Choosing a plugin

If you want to reduce website development costs, you should consider integrating one of the many third party solutions available at the software market today. What should you consider when choosing the one? Here are some aspects:

  1. Service accessibility – Make sure there are no additional steps you need to take before accessing product demo (signing up, submitting an application, requesting a demo). All of these require spending more time than necessary for choosing a suitable product.
  2. Customization degree – See whether you can make it match your overall design and look like it’s an integral part of your page.
  3. Affordability – It’s also important to understand the budget you have and also count the profit you have from the online presence.

We have explored the market for you and found an optimal solution for you – an HTML plugin that meets the requirements mentioned above. With a tool from Elfsight you can easily create an audio player and add it to your web-page free of charge. It has a broad range of functions:

  • Most popular audio formats supported: mp3, mp4, ogv, webm, HLS (m3u8), DASH (mpd). 
  • You don’t have to register at the service to access the online Demo.
  • No special skills needed to create your unique feature – you can construct it yourself in an intuitive editor.
  • All the parts are switchable – you can remove everything you don’t need to make it minimalistic or create a separate section with one or several playlists.
  • Make a player floating or embed in just one click.
  • Easy to install – just insert the player’s code in your website.
  • Place it anywhere on the site – integrate it into one, all or selected pages.
  • Make it look like an original part of your website design with a super customizable appearance. 
  • Reasonable and flexible pricing.

You can do all of this within a few minutes and at no effort, which is a huge advantage. If you decide to give it a try, you can install it for free and you don’t have to pay anything so far. It’s a great opportunity to test the feature on your website and then determine whether you want to keep it. You can check the full functionality and try a demo here.


Above I have mentioned that you can create your own online music player if you’re competent in the HTML5 language. But it won’t work for those who lack programming knowledge. If you’re unwilling to hire a developer or freelancer who would do it for you, it’s also not a problem to find a plugin that has already been developed. Just use the modern technologies offered.

Integrating a plugin into an HTML page is really easy and anyone can handle it. See the instructions below.

  1. Enter a Demo to create your own widget you would like to integrate. Think of the design and functionality, and also upload audio files there to check its performance.
  2. Sign up to the Elfsight service to get your player installation code.
  3. Log into your CMS account and click on the site for plugin installation.
  4. Add a custom HTML code element in the place you would like to add an audio player. 
  5. Paste the installation code you’ve copied there.
  6. Save the changes and check the result. 

If you face any difficulties, the technical support specialists can do it for you free of charge, which is one more nice thing about the service. 


Online music players can serve many purposes and business tasks, making your website more attractive and engaging for users, improving UX, and even raising conversion and earning profit.

Present original content 

Any artist or creator nowadays must be present online and, of course, provide your audience with an opportunity to listen to your music right on your Internet site. A decision to embed an audio player with your records would highly increase your personal brand popularity and make it stand out. 

Engage your visitors

Audio content is getting more and more popular since it’s easy to perceive. For many people it is a way to relax or educate and they can listen to it while being occupied with something else. So this is among the most efficient ways to keep the audience engaged and make them return.

Set the mood

Records placed on an HTML site aren’t always some original content. It may just accompany and complement an atmosphere. It’s possible to upload  neutral, relaxing, or vibrant music or various sounds. It also should also look minimalistic or developed to correspond with the content.

Errors in use

Everyone knows that everything should be used carefully. It also applies to web design and such niche features on your HTML page. Any special effect has to be applied wisely, and if it’s used wrongly it may be irritating for visitors, rather than engaging. So watch out for donts when thinking of implementing an online player. Look through the most crucial of them:

Overusing the Autoplay Option

Autoplay makes the music start playing when a page loads. For many users it may come all of a sudden. Especially, if there’s no evident option for turning it off! How annoying is that? Get me right, using an autoplay alone won’t affect your bounce rate if used wisely. Take time to consider who your target audience is and how they react to the music they  hear once they load your site. And also don’t forget to give them full control of what’s going on to improve user experience.

Wrong Placement

Think of where to locate a player while designing your HTML website, not after it has been completely done. But if you have already found a proper template and are willing to include an audio player there, make sure it doesn’t interfere with page content. In case there are a lot of tracks to be integrated, it may be a bright idea to form a separate section with playlists for better navigation. And if you need something less intrusive, opt for a floating layout for it not to overlap other site elements.

Low Relevance

This content is a pretty niche feature and quite a few websites really need it. In case your audience is not attracted by music and doesn’t interact with the player, then you should consider removing it. Even getting a plugin for free may bring no effect and becomes just a waste of time. Remember to always carefully analyze your market, targeting group, and plugin efficiency.