Adding JS Html5 Audio Player to Description

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

[mc12345678]

So couple of things. If your javascript code loads before jquery and needs to use jquery, then it will get "bumped" from execution. Load occurs in order from top down in the source view. Also, your previous test appears to have placed an image in the root of your store and satisfactorily loaded. Being in the directory indicated, there is at least one .htaccess in line to that location and the file type may be limited. My suggestion would be to place the load of your jscript to after load of jquery and to place the image temporarily in the root directory.

As to locating where barco57 placed the code, should be able to determine by review of the source code, searching for adjacent information using developers toolkit to find the relative load location. But of course could also wait to hear from barco57.

[chriscana]

I got it working. It was one of a few things it could have been:

I renamed the audio.min.js in the jscript directory to jscript_sampleaudio.js, to comply with the jscript_ naming convention in the jscript directory, and to put it alphabetically under jquery. I'm not sure if scripts in this directory auto-load in order (I had thought I read somewhere they do.)

I called the mp3 from the /media directory since I knew for a fact .htaccess allowed mp3 from here. I had previously just created a new directory in the root for my mp3 previews.

Also, after all changes, the player was still not showing when i hit the preview button after adding the code in the description field of the product. It wasn't until I actually checkedd in the live store where I saw it was rendering there. Other simple html calls like the img tag would display in the admin preview of the product, so I assumed this would as well.

I appreciate all the help.

[mc12345678]

I got it working. It was one of a few things it could have been:

I renamed the audio.min.js in the jscript directory to jscript_sampleaudio.js, to comply with the jscript_ naming convention in the jscript directory, and to put it alphabetically under jquery. I'm not sure if scripts in this directory auto-load in order (I had thought I read somewhere they do.)

I called the mp3 from the /media directory since I knew for a fact .htaccess allowed mp3 from here. I had previously just created a new directory in the root for my mp3 previews.

Also, after all changes, the player was still not showing when i hit the preview button after adding the code in the description field of the product. It wasn't until I actually checkedd in the live store where I saw it was rendering there. Other simple html calls like the img tag would display in the admin preview of the product, so I assumed this would as well.

I appreciate all the help.

Lack of display on the admin side during preview would likely be relate to a lack of loading the necessary javascript on the admin side. You could add it as well, but be advised that in ZC 1.5.5, jquery on the admin side is loaded in tpl_header which could also cause previously loaded applicable javascript to be bumped.

As to file load order, yes, files are loaded alphabetically for jscript_ related files. This is performed by the function get_template_part in includes/classes/template_func.php.

Yeah though, got it fixed!