I am trying to set up an experiment in which I am playing .mp4 videos and changing the playback rates using base Javascript (no libraries) and HTML5 (Mac OSX 10.10.4). When I change the playback rate of a video to .5x, although the audio-video is slowed down, the audio sounds very jittery on Firefox (version 39.0.3). This problem is not so pronounced on Chrome (Version 44.0.2403.130, 64-bit), Safari (Version 8.0.7) or even IE (Version 11+). Is there a way I can make the make the audio for this video sound less noisy when using firefox?
<script type="text/javascript">
var videos = ['2.4.mp4', '3.2.mp4', '2.8.mp4']
var rates = [.5, 1, .5]
function setupStim(){
stim = document.getElementById('movie');
stim.addEventListener('loadeddata', function() {
stim.defaultPlaybackRate = rates[trialNum];
stim.playbackRate = rates[trialNum];
stim.play();
setTimeout(enableButtons,stim.duration*1000);
}, false);
}
function Stimulus(trialNum, movieName,rate,response, rt) {
this.trialNum = trialNum;
this.movieName = movieName;
this.rate = rate;
this.response = response;
this.rt=rt;
}
function playVideo(){
hide('start');
stim.src = "https://s3.amazonaws.com/mcgurkstimuli/" + videos[trialNum];
document.getElementById('p3').innerHTML = (trialNum + 1)+ ' / '+ N;
time0=performance.now();
return time0;
}
function choice(resp){
var time1 = performance.now();
stim.rt = Math.round(time1-time0);
stim.response = resp;
videos[trialNum] = new Stimulus(trialNum,stim.src,rate,resp,stim.rt);
videos[trialNum].rt = stim.rt;
videos[trialNum].response = stim.response;
videos[trialNum].movieName = stim.src;
videos[trialNum].rate = stim.playbackRate;
videos[trialNum].trial=trialNum;
data +=videos[trialNum];
document.getElementById("inputfields").innerHTML = data;
trialNum++;
if (trialNum<N){
playVideo();
}
else {
hideOptions();
hide('movie');
}
}
</script>
<p><button class="startButton" id="start" onclick="playVideo()" type="button">Begin Task</button>
<video id="movie" onended="showOptions()"><source /></video>
</p>
Response