How to Add Music Player to HTML Pages
There are several ways to add music player to HTML, from a bare audio tag to a styled Spotify or SoundCloud player that floats over every page. This guide compares them and walks through the widget setup.
How to play music in HTML: three routes
The quickest answer to how to play music in HTML is the built-in audio element:
<audio controls src="track.mp3"></audio>It plays files you host yourself, looks different in each browser, and a playlist needs custom JavaScript. Spotify and SoundCloud also hand out iframe embeds, which work inline but scroll away with the page.
The ElectricBlaze player takes a Spotify or SoundCloud embed and wraps it in a widget with two modes: embedded in the layout, or floating in a corner. Streaming comes from the service, so you host no audio files.
Step 1: Generate the player snippet
More on both modes in the embedded versus floating demo.
-
Log in at a.electricblaze.com; new users sign up from the same screen.
-
Choose Create New Widget and the Music Player type.
-
In Layout, switch the source to Spotify or SoundCloud and paste the embed code copied from the service.
-
Pick floating or embed mode, then height and screen position.
-
Copy the snippet from Add to website.
Step 2: Add the code to your pages
How to add music player HTML markup to your files differs by mode:
- Embed mode: paste the snippet inside the section where the player belongs, such as a Music or Releases block.
- Floating mode: paste it just before the closing body tag, ideally in a shared footer include so every page gets it.
- Upload or deploy, then reload with the cache cleared.
- Check phones: the floating player should not cover your menu button or a cookie notice.
Use one mode per page. An embedded copy plus a floating copy means two players competing for attention.
How to add Spotify playlist to HTML and what to expect
The Share menu of any public Spotify playlist includes Embed playlist; the code it gives goes into the widget’s Layout tab. The playlist has to be public. That is all there is to how to add Spotify playlist to HTML with this widget; SoundCloud works the same way through its Share dialog.
- Autoplay: browsers block audible autoplay before any click or keypress on the page, so design around a visible play button.
- Multi-page sites: each link loads a new document, so a floating player usually restarts. Single-page apps can keep it playing if it lives outside the routed view.
- Previews: Spotify may give listeners who are not signed in short previews instead of full tracks.
Band sites built as a single index.html often place the embedded player right under the hero image with tour dates and a grid of recent music videos below it, while the floating mode suits larger sites with separate pages for news, shows and merch.
Music on a coded site: FAQ
How to create music player using HTML and CSS only?
HTML and CSS can style an audio element, but next, previous and playlist logic needs JavaScript. The widget skips that work when your music is on Spotify or SoundCloud.
Can I play my own MP3 files with the widget?
No, the widget is a front end for Spotify and SoundCloud streams. Self-hosted files belong in an audio element.
Will the player slow my site?
Its script is fetched without blocking rendering, so your text and images show up before the player.
Further reading
General embedding for coded sites, the player overview and other widgets:
Put your playlist on your site
Grab your playlist embed, pick inline or floating, and drop the snippet into your markup.
Create a widget