Playing audio in HTML

[cslongman]

Hi,

I have been trying to work out how to play an audio file using HTML.

I am updating an experiment to integrate some rich contextual cues for certain runs of trials. I have worked out how to change the background to a pre-selected image (depending on the context) by using...

on_start: function(){
	document.body.style.backgroundImage = "url('img/Image1.jpg')"
	document.body.style.backgroundSize = "100% 100%" 
},

This seems to work with various plugins, so I think I have this bit sorted out.

After doing some digging around, it looks like this...

document.getElementById("myAudio").play()

Should do something similar, but play an audio file. However, this doesn't seem to work (at least, it doesn't work the way I want it to).

I have also tried...

<audio src="aud/Chirp1.mp3" autoplay loop>

with some success. I managed to get an audio file to play at the start of a given trial, but it stopped as soon as I left that trial (not what I'm after) and it didn't want to work in conjunction with the background image manipulation described above.

I have also tried to use the call-function plugin to get an audio file to start playing at one point in a run of trials, and end at another point, but had no luck with this either (though this may well be due to lack of experience rather than a flaw in the method).

Is there a way I can do this without using the audio plugins? I don't want participants to respond to the audio file, I just want it to play until they leave the context (after a handful of trials). That is, I need an audio file to start and stop independently of the rest of the trials/plugins, but I want to be able to choose when it starts and stops.

Any help would be much appreciated.

Many thanks,

Cai

[jodeleeuw]

Hi Cai,

I made a demo of this: https://hrkpo8wcrs.cognition.run/

Here's the source code:

var before_audio = {
  type: 'html-button-response',
  stimulus: 'Click to start',
  choices: ['OK']
}

var audio = null;

var start_audio = {
  type: 'call-function',
  func: function(){
    audio = new Audio();
    audio.src = "drum-loop.mp3";
    audio.loop = true;
    audio.play();
  }
}

var in_between_trials = {
  timeline: [{
    type: 'html-button-response',
    stimulus: function(){
      return `<p>Intermediate trial ${jsPsych.timelineVariable('number')} of 4</p>`
    },
    choices: ['Next']
  }],
  timeline_variables: [
    {number: 1},
    {number: 2},
    {number: 3},
    {number: 4}
  ]
}

var stop_audio = {
  type: 'call-function',
  func: function(){
    audio.pause();
  }
}

jsPsych.init({
  timeline: [before_audio, start_audio, in_between_trials, stop_audio]
})

[cslongman]

That's perfect - thank you!

I'll give it a shot now and report back...

[cslongman]

Yep - that's got it!

Thanks again :)