Explore the community Forums Lectora Lectora Suggestions Auto start audio control via variable

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #346179 Score: 1
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    10 pts
    @approg

    Add a new system variable called, say, autoStartAudio and it has these settings:

    1. 0 – whatever autostart setting a piece of audio has is what it does
    2. 1 – all audio autostart settings are over written with “do not autostart”
    3. 2 – all audio autostart settings are over written with “do autostart”

    I’ve been spending ages coding a title that allows the user to choose whether or not audio autostarts. It would be good if I could just toggle a variable value instead.

    This post has received 1 vote up.
    #346366 Score: 1
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    17 pts
    @wheels

    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?

    This post has received 1 vote up.
    #346458 Score: 0
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    10 pts
    @approg

    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.

    #346533 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    337 pts
    @ssneg

    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.

    #347456 Score: 0
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    10 pts
    @approg

    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?

    #348756 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    10 pts
    @JasonADal

    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!

    #354067 Score: 0
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    10 pts
    @approg

    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.

    #354093 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    10 pts
    @JasonADal

    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.

    #354108 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    145 pts
    @Klaatu

    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.

    #354141 Score: 0
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    10 pts
    @approg

    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.

    #354143 Score: 0
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    10 pts
    @approg

    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.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.