Preloading an audio file for quick playback

[Snir Barzilay]

Hello all,

I mean to display the same audio mp3 file simultaneously with a visual stimulus. however the first time I play the audio it is delayed with regards to the visual stimulus.

How can I preload the audio file so it will always be ready to be played at the start of each trial?

this is the solution I have tried so far:

{type:'custom',fn:function(){

API.addGlobal({audioObj: new Audio("./images/ScreamLady.mp3")});

var global = API.getGlobal();

// var audioObj = new Audio('./images/ScreamLady.mp3');

global.audioObj.addEventListener("canplaythrough", event => {

  /* the audio is now playable; play it if permissions allow */

  global.audioObj.play();

});

}},

Thanks,

Snir

[Elad Zlotnick]

Hi Snir,

The simplest solution is probably to load the media stimulus at the the beginning of your task (outside of the sequence).

API.addGlobal({audioObj: new Audio("./images/ScreamLady.mp3")});

Then it has time to load while participants read instructions etc. 

Then in an action you can directly call:

{type:'custom', fn: function(){ global.audioObj.play() }}

If you want to be extra sure that the audio had time to load you can create a loading trial, and have it finish when the audio has loaded.

It can look something like this (not tested):

{
    input: [

        {

            handle: 'loaded', on: function(inputObj, canvas, stream){

                var $listener = stream();

                global.audioObj.addEventListener("canplaythrough", $listener);

                return $listener;

            }

        }

    ],

    layout: [

        { media: 'loading audio }

    ],

    interactions: [

        {

            conditions: [{type:'inputEquals', value: 'loaded'}],

            actions: [{type:'endTrial'}]

        }

    ]

}

[Snir Barzilay]

Hey Elad,

Thanks for the reply. I still encounter some problems though. 

The first solution still presents a noticable and variable delay between the visual stimuli and the audio playback.

The second solution doesn't work. It throws and error at the input stage and freezes the task.  

[Elad Zlotnick]

Hi Snir,

I fixed a bug with custom inputs.

The following now works for me:

define(['pipAPI', 'lodash'], function (APIconstructor, _) {

    var API = new APIconstructor();

    var global = API.addGlobal({ audioObj: new Audio('./images/ScreamLady.mp3') });

    API.addSequence([

        {

            layout: [{ media: 'Loading audio' }],

            input: [

                {

                    handle: 'loaded',

                    on: function (inputObj, canvas, stream) {

                        var $listener = stream();

                        global.audioObj.addEventListener("canplaythrough", $listener);

                        return $listener;

                    }

                }

            ],

            interactions: [

                {

                    conditions: [{ type: 'inputEquals', value: 'loaded' }],

                    actions: [{ type: 'endTrial' }]

                }

            ]

        },

        {

            stimuli: [

                { handle: 'fixation', media: '+' },

                { handle: 'cue', media: 'cue' }

            ],

            interactions: [

                {

                    conditions: [{ type: 'begin' }],

                    actions: [

                        { type: 'showStim', handle: 'fixation' },

                        { type: 'setInput', input: { handle: 'showMyStim', on: 'space', duration: 400 } }

                    ]

                },

                {

                    conditions: [{ type: 'inputEquals', value: 'showMyStim' }],

                    actions: [

                        { type: 'resetTimer' },

                        { type: 'hideStim', handle: 'fixation' },

                        { type: 'showStim', handle: 'cue' },

                        function () { global.audioObj.play(); }

                    ]

                }

            ]

        }

    ]);

    return API.script;

}); 

[Snir Barzilay]

Thanks!

I have tried your'e new method, however it throws the same error and get's stuck on loading audio message. I saw you updated it in the API under version .5 does that have anything to do with it? because in my index.html I load version .3. 

On Saturday, January 25, 2020 at 10:42:41 AM UTC+2, Snir Barzilay wrote:

[Elad Zlotnick]

You should be loading v0.3 (of minno-quest), though you should probably clear your cache or load the task in incognito mode to get the latest version.

--
You received this message because you are subscribed to the Google Groups "Minno.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to minnojs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/minnojs/d5e58ea9-0d71-4beb-9091-920820228bb3%40googlegroups.com.

[Elad Zlotnick]

Hey Snir, has this worked for you? If so, please mark the question as answered.

[Snir Barzilay]

Hey Elad,

Yeah actually your bug fix and me deleting the cookies worked perfectly!

thanks alot!

do I need to press anything to mark it as answered?

[Michael Pinus]

Hey,

There should be a button at the bottom of each post (only in the web interface, not the email notification).

quirks/caveats:

1. I'm not sure if it's a feature exclusive to group moderators or not, so please let me know if you can't see this.

2. I've encountered a problem where I can't mark a post as 'best answer' on questions I asked. Kind of counter-intuitive on google-groups' part.  ¯\_(ツ)_/¯

I suggest a workaround by using the upvote/helpful feature. If a non-moderator asks a question, and it was answered, they should mark the answering post as 'I think this reply is helpful' (the green up arrow).

Once every few days, a moderator (Mayan Navon or me) would review all the posts not marked as answered and, if not immediately clear by the conversation, we'll mark the most upvoted post as the best answer.