how to get image src to update from c# code, web or winform

Question

I am pretty new to programming, and I am trying to make some useful programs to help my dad and I learn guitar. What I want to do is have a note name (an image file) show on the screen then play the note (midi) afterwards. (this is an exercise the learn the fretboard notes). So I have an array of the notes, one gets choosen at random, and I want to change the src of the id="Image1" to the note image (/images/(notename).png) then have the notes play. Problem is, the notes play, then the image changes. I think this has something to do with postbacks, but aren't too sure. Here is the code:

public void  StartQuiz(List<string> selectedeNotes, int timeDuration, string sharpsFlats)
{
  string[] notesForQuiz = BuildNotes(sharpsFlats);
  string theNote = getRandomNote(notesForQuiz);
  string imageURL = @"/images/" + theNote + ".png";
  Image1.ImageUrl = imageURL;
  //Image1.Attributes["src"] = ResolveUrl(imageURL);
  //string str = "<script>document.getElementById('Image1').src='"+imageURL+"';                  </script>";
  for (int i = 0; i < 4; i++)
  {
      playNote(theNote, "E");
  }
}

I tried to have c# call a javascript function, but I figured out that won't work. Any help will be appreciated. I am sorry if I don't have all the info posted.

Edit: Thanks for suggsting using javascript to do most of this, and not continuing to try to do it in C# for the web. I already had the logic programmed in c#, so I figured it would be pretty easy to just bring it to a winform. Somehow (I thought it was a postback issue), the image still doesn't update until after tones stop. Even though the change to the image is Before the call for the tones:

   public void  StartQuiz(List<string> selectedeNotes, int timeDuration, string nosharpsFlats)
{

  string[] notesForQuiz = BuildNotes(nosharpsFlats);

  for (int x = 0; x < 1; x++)
  {
      string theNote = getRandomNote(notesForQuiz);
      noteImage.ImageLocation = @"..\..\images\D.png";

      for (int i = 0; i < 1; i++)
      {
          playNote(theNote, "E");
      }
  }
}

WTF. I hard coded a specific note in to try to debug.

I'll get started on the JS version. I am for some reason determined to use C#.

Edit #2: I fixed it by adding Application.DoEvents(); after image location change. Seems like I may need to do something with threading, but I'm not sure.

Answer 1

try change to play the midi sound from midi.js midi.

then call the js function to update the image1.scr only play the note.

js functions:

function changeimg(imgurl,callback){
Image1.src=imgurl;
callback();
}
function playnote(note){
for(int i=0;i<3;i++){
//play here
}
}

Code behind :

string script = string.Format("var myimg = '{0}'; changeimg(myimg,playnote);", imageURL);
if (!ClientScript.IsClientScriptBlockRegistered("myScript"))
{
    ClientScript.RegisterClientScriptBlock(typeof(_Default), "myScript", script, true);
}