Play three audio in sequence and collect response javascript - javascript

I'd like to know whether it's possible to play three audio files one after the other and having a participant clicking on a button (perhaps a speech bubble) indicating the audio file he wants to select. Everything while an image is displayed constantly at the bottom (or top I really don't care about that).
IMPORTANT: I'd like each audio + speech bubble to appear together one at a time and stay on the monitor until the last sound has been played.
I have a drawing of what I mean:
A plus is to make it possible with some jsPsych plugin!
Please help me guys!
UPDATE, problem solved !
The main idea is to give up on the for loop, or providing a whole vector ideas and specify each audio as an independent trial, and concatenate the trials into a bigger "task".
The solution came from the main JsPsych group.
experiment: [];
var trial1 = {
type: 'audio-button-response',
stimulus: 'audio1.mp3',
choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
trial_ends_after_audio: true,
prompt: "<img src='stimImage.jpg'>"
};
var trial2 = {
type: 'audio-button-response',
stimulus: 'audio2.mp3',
choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
trial_ends_after_audio: true,
prompt: "<img src='stimImage.jpg'>"
};
var trial3 = {
type: 'audio-button-response',
stimulus: 'audio3.mp3',
choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
response_ends_trial: true,
prompt: "<img src='stimImage.jpg'>",
on_finish: function(data) {
jsPsych.data.addDataToLastTrial({
key_press: data.choices
});
},
};
var fixation_trial = {
type: 'html-keyboard-response',
stimulus: '<div style="font-size:60px;">+</div>',
choices: [69],
trial_duration: 1000,
data: {
test_part: 'fixation cross'
},
on_finish: function(data) {
if (data.key_press == 69) { //press letter 'e' to skip this part
jsPsych.endCurrentTimeline();
}
}
};
var task = {
timeline: [fixation_trial, trial1, trial2, trial3]
};
experiment.push(task);
jsPsych.init({
timeline: experiment,
})

Although the examples of jsPsych about audio are not abundant, I did manage to find this example which loops images until a button is pushed and implemented the same logic to your audio files.
I'm not sure if the speech bubbles will appear at the correct moment, but altering the object in the audio_trials.push() method to include each image with each audio file, might solve it.
var audio = ['dep.mp3', 'dep.mp3', 'dep.mp3'];
var audio_trials = [];
for (let i = 0; i < audio.length; i++) {
audio_trials.push({
stimulus: audio[i]
});
}
var audio_trial = {
type: 'audio-button-response',
choices: ['img/speech.png', 'img/speech.png', 'img/speech.png'],
prompt: "<p>Click on the correct speech bubble</p>",
button_html: '<img src="%choice%" style="width: 300px"/>',
on_finish: function(data) {
jsPsych.data.addDataToLastTrial({
key_press: data.choices
});
},
timeline: audio_trials
};
var fixation_trial = {
type: 'html-keyboard-response',
stimulus: '<div style="font-size:60px;">+</div>',
choices: [69],
trial_duration: 1000, // here there is the random variation
data: {
test_part: 'fixation cross'
},
on_finish: function(data) {
if (data.key_press == 69) { //press letter 'e' to skip this part
jsPsych.endCurrentTimeline();
}
}
};
jsPsych.init({
timeline: [fixation_trial, audio_trial],
use_webaudio: true
});

Related

randomizing multiple objects stored in a list.js

Been bashing my head over this for a while. The project I'm working on requires that I display two randomly selected videos from a list of four possible, unique animations, and on the next page, display the correct corresponding textual description for the video selected. Right now, the approach I'm taking is creating a separate list.js file apart from my code, with each video grouped with its corresponding sentence, but as my code is right now, I cannot use the randomization function to randomize all objects at once.
the list.js file.
//two randomly selected animations are shown here as samples
var stims = jsPsych.randomization.factorial(list.js)
for (const i of stims) {
var video = "video/" + i[video] + ".mp4"
var description = {
type: "html-keyboard-response",
stimulus: [
i["sentence"] +
"<p> Press spacebar to proceed to the next sample animation </p>"
],
choices: [' ']
}
var experience = {
timeline:
[
{
type: 'video',
width: 600,
data: {
subject: code,
},
sources: [video]
}
]
}
timeline.push(fixation);
timeline.push(experience);
timeline.push(description);
}
above is the pertinent code in my experiment.

MediaElement.js Ads not work

I Want to setup Video Ads before playing video with Media ElementJs
I Download latest Version of MediaElementJS from :
https://github.com/mediaelement/mediaelement/zipball/master
in demo Folder :
I edit this Javascript codes:
<script id="mejs-code">
var mediaElements = document.querySelectorAll('video, audio');
for (var i = 0, total = mediaElements.length; i < total; i++) {
var features = ['prevtrack', 'playpause', 'nexttrack', 'current', 'progress', 'duration', 'speed', 'skipback', 'jumpforward',
'markers', 'volume', 'playlist', 'loop', 'shuffle', 'contextmenu'];
// To demonstrate the use of Chromecast with audio
if (mediaElements[i].tagName === 'AUDIO') {
features.push('chromecast');
}
new MediaElementPlayer(mediaElements[i], {
// This is needed to make Jump Forward to work correctly
pluginPath: 'https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.3/',
shimScriptAccess: 'always',
autoRewind: false,
features: features,
currentMessage: 'Now playing:'
});
}
to these Codes :
<script id="mejs-code">
var mediaElements = document.querySelectorAll('video, audio');
for (var i = 0, total = mediaElements.length; i < total; i++) {
var features = ['prevtrack', 'playpause', 'nexttrack', 'current', 'progress', 'duration', 'speed', 'skipback', 'jumpforward',
'markers', 'volume', 'playlist', 'loop', 'shuffle', 'contextmenu','ads'];
// To demonstrate the use of Chromecast with audio
if (mediaElements[i].tagName === 'AUDIO') {
features.push('chromecast');
}
new MediaElementPlayer(mediaElements[i], {
// This is needed to make Jump Forward to work correctly
pluginPath: 'https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.3/',
shimScriptAccess: 'always',
autoRewind: false,
adsPrerollMediaUrl: 'http://media.productionhub.com.s3.amazonaws.com/preroll.mp4',
adsPrerollAdUrl: 'http://www.github.com/',
features: features,
currentMessage: 'Now playing:'
});
}
But I cant see my VideoAds before Playing the Video
Please help me with thanks.
You need to setup the URL for ads using https://github.com/mediaelement/mediaelement-plugins repository, and then adsPrerollMediaUrl should be an array not just a string

How to addRemoteTextTrack programmatically in videojs

I am using videojs and wanna add captions from a URL. But player does not do as expected.
My code is as below.
HTML
<video id="media-player" class="video-js vjs-default-skin">
</video>
JavaScript code
let videoOption = {
controls: true,
autoplay: true,
fluid: true,
preload: 'auto',
poster: 'http://remote-url/1.png',
sources: [{
src: 'http://remote-url/1.mp4',
type: 'video/mp4'
}]
};
let captionOption = {
kind: 'captions',
srclang: 'en',
label: 'English',
src: 'http://remote-url/1.vtt'
};
const player = videojs('media-player', videoOption);
player.addRemoteTextTrack(captionOption); // palyer does not load caption
console.log(player.textTracks().length) // print out => 0
console.log(player.remoteTextTracks().length) // print out => 0
After searching hours of internet. Finally found this useful answer. #Xi Xiao's print out comment is mistyping, it should be a number more than 0.
So after you add
player.addRemoteTextTrack(captionOption);
const tracks = player.remoteTextTracks();
console.log(tracks.length); // print out greater than 0
Then you can turn on the caption button by
for (let i = 0; i < tracks.length; i++) {
const track = tracks[i];
if(track.kind==='captions' && track.language === 'eng') {
track.mode = 'showing';
}
}
}
All of these code are in the ready block.
It turns out that ready function is needed before any API call.
let player = videojs('media-player', videoOption);
player.ready(function () {
player.addRemoteTextTrack(captionOption);
console.log(player.textTracks().length) // print out => 0
console.log(player.remoteTextTracks().length) // print out => 0
});
I've built a HTML-5 "video-js"-based page that implements soft-subtitling
(using VTT).
You may want to view-source on it, and see if any of that coding
is useful to your effort. The page is here:
http://weasel.firmfriends.us/Soft-VTT-Cloud/

