Adding JS Html5 Audio Player to Description

[chriscana]

I am unable to use the media manager built into zencart for audio previews due to the way my site is setup.

I have an html5 audio javascript player that I would like to use in the description field of individual products.

The directions for the player say

Add the following to the head

<head.>
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.cleanaudioplayer.js"></script>
<link href="/path/to/player.css" rel="stylesheet">
</head.>

and use the following code to call up the player

<div class="mediatec-cleanaudioplayer">
<ul data-theme="">
<li data-title="" data-artist="" data-type="" data-url="" data-free=""></li>
<li data-title="" data-artist="" data-type="" data-url="" data-free=""></li>
</ul>
</div>

Here is what I did:

Put jquery.cleanaudioplayer.js into includes / templates / <my template> / jscript
changed name to jscript_cleanaudioplayer.js (this directory needs this naming convention?)

Put the player.css in includes / templates / <my template> / css
changed name to stylesheet_player.css (this directory needs this naming convention?)

Didn't do anything witth jquery.min.js
because I believe jquery is already running (it was already in jscript directory)

I added the header code
<script src=/includes/template/<my template>/jscript/jscript_tcleanaudioplayer.js"></script>
<link href="=/includes/template/<my template>/css/stylesheet_player.css">
to includes / templates / <theme> / common / both the tpl_header.php and html_header.php
Also tried putting in the template_default / common / tpl_header.php and html_header.php files
(Wasn't sure if this was needed because I thought all css and jscript was loaded if named correctly and in appropriate directories?)

Added the following code to the description field of my product (filling in appropriate calls)

<div class="mediatec-cleanaudioplayer">
<ul data-theme="">
<li data-title="" data-artist="" data-type="" data-url="" data-free=""></li>
<li data-title="" data-artist="" data-type="" data-url="" data-free=""></li>
</ul>
</div>

When I save the product, the description field goes blank and no player appears. Even if there is existing text above the div class call in the description field, hitting save clears out entire description filed and render it blank when I try adding the code.

Any ideas?

[mc12345678]

Version of ZC?
Method of description field entry? (ie. Do you have ckeditor installed and when entering your html are you in source view?)

[chriscana]

ZC Ver 1.5.0
Configuration / My Store / HTML Editor only has option for Plain Text (no other option in the dropdown).
There is no option for the description field other than just entering text.

I have used html code in description before though just by entering plain text html code.

[mc12345678]

PHP version?

Have you tried modifying another product without adding the html to validate the relationship?

[chriscana]

PHP Version: 5.4.31

Not sure what you mean by modifying another product to validate. I have validated I can edit all products (I'm trying to add the javascript audio player via the description txt field). I have also validated I can add html code to the description txt field and have it render (by adding an img html to to display an image).

Important to note I''m not using zencart build in media manager to do this (cant the way my store is setup). Trying to add a javascript html5 audio player to the product by adding code to the description text field.

[mc12345678]

Was trying to eliminate other reasons for your description to go blank. ZC 1.5.0 is not considered compatible with PHP 5.4 without additional modifications. The fact that this page is now going blank and the description is going blank after the "simple" addition of what is truly just html code is unusual. If the PHP version was "recently" modified or something else modified about the site, then that could explain why now trying to add html code in the admin causes (if understood correctly) the admin description to go blank. If the issue is only a problem on the catalog side and the content on the catalog side is what is going blank, then that's an entirely different story.

So for clarification, is the problem that the admin information gets mangled when trying to add the player, is it the catalog side, or is it both? If it involves the catalog side (and admin is okay), providing a link to the site may also help diagnose the issue.

[barco57]

"When I save the product, the description field goes blank" - sounds more like a utf-8 issue.
go too phpmyadmin>the products_description table, find this product and look at what the description looks like in the DB.

[chriscana]

Well I am able to add a simple img html tag to my description so I don't think thats the case. Re: <img src="smiley.gif" alt="Smiley face" height="42" width="42"> will render fine. So does plain text, or any other simple html code.

I tried another javascript html5 audio player sans css to see if the css call was the issue.

Simple audio player:
http://kolber.github.io/audiojs/

For this, very simply I added the following scripts to my /includes/templates/template_default/common/html_header.php under the header

<script src="/includes/templates/template_default/jscript/audio.min.js"></script>
<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
</script>

Then, in the description field for the product I added the audio call (as directed by this player)

<audio src="/mp3/juicy.mp3" preload="auto" />

And the script wont render anything.

Seems about the same no matter what audio player script I try using the same method

[mc12345678]

Is your site in a sub-directory?

Have you tried adding the above code but omitted the first / whenever referencing something off of your store's path?

[mc12345678]

As for the css load, if you press f12 you should be taken to a Web diagnostic tool from your browser and be able to tell if/what css was loaded for the page. This is the same type thing someone trying to help from the forum would do in addition to performing an html validation check as broken html can also cause a problem particularly when javascript is involved.