Embedded audio player will not display

Hi all,

I had originally posted this in RW help, but now suspect (through process of elimination) that my problem may lie with Foundation. (I’ve submitted a help ticket, but am still waiting…)

The player displays properly from a simple HTML page or in a Stack (using any of the Realmac themes), but not with Foundation. Ive ruled out Stacks 3 and Foundation update conflicts by rolling them both back and seeing no difference.

The embedded audio player is VoiceZam, and uses HTML and JS code.

Here’s the code:

[code]

[/code]

Any help is greatly appreciated!

Hi @miketee,

I got your problem solved - I just had to add http: in the front of all urls (got this tip from @joeworkman). See the code for your player below:

[code]

[/code]

Simply post this in the html stack and you should be okay. Don’t forget to cancel your ticket with @joeworkman, as the foundation theme is pretty awesome. Oh and I solved my issue as well… :grinning:

Justin

Thanks Justin…I had already tried to no avail. I have messaged Joe directly in hopes of him having a look.

Glad you got yours going!

MT

OK…so, still haven’t been able to figure this one out :frowning:

@joeworkman support were not able to find a fix yet, but the player’s creator is firm that the problem is not with his code.

So, what do Foundation, Nick Cates’ “Reason”, and Yuzooltheme’s “Split” themes have in common???

Because these are the ones on which this player won’t show.

NOTE: In foundation, the player loads on the theme alone, but as soon as I add Site Styles or another JW Stack, it disappears!

Anyone?

Thanks in advance for any help :slight_smile:

Normally this stuff is pretty easy to find the issue since the resulting code will normally thrown an error in the dev inspector. However, in this case their code is throwing no errors at all. Since I have no clue how their code works, I have no clue why its failing.

@joeworkman - So what do themes that it doesn’t work with have in common?

Good question. The road to the solution is probably in the answer to that question. Too bad that that voicezam does not want to support their product.

In all fairness @joeworkman , they are trying on their end…but they are a bit baffled too, since it works on just about everything else except Foundation and a few other themes.

I put money into RW, Stacks, Foundation, and VoiceZam. It’s no fun to think that I might have to compromise with one or more of them…

I can’t go down “that road” to search out the solution - I am but a simple (non-coding) consumer, trying to make a better website.

Unfortunately the ball is in their court. Its their JavaScript. I do not know how it functions. I would think that why would have a way to debug their own code. Do they have some sort of list of requirements?

They don’t list any requirements as such on their website. I will put this back to them once again, and come Monday, make some critical decisions.

Happy weekend to you @joeworkman and all…

@miketee I just did a few quick experiments with your code. I found it worked in the Alpha theme that ships with RapidWeaver but did not work in any addon themes. I switched over to using my free Blank theme. When I ran diagnostics on the page and had the theme in debug mode, I got lots of error messages back. Based on this I was able to find a fix, to enable this code to work in my themes (and possibly others). You will need to split the code into two fragments. Firstly place this code wherever you want the player to display on your page:

<div id="voiceDemos"></div>

Then in the theme index.html file, place these two Javascript calls immediately before your closing </body> tag at the bottom of the markup:

<script>
    // Enter your account ID. You can find this under the Menu item: Help | About 
    var ACCOUNT_ID = 'a20c8faf-176b-4918-b18a-7cdf5a41a6be';
    // Enter the title of this page. Clicks will appear in your Zamtistics
    var PAGE_NAME = 'Demos page for Mike Tobin';
    // NOTE: value can be either 'inline' OR 'popup'
    var RENDER_MODE = 'inline';
    // Enter a Demo ID for the default demo to display when the player launches
    // NOTE: Demo ID's can be by found in the Showcase by clicking the
    //   gear icon for a specific Demo
    var DEFAULT_DEMO = 1623 ; //  Demo Category Bilingual Sampler ;
    //Handle AutoPlay On PageLoad
    var AUTO_PLAY = false;
    //Option to show contacts button in player
    var SHOW_CONTACTS = true;
</script>    
<script src="http://www.voicezam.com/clientScripts/FixedScript.js"></script>
<script src="http://www.voicezam.com/clientScripts/WebLinking2.aspx"></script>

Because these two Javascript calls are asynchronous, they must be called after all other theme and stack Javascript code. Not sure why nobody else could spot this problem! I just replicated the same steps in the Flood and Solstice themes to test the modification, and it was working perfectly for me in those themes too. The player loads and the audio samples play without any problems.

Hi @willwood,

First off…THANK YOU for taking some time to experiment with this! I had actually tried your Blank theme, hoping it would be my alternative to Foundation, if necessary.

Before I set this up to test, I want to make sure I understand your instructions correctly. By saying “place this code wherever you want the player to display on your page”, does that include in an HTML stack?

Thanks!

Mike

An HTML code stack should work fine. That’s what I was using to test this with.

@willwood

Hi again Will,

Thank you again for helping me out with this! The player displays in your Blank theme as well as Foundation and others.

One last question for you if I may: From what you could see when you ran your tests, would you consider this player to be “responsive”? The dev. claims that it is, but now that I can actually get it to display, placement appears to be quite tricky! Unfortunately, the player’s dev offers no support for placement and styling :frowning:

The 2 things I’ve noticed:

  • On it’s own, the player doesn’t seem to fill an HTML stack, and always displays to the left.
  • If any adjustments are made to padding, margin, etc., some of the player gets cut off!

I’m suspecting the is probably a CSS thing, but before I go spending more hours learning some basic CSS, I’d like to at least confirm that the player is responsive and my efforts will not be in vain!

Again, thank you SO much for your help on this…You provided a HUGE breakthrough!

Cheers,

MT

@miketee The audio player appears to be embedded into the page as an iFrame, with a fixed width of 320px; which I suppose you could class as being iPhone compatible, but maybe not truly responsive in the sense of scaling to fit the container it is placed within.

I could not find any combination of CSS code to remove the fixed width and stretch the player to the full width of the container. My guess would be that because this player is generated dynamically, there might be a special Javascript variable you need to add, under your account ID info code. Or perhaps a setting you change on the VoiceZam website?

I searched the website but could not find any specific reference or examples of VoiceZam being responsive. Most of their marketting seems to focus on the player being Flash-free, and therefore mobile compatible.

@willwood

Hey Will,

So, I shared your discovery with VoiceZam, and probed a little deeper with responsive thing. What they have currently is a setup that is responsive, but as you said, only up to 320px. But the good news is, they have a new version of their player in the works that should be responsive the other way too. This will help to fill up a container, particularly on larger screens.

Thanks to you, I’ve finally been able to play around with the player within Stacks / Foundation. Thank you also for the Black theme - I’m doing an alternate build on it to see how things show. So far so good!

There’s nothing seriously wrong with their code. As I found it does work in RapidWeaver and on the face of it their service is ideal for some people like yourself needing to get a simple audio playlist working in a webpage. However there are a few extra steps you need to follow for getting this to work in a RapidWeaver website. Hopefully it’s of help to you and others stumbling upon this post in future.

Into the Autumn, I will be working on a range of new audio and video stacks for RapidWeaver 6 / Stacks 3 which will have pretty ambitious feature sets, so these might be of interest to you too.

1 Like