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.
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.
@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:
// 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;
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?
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
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!
@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 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.
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.