I would like to teach you how to create a pop-up mp3/m4a player for your website. This development is compatible with any framework you prefer to use. I like to develop in Joomla! but this pop up mp3/m4a player will work on any website framework. Dreamweaver, Drupal, WordPress, Wix, and more.
If you want to see this in action, visit http://www.inthebellyoftheblues.com/hear-the-music and click on a song.
1) create a folder in your website’s directory to hold the files
2) download and extract the javascript files found here: qtobject.js
3) place qtobject.js file and _MAC0SX folder into the folder from Step 1
4) place an mp3 or m4a into the folder from Step 1
The next step is to configure the .html that runs the pop up, copy this code into a blank .html document and save it to your folder from Step 1:
<html> <head> <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"><title>YOUR WEBSITE</title> <script src="http://www.YOUR_DOMAIN.com/YOUR-FOLDER/qtobject.js" language="JavaScript" type="text/javascript"></script> </head> <body style="background-color: rgb(256, 256, 256);"> <center> <form action="" method="post"><center><input onclick="self.close()" type="button" name="Button" value="Close Window" /></center></form> <script type="text/javascript">// <![CDATA[ // create the qtobject and write it to the page, this includes plugin detection // be sure to add 15px to the height to allow for the controls var myQTObject = new QTObject("http://www.YOUR-DOMAIN.com/YOUR-FOLDER/YOUR-MP3-FILE.MP3", "NAME", "400", "16"); myQTObject.addParam("autostart", "true"); myQTObject.write(); // ]]></script> </center> <noscript><p><center>You must enable Javascript to access this content.</center></p></noscript> </body> </html>
Make sure to append all RED fields with the appropriate information!
Next, all you have to do in call this .html. Wrap this tag around the text or image you want clicked to open the pop up.
<a href="javascript:void(0)" onclick="window.open('http://www.YOUR-DOMAIN.com/YOUR-FOLDER/YOUR-HTML-FILE.html',
'newWin','width=412,height=216')">YOUR TEXT OR IMAGE HERE</a>
Make sure to append all RED fields with the appropriate information!
That’s all there is to creating a pop up mp3 or m4a player in a website using html, css, and javascript. This technique is compatible with Android, iPhone, iPad, and all modern browsers.
