Auto start audio control via variable

Yep, that's how I'm doing it the moment and it gets even more cumbersome.

For each audio there is a Play and a Pause button. When the audio is playing the Pause button is displayed. When the audio has stopped/paused the Play button is displayed. So I need additional actions to hide/show the play/pause buttons when the page is shown.

Thanks for this use case. If I were approaching this problem I would probably do this:

1. Keep the autostart property unchecked on each audio
2. Add an On Show - Play action to each audio
3. Make this action fire conditionally on the value of some variable
4. This way I could just toggle the value of the variable to enable or disable autostart

Is that how you are handling it and it feels to cumbersome?

So I need additional actions to hide/show the play/pause buttons when the page is shown.

Use a player skin instead of a number of custom buttons. Saves a lot of time. Can be customized easily to look the way you need it to look.

I've had success using CSS to affect player skins but I've had no luck building a custom skin. I've carefully followed the instructions on building a custom skin but when I load one into Lectora nothing appears. Is there a dummy's guide somewhere that I can follow?

I've been working on a very similar functionality for my course and have been using separate buttons for both play/pause audio and closed captioning, leaving only the volume and time rail on the default player.

I've attached a sample that uses check boxes to set the audio to start on each page. One variable is based on the check box to toggle the user preference, a second variable is used to determine the "state" of the autostart feature. It's a bit cumbersome with the actions and variables, but it is a reasonable solution for those (like me) not CSS, jQuery or JavaScript saavy.

That said, I also have a custom CSS file that changes the appearance of the default skin with markup in the file that indicates what I've changed and how it affects the appearance. There are a couple things I'm still struggling to customize, as noted on the first page with audio, so if someone has ideas on the comments there, I'd be very thankful!

Are you using the CSS file that was included in the sample to adjust the player in desktop mode or is it a completely unique skin? I can think of a couple of ways you could make those changes in the different design modes.

In the mejs-play button section, add a width and height to the properties in the CSS for the player. If you have a pause and stop button that toggle on the player, do the same for the mejs-stop and mejs-pause sections. Otherwise, you could take the image(s) you're using, resize them in SnagIt and save it(them) as new images and replace the filename in the same place. The resize in the CSS may be the easier of the two if you're using the CSS file to make the changes.

Someone may want to jump in to speak more to how that works in the different modes, as I have no experience with the mobile design options in Lectora.

Ok, I've built a custom skin with just a play/pause button(the slider bar, volume... are not wanted).

How do I resize the play/pause button for RCD titles? The button needs to be much larger in phone modes.

Here's an easy cross browser solution. We are going to add a checkbox that the user will select if they want to turn on audio autostart. When selected it will store a variable (we'll call it 'audioAutostart') in local web storage. There are two options, localStorage and sessionStorage. They both will accomplish the same thing except localStorage persists even after the browser is closed; sessionStorage does not. We'll use sessionStorage.

Now all we have to do is on load of subsequent pages with the audio player on it check to see the value of that variable. If it is true then we'll start the player. All through a few lines of JavaScript (no jQuery necessary).

On the page with the checkbox (in my example the checkbox HTML Name is 'check40' (no quotes). You have to add the 'id'.

// Store the checkbox ID in a variable for easier use.

var sound = document.getElementById("check40id");

// If the checkbox is selected (checked) we will store a session variable with the value of true that

// will be accessible from any page until the browser is closed.

if (sound.checked) {

sessionStorage.setItem("audioAutostart", "True");

} else {

sessionStorage.setItem("audioAutostart", "False")

}

We could get away without the 'else' portion of the conditional but I'll leave it there in case you want to be able to turn it off.

On the page with the audio player we will check the audioAutostart variable and if it is true we will initialte the play fuction of the player.

// The HTML Name of the audio player shows audio220 in Lectora. You have to add 'Media' (no //quotes) to the name in order to be able to call the play() function on it.

if (sessionStorage.getItem("audioAutostart") == "True") {

audio220Media.play();

};

Both localStorage and sessionStorage can be extremely useful to pass information between pages of a lesson. Use localStorage if you want the information to persist after the browser is closed (like a cookie) and use sessionStorage for the one session only.

This will work with the video player as well and with a little imagination I'm sure you will find other uses.

I created my own skin in which I turn off all the elements that aren't necessary but you did give me an idea. I added some custom CSS to resize the button on a phone.

@media (max-width: 600px) {

div[id^="audio"] {

transform: scale(2);

}

}

I'll need to play with the various sizes and orientation settings to get it working just right but the test I built shows that this will work.

Thanks for that.

The one issue with doing it using JavaScript is that everyone that handles the title needs to know to set the HTML Name for the each piece of audio that is to (maybe) auto start: if ever someone deletes a piece of audio and replace it with another or if someone copies and pastes the interaction it doesn't work :-(

Also I don't understand why you use sessionStorage when you could use a Lectora variable and use it's value to trigger the JavaScript that auto starts the audio.