Using WP Audio Player in Product Descriptions - need help

I have followed this tutorial: http://designparc.com/2011/02/16/zen-cart-adding-audio-player-to-product-page/, but it is not working.

I know that I can use HTML in the product descriptions, can I use javascript too?

Here is the page I'm working on: http://livingmagick.com/index.php?main_page=product_info&cPath=31&products_id=200

The player will not show up on the page. Any ideas?

Thanks!
Jadzia

Quick tip:
View that page (of your store) in your browser.
Right-click on the screen and choose "View Source". That'll bring up the raw HTML which drives the page.
Search that page for productDescription.
Just below that you'll see the javascript that you copy-and-pasted (instead of retyping it, which would have been better in this case).

If you look carefully, you'll see that the double-quote marks (") in the blog article you followed are "fancy quotes" instead of proper regular double-quotes.
Fix them to be proper quotation marks and things will work better.
Probably would be good to tell the original author about it by posting comments to their article.
Nothing wrong with directly asking them for support for something they post especially when it doesn't work properly ... ;)

Important lesson: It's not always wise to blindly copy+paste stuff from one website to another. Often there are hidden characters that will cause problems, or in this case, fancy characters created by the original author using a text editor that's incompatible with writing clean HTML code.

Thank you! That worked, it shows up and plays just fine now.

I will post a comment on the authors page because there were a few things during the process that were not as the author described.

Thanks again!

I would love to hear what you did different than "what the author described". I tried doing the exact same thing and cant get it to work! I'm banging my head on the table... Please let me know.

Hello Jonny,

I will get back to you soon with all of the adjustments that I made to get the audio player to work. I just need to find them.

Will post tomorrow.
~Jadzia

Hello Jonny,

Here is the article with my comments:

So far this works on FireFox, Chrome, Safari & Opera for Mac (tested Feb 16, 2011). GOTTA CHECK PC browsers! It works on PC browsers too.

1. Add audio-player.js file to site. It gets added to the head section of the site by adding it to the jscript folder (upload to: root > includes > templates > Your Theme Name > jscript):

You may have to create your own jscript folder, if it doesn't exist already.

jscript_audio-player.js (MUST add the jscript_ tag to the front of the file name in order for it to show up in the header of the site)
Very important to add that jscript_

2. Add player.swf file to site. (upload to: root > includes > templates > Your Theme Name)

3. Add to tpl_header.php file, line 196, (upload to: root > includes > templates > theme245 > common):

Correction: I added the following code to root > includes > templates > template_default > common > html_header.php. The following code also needs to be retyped in an html or plain text editor. You will find that the quotes are the wrong kind and that there are several other small errors. Also, don't forget to replace the file path with Your file path!

<!– BOF – WP Audio Player, Standalone http://wpaudioplayer.com/standalone/ –>

<script type=”text/javascript”> AudioPlayer.setup(“http://www.100yearsofmusic.net/includes/templates/theme245/player.swf”, { width: 290 }); </script>

<!– EOF – WP Audio Player, Standalone http://wpaudioplayer.com/standalone/ –>

4. Add MP3 directly to Zen Cart product page via Admin:

Again here, retype the code given as there are several errors in it. This just goes in your product page, but make sure you have the plain text editor on in Zen Cart and not the HTML/WYSIWYG editor option. The HTML/WYSIWYG will scramble your code every time you go to edit it. Again, replace the file path with your own.

<p id=”audioplayer_1″>Audio Player 1</p> <script type=”text/javascript”> AudioPlayer.embed(“audioplayer_1″, {soundFile: “http://www.100yearsofmusic.net/media/pops-song-snippet-the-home-team-band.mp3″, titles: “Pop’s Song”, artists: “The Home Team Band”, autostart: “no” }); </script>

Here is my code:
For html_header.php:

<script type="text/javascript"> AudioPlayer.setup("http://livingmagick.com/includes/templates/lite_red/player.swf", { width: 290 }); </script>

For the Product pages:

<p>Song Title</p> <p id="audioplayer_1">Audio Player</p> <script type="text/javascript"> AudioPlayer.embed("audioplayer_1", {soundFile:"http://www.100yearsofmusic.net/media/pops-song-snippet-the-home-team-band.mp3", titles:"Pop's Song", artists:"The Home Team Band", autostart: "no",}); </script>

Also, if you want multiple players on the same page they will look like this:

<p>Song Title</p> <p id="audioplayer_1">Audio Player</p> <script type="text/javascript"> AudioPlayer.embed("audioplayer_1", {soundFile:"http://www.100yearsofmusic.net/media/pops-song-snippet-the-home-team-band.mp3", titles:"Pop's Song", artists:"The Home Team Band", autostart: "no",}); </script> <p>Song Title</p> <p id="audioplayer_2">Audio Player 2</p> <script type="text/javascript"> AudioPlayer.embed("audioplayer_2", {soundFile:"http://www.100yearsofmusic.net/media/pops-song-snippet-the-home-team-band.mp3", titles:"Pop's Song", artists:"The Home Team Band", autostart: "no",}); </script>

The next one would be audioplayer_3, make sure to to change it in both places of the code.

I hope this helps!