How To Add Audio Player To Website

If you are thinking of having media content at your homepage, you should definitely try it! By giving users an option to listen to music or records of various content via an online player you can engage site visitors, develop an audience and broaden your brand awareness. Placing audio on your page is an effective way to interact with your site visitors. Apart from music, you can also upload recorded lectures or special messages to deliver more information about your mission and business. These days there are various options for integrating music on your site. Let’s explore them!

What Is A Website Player

An online music player is typically a piece of software or widget that plays audio records directly in a browser. Typically it looks like an individual section or a floating bar in the lower part of a screen. In any browser it basically looks and works just like any desktop or online streaming programm. The difference is that this app is running right on a website!

Options For Integration

As it has already been said, there are several different ways to embed a music player to a web page. Which of them to choose mainly depends on your coding skills and web dev knowledge. Some of them are easy enough for a beginner to use, and others require a more deeper understanding of how the web works. Let’s start with the simplest and proceed to more complicated ones.

Standard CMS Player

Usually good and well developed CMS services (content management systems) provide pre-made integrated features for placing music into an audio block through its interface. WordPress, for instance, simply lets you place such a block. There you have options to either select a file from your Media Library, Insert its URL, or upload the MP3 from the desktop. This integrated music player is rather simple (you can’t create a playlist section, for example) and requires no additional spendings. But at the same time it has rather limited functionality and customization options are usually not available. These are the reasons why this option isn’t really used on serious website projects.

Customizable Music Plugin

One more easy and effortless choice for a beginner is to take a look at easy-to-use programming solutions available today. I’ve done my own research and I am excited to tell you about one such music player widget I consider to be one of the best at the SaaS market today. The Elfsight company gives any visitor an opportunity to create a personalized player plugin and embed it to your web-page for free. It offers a really extensive functionality and supports  the most common audio formats: mp3, mp4, ogv, webm, HLS (m3u8), DASH (mpd).

What made me name it as one of the best?

  • Firstly – and really critical for online business owners and music creators – it requires absolutely no developing or designing skills. Anyone can create their own player widget and embed its installation code on a website. What is more, if a user happens to stumble upon any issues with setup, technical support specialists are always available and will install the player for you for free.
  • There’s no need to register at the service to access the full Demo functionality Check it by following the link.
  • All elements of the music player are responsive – you can switch off everything you don’t like to be present there to make it minimalistic. Or build a developed section with one or many playlists if you like.
  • The other crucial point to talk about is its super customizable design – you can adapt the player widget to look as a built-in part of your website appearance. 
  • The option to place it anywhere you need – add it to special or all pages and set it floating or embed. 
  • Feel free to try it and if you decide to use it on an ongoing basis, their pricing is also reasonable. In case your web page attracts not that much traffic for the moment, you can even use the player for free. Check the full functionality and play around with the live demo at the link above.

HTML5 Music Player

The latest version of HTML5 (Hypertext Markup Language) is a markup language used for describing web pages. It has been originally designed to display and deliver almost any content you’d like requiring no extra browser software like plugins or modules. Nowadays, It is able to include almost anything: applications, music, video, and animation. It is also used for creating fantastic and complicated apps running in a browser.

In order to insert an audio file this way, see this sample HTML code:

<audio controls><source src=”YOUR FILE URL” type=”audio/mpeg”></audio>

Here you need to paste the link to your file uploaded to a server or a cloud service, since HTML5 player plays only content and music available online.

With this simple code you can place a small and plain music player on the page with controls for playing, pausing, and adjusting volume. You can add autoplay and loop features, but keep in mind that browsers usually don’t support HTML autoplay since it’s considered to be inappropriate to automatically force audio onto users.

If you’re confident in editing your website HTML code, then integrating an file with music or other content using <audio> tag is among the easiest and most straightforward methods. Some might consider it to be pretty basic, but the result relies mainly on your developing skills. This way definitely has its advantages since it is compatible with the most popular browsers for desktop and mobile devices. The only drawback is that this option requires coding knowledge and some degree of web developing skills.

Cloud Storage Link

This method requires using a different tag of HTML code – <iframe> tag. Firstly you should choose a  cloud storage provider, for example, Google Drive which has wide functionality and offers some free space. You can upload your records there and place it in the website audio player.

  1. Upload audio file to cloud storage
  2. Share the file via link.
  3. Adjust the accessibility settings so that anyone on the web can access it.
  4. Copy the link.
  5. This will give you a URL similar to this:

“https://drive.google.com/file/d/123/view?usp=sharing”

  1. Replace “view?usp=sharing” part with “preview”, so it looks like:

“https://drive.google.com/file/d/123/preview”

  1. Include the link into an <iframe> tag to create music player on your website:

“<iframe frameborder=”0″ width=”400″ height=”150″ src=”CLOUD URL”></iframe>”

This way you would insert the app of a cloud service into your website (Google Drive in this case. It means that its look and functionality depend on the features characteristic of a cloud software for playing MP3 you’re using. 

Who Needs Music Player

Before you add a player plugin, one should take into account that this feature is pretty niche and definitely not every page really needs it. Yet there are many site owners and users who take a huge advantage from having it available.

Artists

Professional or amateur musicians should bring their music out to the web and social media without any hesitation! On the modern web it’s super easy to develop your own page using any of numerous website builders. These services have an intuitive interface and offer many predefined templates. You can place a player widget there with your albums and fresh releases. By creating playlists you will raise your recognition on the Internet and make money off your creative work.

Instructors 

Nowadays, any expert in some field is able to create his own educational portal on the web. They can use it to share their expertise with people, create original information products, upload records of their lectures, and form a community. It’s a great idea to supplement it with a player that contains learning materials and playlists on special topics.

Thematic websites

Many people find that one of the greatest values of the Internet today is that it provides us with an easy way to connect with communities of like-minded people. In the past, it gave a raise to free topical forums and sites where a user generated content is placed. Have you ever thought of creating a kind of social media site? This is still relevant today – a perfect place to share music of various genres, books and lectures on a topic that you are interested in or is super popular and is evolving rapidly.

Niche web-services

These include everything from routine and consciousness sites to yoga and meditation, personal blogs and artistic galleries online. In case of any of these sites music has to be applied carefully to attract and capture their visitors. Here, a music player is usually intended to pass on special vibes and engage the audience even more into the content a service provides.

How To Embed Music Player Widget

Above I have described how you can place a music player at your website if you have coding skills in HTML5. Still it won’t work for those site owners who have little or no programming knowledge. Hiring a freelance developer to do it for you might be too costly and takes up a certain time. While nowadays it’s also a common and easy solution to use a widget that has been pre-developed for you. Modern technologies offer so much, don’t be afraid to use them!

Incorporating a music player widget into a web-page is simple indeed and any internet user with average skills can handle it. Just follow the guide below.

  1. Open a Demo page to create your own widget. 

There are numerous design and functionality options, don’t get lost in them. Also make sure to upload your audio records to see how it works.

  1. Sign up to the service.

Register an account at Elfsight to get access to your admin panel and copy the installation code there.

  1. Enter into your admin panel.

Log into the CMS account and choose a site where you want to install it.

  1. Add an HTML element.

There, add a Custom HTML block to the page or website template where you would like to place a music player. 

  1. Enter the code.

Paste the installation code you’ve copied at the Elfsight admin board.

  1. Check the result.

Save the changes and visit your website to see the player widget in action. 

If you face any difficulties, the technical support specialists can do it for you without any extra charges, which is one more nice thing about the service.