to every one . . . .I am not exactly an expert but I like to dabble in a bit of web page development once in a while.
I was wondering if anyone can help me with this problem. I am trying to use a random image generator script for use in a browser based application for learning the notes on my saxophone.
How do I direct which frames the random images are assigned to and add variable time delay and if possible the additional parametre of an associated sound WAV file
The intention is to associate the 47 available notes on the instrument with images of the 47 finger patterns and the related notes on the music stave. This is so I can improve my sight reading skills.
I propose to do this by loading at random 1 of 47 images representing the various finger patterns on the instrument and associating it with an image of a note and an image of a position on the music stave.
The way it works is lets say for Example image 19E0Stv.jpg is selected at random (which shows the position of the note on the music stave for hitting E Natural) and is displayed in frame 1 of the browser.
Following this within a specified time frame (say 10 seconds - giving you time to guess the name of the note on the stave) it should then load into frame 2 the related image 19E0key.jpg (Which displays an image of the key of "E" to be played)
Following this (within the same specified time frame) it should then load into frame 3 of the browser image 19E0Fbd.jpg (Which shows the finger positions to hold on the instrument
Following on from this it should proceed after an adjustable time interval to refresh all 3 frames of the browser and restart the process selecting another random ****Stv.jpg , ****key.jpg. and corresponding ****Fbd.jpg image
its meant to be an visual associative developmental cognitive type game to aid learning the instrument rapidly.
The reason for needing to adjust the time intervals between displays is so as to be able to increase or decrease the time given to recognise the note, name it, and play it on the instrument as one improves.
Below is the code as it stands which works to an extent however it loads all three images into the same frame within the browser window. I tried adding target="*****Frame" within the <img id="sImage" src="" ......"/> statement but it doesn't recognise where to point the image to and just buggers up the code.
Also all 3 images are displayed at the same time. I am not sure how to introduce a statement to vary the time between when the asociated images are displayed.
<html>
<head>
<script type="text/javascript">
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
var path_prefix = 'E:/path/leading/to/images/';
interval *= 1000;
var image_index = 0;
var image_list = [
'01BbFbd.jpg','02B0Fbd.jpg','03C0Fbd.jpg','04DbFbd.jpg','05D0Fbd.jpg',
'06EbFbd.jpg','07E0Fbd.jpg','08F0Fbd.jpg','09GbFbd.jpg','10G0Fbd.jpg',
'11AbFbd.jpg','12A0Fbd.jpg','13BbFbd.jpg','14B0Fbd.jpg','15C0Fbd.jpg',
'16DbFbd.jpg','17D0Fbd.jpg','18EbFbd.jpg','19E0Fbd.jpg','20F0Fbd.jpg',
'21GbFbd.jpg','22G0Fbd.jpg','23AbFbd.jpg','24A0Fbd.jpg','25BbFbd.jpg',
'26B0Fbd.jpg','27C0Fbd.jpg','28DbFbd.jpg','29D0Fbd.jpg','30EbFbd.jpg',
'31E0Fbd.jpg','32F0Fbd.jpg','33GbFbd.jpg','34G0Fbd.jpg','35AbFbd.jpg',
'36A0Fbd.jpg','37BbFbd.jpg','38B0Fbd.jpg','39C0Fbd.jpg','40DbFbd.jpg',
'41D0Fbd.jpg','42EbFbd.jpg','43E0Fbd.jpg','44F0Fbd.jpg','45GbFbd.jpg',
'46G0Fbd.jpg','47AbFbd.jpg'];
var number_of_images = image_list.length;
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
image_index = random_display ? generate(0, number_of_images) : (++image_index) % number_of_images;
return image_list[image_index];
}
function rotateImage() {
var new_image = getNextImage();
document.getElementById('rImage').src = path_prefix + new_image;
document.getElementById('sImage').src = path_prefix + new_image.replace(/.{3}\./, 'Stv.');
document.getElementById('kImage').src = path_prefix + new_image.replace(/.{3}\./, 'key.')
setTimeout(rotateImage, interval);
}
window.onload = function() {
setTimeout(rotateImage, interval);
}
</script>
</head>
<body>
<img id="rImage" src="" width="33%" height="100%" alt="Fbd"/>
<img id="sImage" src="" width="33%" height="100%" alt="Stv"/>
<img id="kImage" src="" width="33%" height="100%" alt="key"/>
</body>
</html>__________________
It might add additional flexibilty to include a 4th parameter of the sound ot the note as a WAV file but I havent got a clue how to do that . . .
I would be really grateful for assistance in solving this problem
Thanks very much and best wishes for the New Year
.
