HTML5 Audio Popup Window With Music Selection
Song selection continuous music popup window script
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.
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.
Download the popup player (.zip)
Options
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; }
}
Notes
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
Continuous Website Music
Plugin script to allow for continuous website sound across pages.
About HTML5 Design
Understanding what HTML webpage design and CSS is.
HTML5 Video
HTML5 website video player for any web project setup.
Mp3 Musician Templates
Downloadable responsive HTML website templates for musicians.