jPlayer jPlayerAndroidFix not working?

I'm working on a website using jPlayer. The problem appeared when I tried to use it with my android phone, so I started recoding it. Now I'm trying to use the jPlayerAndroidFix class. I'm doing it just like in the example given in the source code in the tutorial, and still it's not working.
Here's the code:
function playSound(sound) {
if (playToggle) {
return;
}
var id = "#jplayer-play";
var media = {
mp3: sound
};
var options = {
swfPath: $('body').data('jplayer-swf'),
solution: 'flash,html',
wmode:"window",
supplied: 'mp3',
preload: 'metadata',
volume: 0.8,
muted: false,
errorAlerts: false,
warningAlerts: false,
customCssIds: true
};
var myAndroidFix = new jPlayerAndroidFix(id, media, options);
myAndroidFix.setMedia(media);
myAndroidFix.play();
}
Important thing to add - the audio is received dynamically, for example from a link:
http://granie.t-mobile.pl/sets/play/69986
and that's the "sound" variable.
What may cause the problem? What am I doing wrong?
The jPlayerAndroidFix class can be found in the source code of
http://jplayer.org/latest/demo-01-android/?theme=0

Meteor and Flexbox : pagination slow loading results in flickering

Going back to the previous thumbnail overview results in flickering. Looking at it in slow motion the build up of the thumbnail page becomes visible. If the images are loaded fast, the problem disappears, but is very visible if the connection is slow. Is there a way keep the thumbnail page in cache or render the page after flexbox places all the elements? Or is there any other solution? Thanks!
Slow motion:
https://www.youtube.com/watch?v=x3vvCRIJdRo
All images are small sprites that are then drawn to canvases btw. I'm also using flexbox.
Website: http://eboydb.mod.bz/pool/all/1 (will remove this link – if fixed)
Edit:
Just tried to use waitOn with Iron Router – as suggested below. It doesn't seem to make a difference though.
Router.route('/pool/:slug/:page', {
name: 'pool',
template: 'pool',
after: function() {
document.title = siteName + ' /pool/' + this.params.slug + '/' + this.params.page;
},
waitOn: function() {
// set search slugs that will show everything
var allOptions = [
"all",
"everything",
"show all",
];
// when the slug is part of the array show everything
if (allOptions.indexOf(this.params.slug.toLowerCase()) > -1) {
var searchTerm = ".*";
// console.log('slug: all > ' + this.params.slug);
} else {
var searchTerm = this.params.slug;
}
Meteor.subscribe('PixQuery', searchTerm, this.params.page);
},
data: function() {
templateData = {
slug: this.params.slug,
}
return templateData;
}
});

Categories

Resources