var images;
function preloadTrial(actor, event) {
return new Promise(function(res) {
var i = 0;
images = [];
var handler = function(resolve, reject) {
var img = new Image;
var source = '/static/videos/' + actor + '/' + event + '/' + i + '.png';
img.onload = function() {
i++;
resolve(img);
}
img.onerror = function() {
reject()
}
img.src = source;
}
var _catch = function() { res(images) }
var operate = function(value) {
if (value) images.push(value);
new Promise(handler).then(operate).catch(_catch);
}
operate();
})
}
function playSequence(time){
var delta = (time - currentTime) / 1000;
currentFrame += (delta * FPS);
var frameNum = Math.floor(currentFrame);
if (frameNum >= numFramesPlay) {
currentFrame = frameNum = 0;
return;
}else{
requestAnimationFrame(playSequence);
currentImage.src = images[frameNum];
currentTime = time;
console.log("display"+currentImage.src);
}
};
function rightNow() {
if (window['performance'] && window['performance']['now']) {
return window['performance']['now']();
} else {
return +(new Date());
}
};
currentImage = document.getElementById("instructionImage");
// Then use like this
preloadTrial('examples', 'ex1').then(function(value) {
playSequence(currentTime=rightNow());
});
I wrote a Javascript function that is suppose to load a directory full of numbered .png files. However, I do not know the number of items inside the directory beforehand. So I made a function that continues to store images until the source gives me an error. But when I run the code the program does not even enter the .onload and .onerror functions, resulting in an infinite loop.
Edit: This is my current code. It appears that images are correctly assigned and pushed into the array images. But when I attempt to load it onto a img tag (currentImage.src) and run playSequence, it does not display.
You could use promises to handle the pre-loading of the images.
Chain the resolves on the onload event and reject onerror to end the cycle.
function preloadImages(baseurl, extension, starter) {
return new Promise(function(res) {
var i = starter;
var images = [];
// Inner promise handler
var handler = function(resolve, reject) {
var img = new Image;
var source = baseurl + i + '.' + extension;
img.onload = function() {
i++;
resolve(img);
}
img.onerror = function() {
reject('Rejected after '+ i + 'frames.');
}
img.src = source;
}
// Once you catch the inner promise you resolve the outer one.
var _catch = function() { res(images) }
var operate = function(value) {
if (value) images.push(value);
// Inner recursive promises chain.
// Stop with the catch resolving the outer promise.
new Promise(handler).then(operate).catch(_catch);
}
operate();
})
}
To simulate a video player, you can draw on a HTML5 canvas.
function play(canvas, imagelist, refreshRate, frameWidth, frameHeight) {
// Since we're using promises, let's promisify the animation too.
return new Promise(function(resolve) {
// May need to adjust the framerate
// requestAnimationFrame is about 60/120 fps depending on the browser
// and the refresh rate of the display devices.
var ctx = canvas.getContext('2d');
var ts, i = 0, delay = 1000 / refreshRate;
var roll = function(timestamp) {
if (!ts || timestamp - ts >= delay) {
// Since the image was prefetched you need to specify the rect.
ctx.drawImage(imagelist[i], 0, 0, frameWidth, frameHeight);
i++;
ts = timestamp;
}
if (i < imagelist.length)
requestAnimationFrame(roll);
else
resolve(i);
}
roll();
})
}
To test I used ffmpeg to cut a video with the following command:
ffmpeg -i input.mp4 -ss 00:00:14.435 -vframes 100 %d.png
And I used devd.io to quickly create a static folder containing the script and images and a basic index.html.
imageroller.js - with the above code.
var preload = preloadImages('/static/videos/examples/testvid/', 'png', 1);
preload.then(function(value) {
console.log('starting play');
var canvas = document.getElementById("canvas");
play(canvas, value, 24, 720, 400) // ~480p 24fps
.then(function(frame){
console.log('roll finished after ' + frame + ' frames.')
})
});
While the preloading of the images was pretty slow, if you keep the number of frames to an acceptable level you can make some nice loops.
I haven't tested the snippet below (and there are probably cleaner solutions) but the idea should be correct. Basically we have a recursive function loadImages(), and we pass in the images array and a callback function. We wait for our current image to load; if it loads, we push it into images and call loadImages() again. If it throws an error, we know we are finished loading, so we return our callback function. Let me know if you have any questions.
function preloadTrial(actor, event) {
let images = [];
loadImages(images, actor, event, function () {
// code to run when done loading
});
};
function loadImages (images, actor, event, callback) {
let img = new Image();
let i = images.length;
let source ='/static/videos/'+actor+'/'+event+'/'+i+'.png';
img.onload = function() {
images.push(img);
return loadImages(images, actor, event, callback);
}
img.onerror = function() {
return callback(images);
}
img.src = source;
}
The optimal solution would be to provide a server-side API that tells you beforehand, how many Images there are in the directories.
If that is not possible, you should load the images one after the other to prevent excess requests to the server. In this case i would put the image loading code in a separate function and call it if the previous image was loaded successfully, like so:
function loadImage(actor, event, i, loadCallback, errorCallback) {
var image = new Image();
var source ='/static/videos/'+actor+'/'+event+'/'+i+'.png';
image.onload = loadCallback;
image.onerror = errorCallback;
image.src = source;
return image;
}
and then call this function in your while loop and in the loadCallback.
Related
I'm working on a image sequence animation and I came across a problem when a new user enters the site for the first time:
Once I have loaded the images from the external database the full screen loading animation removes itself from the screen but now when the user enters the animation, all the images has not been loaded yet so the animation seems buggy & broken. After few seconds all the images has loaded and the animation works just like it should.
So my question is how can I wait till all images has been loaded fully before removing the loading animation to prevent the user from using the animation while the images are still loading?
Here's the function for getting the images:
async getImages(state) {
var images = []
for (let i = 0; i < state.frameCount; i++) {
var imgIndex = (i + 1).toString().padStart(4, '0')
const img = new Image();
img.index = Number(imgIndex)
img.id = imgIndex
var storageRef = this.$fire.storage.ref(`/web-2-160-final.${imgIndex}.png`);
storageRef.getDownloadURL().then((url) => {
console.log('IMG URL',url)
var imgSrc = url
img.src = imgSrc;
img.classList.add('full-screen')
images.push(img);
function percentage(partialValue, totalValue) {
state.percentage = (100 * partialValue) / totalValue
}
percentage(images.length, state.frameCount)
if(images.length == state.frameCount) setImages()
})
}
const setImages = () => {
state.isLoaded = true
var lowestToHighest = images.sort((a,b) => a.index - b.index)
console.log('NEW ARRAY', lowestToHighest)
state.images = images
console.log(state.images)
}
},
First loop over all the download URLs that you need for each image. Collect each Promise returned from every storageRef.getDownloadURL() call.
Wait for every URL to be retrieved with Promise.all(). This ensures that the code waits until every URL is retrieved and ensures that the order remains in the correct order.
Then loop over every URL and create an image for each URL. Use the onload event of the image to return the image whenever it is finished loading. Collect everything in an array of promises and await it again with Promise.all().
The result should be an array of (loaded) images in the order you provided.
async getImages(state) {
const downloadUrls = [];
for (let i = 0; i < state.frameCount; i++) {
const imgIndex = (i + 1).toString().padStart(4, '0');
const storageRef = this.$fire.storage.ref(`/web-2-160-final.${imgIndex}.png`);
const downloadUrl = storageRef.getDownloadURL();
downloadUrls.push(downloadUrl);
}
const urls = await Promise.all(downloadUrls);
let amountOfPreloadedImages = 0;
const images = await Promise.all(urls.map(url =>
new Promise((resolve, reject) => {
const image = new Image();
image.src = url;
image.onload = () => resolve(image);
image.onerror = (error) => reject(error);
}).then(image => {
amountOfPreloadedImages++;
state.percentage = 100 * amountOfPreloadedImages / state.frameCount;
return image;
})
));
state.images = images;
}
Below is my code
var uploadIDImage = {
IDPos: {},
IDNeg: {}
};
var FR = new FileReader();
FR.onload = function(e) {
console.log("123");
console.log(e);
$("#UploadIDPos img").remove();
$("#UploadIDPos i").hide();
$('#UploadIDPos').prepend('<img id="IDPosImg" style="width: 140px; height: 80px;"/>');
var img = document.getElementById('IDPosImg');
img.src = FR.result;
uploadIDImage.IDPos.Files = FR.result.split(",")[1];
console.log("11111");
};
if(e.target.files[0]) {
FR.readAsDataURL(e.target.files[0]);
if(originalIDPosSize === undefined) {
var size = Math.round(e.target.files[0].size / 1024 / 1024);
originalIDPosSize = size;
}
else {
totalSize = totalSize + originalIDPosSize;
var size = Math.round(e.target.files[0].size / 1024 / 1024);
}
var remainSize = totalSize - size;
console.log("Remain size : " + remainSize);
$("#remain-size").text(totalSize - size);
totalSize = remainSize;
}
console.log("22222");
console.log(uploadIDImage.IDPos.Files);
What I got from my console.log is first print "22222" and undefined and then "111111".
Why "11111" not print first?
When you do
FR.onload = function(e) {... }
you are setting a callback on the FileReader which is called when the reading operation has successfully completed.
Now you script proceeds and runs console.log("22222");
After a while the callback is invoked and you see the 11111.
Your section of code FR.onload = function(e) { ... } is just defining a handler for the FR object. The FileReader methods like readAsDataURL() are asynchronous -- your program continues after it executes the FR.readAsDataURL(...) statement.
Then later, when the file reading is done, then the function you specified for FR.onload runs. It is indeterminate whether this happens before or after your console.log("22222"); statement.
I'm new to programming and I'm messing around with the Web Audio API. Right now, I have three samples (kick, clap, hihat) that make up a simple drumkit beat when a Play button is pressed.
I want to be able to illustrate this visually on the front end as a sequencer that plays through this drumkit. For instance, every time the "kick.wav" sample is played, I want to change the color of a div that is associated with it.
My questions are:
How do I associate every time a kick, clap or hihat are played with a div in the html?
How can I add this association to sequence through when the play button is hit?
HTML:
<body>
<div id="container">
<canvas id="canvas"></canvas>
</div>
<button id="play">play</button>
<script src="javascript/tween.js"></script>
<script src="javascript/shared.js"></script>
<script src="javascript/seq.js"></script>
</body>
Javascript:
function playSound(buffer, time) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(time);
}
function loadSounds(obj, soundMap, callback) {
// Array-ify
var names = [];
var paths = [];
for (var name in soundMap) {
var path = soundMap[name];
names.push(name);
paths.push(path);
}
bufferLoader = new BufferLoader(context, paths, function(bufferList) {
for (var i = 0; i < bufferList.length; i++) {
var buffer = bufferList[i];
var name = names[i];
obj[name] = buffer;
}
if (callback) {
callback();
}
});
bufferLoader.load();
}
function BufferLoader(context, urlList, callback) {
this.context = context;
this.urlList = urlList;
this.onload = callback;
this.bufferList = new Array();
this.loadCount = 0;
}
BufferLoader.prototype.loadBuffer = function(url, index) {
// Load buffer asynchronously
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
var loader = this;
request.onload = function() {
// Asynchronously decode the audio file data in request.response
loader.context.decodeAudioData(
request.response,
function(buffer) {
if (!buffer) {
alert('error decoding file data: ' + url);
return;
}
loader.bufferList[index] = buffer;
if (++loader.loadCount == loader.urlList.length)
loader.onload(loader.bufferList);
},
function(error) {
console.error('decodeAudioData error', error);
}
);
}
request.onerror = function() {
alert('BufferLoader: XHR error');
}
request.send();
};
BufferLoader.prototype.load = function() {
for (var i = 0; i < this.urlList.length; ++i)
this.loadBuffer(this.urlList[i], i);
};
var RhythmSample = function() {
loadSounds(this, {
kick: 'sounds/kick.wav',
claps: 'sounds/claps.wav',
hihat: 'sounds/hihat.wav'
});
};
RhythmSample.prototype.play = function() {
// We'll start playing the rhythm 100 milliseconds from "now"
var startTime = context.currentTime + 0.100;
var tempo = 120; // BPM (beats per minute)
var eighthNoteTime = (60 / tempo) / 2;
var allDivs = document.getElementsByName('colorchangingdivs[]');
// Play 2 bars of the following:
for (var bar = 0; bar < 2; bar++) {
var time = startTime + bar * 8 * eighthNoteTime;
// Play the bass (kick) drum on beats 1, 5
playSound(this.kick, time);
playSound(this.kick, time + 4 * eighthNoteTime);
console.log("4")
// Play the snare drum on beats 3, 7
playSound(this.claps, time + 2 * eighthNoteTime);
playSound(this.claps, time + 6 * eighthNoteTime);
// Play the hi-hat every eighthh note.
for (var i = 0; i < 8; ++i) {
playSound(this.hihat, time + i * eighthNoteTime);
}
}
};
var sample = new RhythmSample();
document.querySelector('#play').addEventListener('click', function() {
sample.play();
});
THANKS SO MUCH!
Add another parameter to playSound() that matches the div id of the one you want to color. And logic to change the color when playing the sound, selecting the div by the id you've passed in.
function playSound(buffer, time, colorID) {
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(time);
document.getElementById(colorID).backgroundColor = blue; //or hex color/rgb value
}
Then you just have to add the right parameter when you call playSound.
playSound(this.kick, time + 4 * eighthNoteTime,"your-kick-div-id");
If you need different colors for different sounds/divs, then just add an if/elseif statement in the background color setting.
I'm trying to preload audio files with javascript. I'm using chrome,
When the number of files growing up the http request of my files are cancelled by chrome...
why? what can i do?
This is my code:
filesToLoad = 44;
filesLoaded = 0;
for ( var ni = 1; ni < filesToLoad; ni++) {
console.log("start::: " + ServerPath + 'audio/' + ni + '.mp3');
loadAudio(ServerPath + 'audio/' + ni + '.mp3');
}
function loadAudio(uri) {
var audio = new Audio();
audio.addEventListener('canplaythrough', isAppLoaded, true); // It
audio.src = uri;
return audio;
}
function isAppLoaded() {
filesLoaded++;
if (filesLoaded >= filesToLoad) {
cb();
}
console.log("load::: " + ServerPath + 'audio/' + filesLoaded + '.mp3');
}
function cb() {
alert("loaded");
}
I was attempting to do the same thing. I was preloading 12 audio and 12 image files in preparation for interactive activities based on them. I was getting the same problem (requests cancelled).
I put together this routine which works for me (Chrome testing done so far).
cacheLessonFiles: function (lessonWords, cacheImg, cacheAudio) {
var
fileName = '',
img = {},
audio = {},
wordIDs = Object.keys(lessonWords)
;
wordIDs.forEach(function (wordID) {
if (cacheImg) {
fileName = lessonWords[wordID].img || wordID;
img = new Image();
img.onload = function () {
console.log('cache: finished caching ' + this.src);
};
img.src = "/img/" + fileName + imageSuffix;
}
if (cacheAudio) {
fileName = lessonWords[wordID].saySpanish || wordID;
audio = new Audio();
audio.onloadeddata = function () {
console.log('cache: finished caching ' + this.src);
};
audioArray.push({a: audio, f:"/audio/" + fileName + audioSuffix});
}
});
setTimeout(loadAudio, AUDIO_LOAD_WAIT);
},
The routine just loads up image files without special handling. The image files were trickier. Instead of just setting the source for all of the audio files in the loop, I populated an array with the audio element and associated source file name (.mp3). I then launched a self-initiating callback in a timeout to process the array, pausing for 200ms between requests.
function loadAudio () {
var
aud = audioArray.pop()
;
aud.a.src = aud.f;
if (audioArray.length > 0) {
setTimeout(loadAudio, AUDIO_LOAD_WAIT);
}
}
One constant and one variable are within the closure, but outside of the cacheLessonFiles() method.
AUDIO_LOAD_WAIT = 200,
audioArray = []
I tried wait times less than 200ms, but the cancelled requests started to reappear.
I'd imagine that clients on the end of slower connections (I'm on fiber) would likely get failures again, but this working well enough for my purposes.
I am using HTML 5 FileReader to read more that one file asynchronously.
I would like to keep track of loading of individual files as more that one files can be added at once.
Now i created div with background 0% for each image, but i am not clear about how to pass this division's id or reference in the onprogress event so that i can track progress and update the div content dynamically.
In simple terms let me know about how to ensure that i am updating the correct progress control associated with the file, when multiple files are uploaded simultaneously? I am not getting my JS right.
var up_file = document.getElementById('multiple_file');
if(up_file.files)
{
for(var x=0; x <up_file.files.length; x++)
{
//console.log(up_file.files.length);
var file = up_file.files[x];
var loadingDiv = document.createElement("div");
var container = document.getElementById('loading_container');
loadingDiv.className = "loading";
loadingDiv.id ="loading_" + x;
loadingDiv.innerHTML = '0%';
container.appendChild(loadingDiv);
var reader = new FileReader();
reader.onprogress = function (evt) {
if (evt.lengthComputable) {
console.dir(evt);
// evt.loaded and evt.total are ProgressEvent properties
var loaded = (evt.loaded / evt.total);
if (loaded < 1) {
console.log(loaded);
}
}
}
var img = document.createElement("img");
img.className = "hide";
reader.onload = (function(aimg) {
return function(e) {
LIB.addEvent(aimg, "load", function(){
var scale = 1;
scale = aimg.width / 200;
aimg.width = aimg.width / scale;
aimg.className = "show";
}, false);
aimg.src = e.target.result;
var li = document.createElement("li");
li.appendChild(aimg);
document.getElementById('img_packet').appendChild(li);
};
})(img);
reader.readAsDataURL(file);
}
}
loadingDiv is still visible inside the onprogress function as a closure is formed. The problem is that it's in a loop, so by the time onprogress is called, loadingDiv will probably have been assigned a new value.
To get around this you can use an extra closure to take a copy of the current value of loadingDiv:
reader.onprogress= function(myloadingdiv) {
return function(evt) {
if (evt.lengthComputable)
myloadingdiv.innerHTML= evt.loaded/evt.total*100+'%';
};
}(loadingDiv);
In ECMAScript Fifth Edition, the bind() method will does this for you more cleanly:
reader.onprogress= function(myloadingdiv, evt) {
if (evt.lengthComputable)
myloadingdiv.innerHTML= evt.loaded/evt.total*100+'%';
}.bind(loadingDiv);
For browsers that don't support bind() yet, you can patch in an implementation thus:
if (!('bind' in Function.prototype)) {
Function.prototype.bind= function(owner) {
var that= this;
if (arguments.length<=1) {
return function() {
return that.apply(owner, arguments);
};
} else {
var args= Array.prototype.slice.call(arguments, 1);
return function() {
return that.apply(owner, arguments.length===0? args : args.concat(Array.prototype.slice.call(arguments)));
};
}
};
}