Audio cutting off only in some browsers

[rbibbs]

Hello,

My experiment is a discrimination task that uses a 4IAX design, so audio comes in two pairs back to back, with one pair being same, the other different; e.g. AA-AB.
The problem is, in certain browsers (namely Firefox) the audio for each member of each pair seems to get cutoff; only half of the audio plays. For example, if the complete audio is something like [bɪtəf], in Firefox you only end up hearing [__təf]. The audio works 99% fine in Chrome and I believe Safari; the only hiccup is the very first audio file in the practice trial has the same cutting off problem, but the rest of the trials don’t suffer.

I’ve tried a couple of potential fixes from other forum posts, such as changing some settings in a PennElement_audio.js, but to no avail.

There is a total of 60 .wav files that get accessed throughout the entire experiment. Here’s sample code for the trial:

Template( "G-context 1-4.csv",
    currentrow => 
    newTrial("G.block",
    
        newText("tooslow", "Too slow!")
            .css("font-family", "Helvetica, sans-serif")
            .css("font-size", "24px")
        ,
        
            
        newTimer("wait", 1000)
            .start()
            .wait()
        ,
        newTimer("ISIwithin", 50)
        ,
        newTimer("ISIbetween", 750)
        ,
        

        newVar("RT")
            .global()
            .set( v => Date.now() ) // Date.now essentially gets the current timestamp
        , 

        newAudio("audio1",currentrow.audio1).play()
        .wait()
        ,
        getTimer("ISIwithin").start()
        .wait()
        ,
        (currentrow.audio2==currentrow.audio1?getAudio("audio1"):newAudio("audio2", currentrow.audio2)).play()
        .wait()
        ,
        getTimer("ISIbetween").start()
        .wait()
        ,
        newAudio("audio3",currentrow.audio3).play()
        .wait()
        ,
        getTimer("ISIwithin").start()
        .wait()
        ,
        (currentrow.audio4==currentrow.audio3?getAudio("audio3"):newAudio("audio4", currentrow.audio4)).play()
        .wait()
        ,
        
        newCanvas("discrimination", 800, 200)
            .add(225,0,
                newText("whichpair", <code>Which pair of sounds was different?</code>).cssContainer({"font-size": "150%", "color": "black"})
                .css("text-align","center"))
            .add(0,100,
                newText("firstpair", `<p><strong>First pair</strong></p><p>'F'
).cssContainer({"font-size": "150%", "color": "black"})
                .css("text-align","center"))
            .add(700,100,
                newText("secondpair", `<p><strong>Second pair</strong></p><p>
'J'`).cssContainer({"font-size": "150%", "color": "black"})
                .css("text-align","center"))
            .center()
            .print()
        ,

        newTimer("cutoff", 2000)
        .start()
        ,

        newKey("cur.response", "FJ")
            .log("all") // this will log the first key press
            .callback( getTimer("cutoff").stop()  )
            .callback( getVar("RT").set( v => Date.now() - v )) // here is where we can subtract the more recent timestep (after hitting a key) from the old timestamp v; this gets you RT in terms of time to press button
        ,
        

        
        getTimer("cutoff")
        .wait()
        ,    
    
        getKey("cur.response")    
            .test.pressed()
            .failure(newText("slow", `<p>Too slow.</p><p>
                Press SPACEBAR to move on.</p>`)
                .log()
                .print()
                .settings.center()
                .cssContainer({"font-size": "140%", "color": "red"})
                .css("text-align","center")
                ,
                getCanvas("discrimination").remove(),
                newKey("spacebar" , " ")
                    .wait()
            )


    )
  .log( "presentation"   , currentrow.presentation)
  .log( "pair"  , currentrow.pair)
  .log( "context", currentrow.context)
  .log("first", currentrow.first)
  .log( "RT"   ,getVar("RT") )
);

Here’s a demo link for the study: https://farm.pcibex.net/r/ETQoCi/

• This topic was modified 1 year, 6 months ago by rbibbs.

[Jeremy]

Hello,

I am unable to replicate the problem, using either Chrome or even Firefox: in both browsers, I seem to hear the audio files fully (sometimes the very first phoneme sounds more like a glottal stop to me though, but maybe that’s intentional)

What happens if you try to place all the newAudios at the beginning of the trial instead, and use getAudio("...").play() wherever you are currently using newAudio("...").play()? Does the situation improve?

Jeremy

[Author]

Posts