It seems lots of newbies and some not-so-newbies haven been running into problems getting audio to work properly with their landing pages. So hopefully, this will clear up the questions.
Advanced Readers: If you’ve already got this down, skip ahead to Get Fancy and you might learn something new 😉
Why Use Audio?
It’s pretty well known that audio on a landing page can increase CTR. This is especially true with PPV. Many times your pop-up window will be ignored if you don’t grab the surfers attention right away. Audio does just that. In other cases (like TrafficVance) your ad is often being shown in a pop-under window. Meaning, your ad is actually behind the main window they are viewing. That blows! So using audio is a great way to grab some attention.
This simplest and most cross-browser compatible way to embed audio is to use Nifty Player . This lightweight player is a real gem. It plays audio in mp3 format, is controllable by javascript, and is highly configurable.
Setup
Download and unzip niftyplayer from here. To keep things neat, I like to put my audio related files in a sub directory called “audio”. In that directory, put the 3 nifyplayer files and your mp3 file(s) like so:
niftyplayer.fla
niftyplayer.js
niftyplayer.swf
my-sound.mp3
Code Examples
One Instance (live demo)
This is the simplest way implementation. Not much to say about this except that you should note that the filename of the mp3 needs to be defined twice in the niftyplayer object code.
<html> <head> <script type="text/javascript" language="javascript" src="audio/niftyplayer.js"></script> </head> <body> <h1>Nifty Player One Instance</h1> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="165" height="38" id="niftyPlayer1" align=""> <param name="movie" value="audio/niftyplayer.swf?file=audio/my-sound.mp3&as=1"> <param name="quality" value="high"> <param name="bgcolor" value="#FFFFFF"> <embed src="audio/niftyplayer.swf?file=audio/my-sound.mp3&as=1" quality="high" bgcolor="#FFFFFF" width="165" height="38" name="niftyPlayer1" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object> </body> </html>
Two Instances (live demo)
In this implementation, both instances of niftyplayer are set auto play. Notice on line 10 and 20 where the players are assigned different ID’s. You should make sure to use distinct id’s for each instance of niftyplayer.
<html> <head> <script type="text/javascript" language="javascript" src="audio/niftyplayer.js"></script> </head> <body> <h1>Nifty Player Two Instances</h1> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="165" height="38" id="niftyPlayer1" align=""> <param name="movie" value="audio/niftyplayer.swf?file=audio/my-sound.mp3&as=1"> <param name="quality" value="high"> <param name="bgcolor" value="#FFFFFF"> <embed src="audio/niftyplayer.swf?file=audio/my-sound.mp3&as=1" quality="high" bgcolor="#FFFFFF" width="165" height="38" name="niftyPlayer1" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object> <!-- This is the second instance, notice the "id" on line 20 and the "name" on line 24 are both "niftyplayer2" --> <!-- Also notice, the sound file has been changed on lines 21 and 24 --> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="165" height="38" id="niftyPlayer2" align=""> <param name="movie" value="audio/niftyplayer.swf?file=audio/button-9.mp3&as=1"> <param name="quality" value="high"> <param name="bgcolor" value="#FFFFFF"> <embed src="audio/niftyplayer.swf?file=audio/button-9.mp3&as=1" quality="high" bgcolor="#FFFFFF" width="165" height="38" name="niftyPlayer2" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object> </body> </html>
Get Fancy
So far, the two examples have been set to have audio auto play and for the player itself to be visible. But like I mentioned Nifty Player is highly configurable…
Javascript Control (live demo)
In this example, we have two instances of niftyplayer. The niftlyplayer1 is set to be visible and autoplay as usual. The second instance, niftyplayer2 is set to be invisible, and not auto play.
Defining whether or not niftyplayer autoplays is done by setting the ?as=x flag. Where x is a 1 or 0 (true or false).
Hiding niftyplayer can be done by using CSS, or by simply setting the height and width parameters to 0 as I did in this example.
To accomplish triggering of the second instance, we are using the Javascript onClick function to fire the sound (see line 10 in the code). I placed the onClick inside the button tag, but you could just as easily place it inside a regular hyperlink “a” tag or even inside an img tag.
<html>
<head>
<script type="text/javascript" language="javascript" src="audio/niftyplayer.js"></script>
</head>
<body>
<h1>Nifty Player Javascript Controlled</h1>
<button type="button" onClick="javascript:niftyplayer('niftyPlayer2').play()">Click Me!</button>
<br>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="165" height="38" id="niftyPlayer1" align="">
<param name="movie" value="audio/niftyplayer.swf?file=audio/my-sound.mp3&as=1">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed src="audio/niftyplayer.swf?file=audio/my-sound.mp3&as=1" quality="high" bgcolor="#FFFFFF" width="165" height="38" name="niftyPlayer1" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
<!-- This is the second instance, notice the "id" on line 24 and the "name" on line 28 are both "niftyplayer2" -->
<!-- Also notice, the sound file and "as=0" has been changed on lines 25 and 28 -->
<!-- And finally, the width and height have been changed to "0" on lines 24 and 28 to make the player invisible -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="0" height="0" id="niftyPlayer2" align="">
<param name="movie" value="audio/niftyplayer.swf?file=audio/button-9.mp3&as=0">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed src="audio/niftyplayer.swf?file=audio/button-9.mp3&as=0" quality="high" bgcolor="#FFFFFF" width="0" height="0" name="niftyPlayer2" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
</body>
</html>
Beyond Nifty Player
Obviously this is targeted towards landing pages and affiliate marketing. But what if you want to embed audio in regular blogs or sites? Sure you can still use Nifty Player, but it’s lacking in some things. For example, it has no playlist functionality and if you’re trying to embed it in a WordPress blog or other CMS it can be a chore.
The Yahoo Media Player is pretty sweet. It’s got a slick player module that has more bells and whistles and works great. Best of all, you can get it working in 2 lines of code:
<a href="http://yourdomain.com/your-mp3-file">Put the title here</a> <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
And this is what you get:
Easy, huh?
Credits: Royalty Free Music by DanoSongs.com
Great stuff and very useful information. I am on my way to embed audio in my LPs! Thanks 🙂
Cool man, thanks for reading!
Kickass! This just planted the seed for a bunch of fun LP tweaks.
Thanks for posting the code, as well.
Glad you got some ideas. Using JavaScript to trigger sounds does give you a lot of options. Thanks for reading and commenting.
Gonna try this on my next PPVLP in about 20 minutes.
Thanks
Thanks for reading!
Thanks for this tutorial, man! I followed your instructions and I was able to get NiftyPlayer to work just fine 🙂
Just one question: Is there a way to resize the player? The height and width parameters simply crop the player box, but what I’m trying to do is make it smaller, not cut out part of the player box. Is there a way to do that?
I’d probably be satisfied with the cropping method (changing the height and width parameters), but when I do it, the “wrong” parts of the player interface are hidden. I want the buttons to show up, but instead only the slider is visible and that’s not really helpful.
Thanks again for this post!
You might be able to do what you want using CSS. Google “crop images using css”.
Thanks for reading and commenting!
Thanks for the great post. It’s perfect for pre-recorded audio that fits specific sites.
Do you happen to know of a dynamic text to speech script that could include whatever keyword or site the person was on?
Something similar to this post I found but that actually works.
http://jaystyles.com/free-text-to-audio-translator
Hi, Thanks for the good stuff.
May I know do you have the countdown timer script for LPs as well?