HTML5 Audio Popup Window With Music Selection

Song selection continuous music popup window script

Pinned Note Audio Popup
One problem with adding website music is that the sound will stop as soon as the user clicks a link to go to a different webpage. By adding a music popup, the music will continue to play even as a user browses your website. Works with all HTML websites and web templates, and is also compatible with responsive design sites.

Click to View Popup Music

Download & Instructions
Use the following link to download the .zip file with all music player files. Create a folder named "music-pop" inside your website or template folder. Place the files from the zip download into this folder. Open the "help-music_popup.html" and follow the directions.

downloadDownload the popup player (.zip)

This add-on can be an auto popup on page load, or a link can open the popup. You can add more song buttons and edit all colors and backgrounds. See the included help page for directions and options.

Hiding the music play link on mobile
Mobile devices like Apple products have some issues with playing music through websites. You can optionally hide the open popup link on some devices. Add a class to your link like the following:

<a href="javascript:popmusic('music-pop/music.html')" class="hide-mobile">Play Music</a><br>

In your "media-queries.css" in the 482 section add the following:

.hide-mobile { display: none; }

If you do not have a "media-queries.css" you can add the following css code to the bottom of your style .css file instead:

@media handheld and (max-width: 482px),
screen and (max-device-width: 482px),
screen and (max-width: 482px)
.hide-mobile { display: none; }

This audio player uses HTML5 audio code with fallback embed and object code for older non-HTML5 browsers. An "ogg" audio file option is included for non-mp3 enabled HTML5 web browsers like Firefox and Opera. If you replace the music files, replace both the .mp3 and .ogg files to be compatible in all browsers.

The music popup webpage uses HTML5 and CSS3 code with HTML IFrames and has been tested in, and is compatible in, Internet Explorer, Safari, Google Chrome, Firefox and Opera web browsers. It is not a responsive design webpage.

More Mp3 Player Addons:
Continuous website music, sound or video
xmp3mini mp3 player

Related Topics:
Adding sound to your template
Audio on hover