Adding JS Html5 Audio Player to Description

[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.

[barco57]

Well, I got it too function in my test store but I had too put the call to the audio tag after the actual description otherwise the description would not display, but it plays. I also had to futz around with paths with this script because I have my test site in a sub directory under a wordpress. I will send you a private message with the url

[chriscana]

Doesn't seem to matter if i use the leading / or not in the code. Even tried direct call re: http:// full url path

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

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

which i currently have in my /includes/templates/template_default/common/html_header.php

Then called by adding the following to the description field for the product

<audio src="/path/to/file.mp3" preload="auto" />

I got the private message seeing it working in wordpress, but this is direct zen-cart only (not WordPress). Css isn't really a concern right now because i cant seem to get any javacript player to render after adding scripts to the header of /includes/templates/template_default/common/html_header.php and then calling them through html calls in the description field for a product. It's not a problem of zencart not able to take html code in the description field (confirmed by adding an img tag and it renders).

[barco57]

I have no idea how you decided that was a Wordpress.... so I'll drop the url here http://dashingcatstudios.com/155_tes...&products_id=1

Why don't you view source

<meta name="generator" content="shopping cart program by Zen Cart&reg;, http://www.zen-cart.com eCommerce" />

[mc12345678]

Doesn't seem to matter if i use the leading / or not in the code. Even tried direct call re: http:// full url path

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

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

which i currently have in my /includes/templates/template_default/common/html_header.php

Then called by adding the following to the description field for the product

<audio src="/path/to/file.mp3" preload="auto" />

I got the private message seeing it working in wordpress, but this is direct zen-cart only (not WordPress). Css isn't really a concern right now because i cant seem to get any javacript player to render after adding scripts to the header of /includes/templates/template_default/common/html_header.php and then calling them through html calls in the description field for a product. It's not a problem of zencart not able to take html code in the description field (confirmed by adding an img tag and it renders).

This suggests that likely the load sequence of the javascript plays as an issue. What of the. Js files load before jquery does? Also, what is the content of jscript.jquery.min.js at least the header or version information?

Next do you have a .htaccess file in the root of your store and does it limit the file types allowed to be loaded? If so does it permit this video type?

[chriscana]

No .htaccess limits on file types.

I am putting this at the top of the html_header.php in /includes/templates/template_default/common - putting right after meta so I believe it is loading before jquery, but also I think this is a more simple player for testing that shouldn't matter the jquery load?

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

Then in admin products description field in admin I am adding

<audio src="/path.to/mp3/audio.mp3" preload="auto" />

And nothing.

barco57, where did y ou add your code to the header and which file and location?
What code did you use in you description field? I will see if I can match since you are getting it to render in your store.