Member Avatar for Hers2keep

I am using asp.net 4.0 and c#. I have a page at work that is used one time per year by one person to run several stored procedures on January 1st. In order to make it more interesting (since she has to work every New Year's Day) I try to do something different with the page every year just to make her laugh. The page consists of one huge "easy button" that she clicks. On click, the stored procedures run. Period. This year, I want to have the "easy button" change to a "rotating cog" as soon as she clicks it and the stored procedures start running. Then when the stored procedures are finished, I want to have the "rotating cog" change to a "happy face" image.

The pieces that are not working are in my code for the button click, I have an image change to a "rotating cog." That never fires. I've put it outside the try block in the button click code and I've tried putting it inside the try block. It just stays the "easy button" until the stored procedure is finished and then it changes correctly to the "happy face."

The other thing I want to do is play a short wav file when everything is finished when the "happy face" pops up. I've tried using the HTML5 <audio> element with a wav file and can't get it to play. I think that may be an IE issue. This page will always be loaded in IE and only by this one person. This plays fine in Chrome, but not in IE.

    <audio src="sounds/nyear2.wav" autoplay ></audio>

I want to have the audio set up on the aspx page and then in the code behind after the try block has executed successfully, then I want to call this sound somehow to play.

I don't know how clear that was, but if someone could help me out with this I'd appreciate it.

  • 2 Contributors
  • 1 Reply
  • 813 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by M.Waqas Aslam

Dani AI

Generated

— the root cause for the missing "rotating cog" is the ASP.NET postback model: changing the image on the server inside the Button click handler does not repaint the browser while the server is busy. was correct to flag IE: HTML5 audio support and format support depend on the IE version and installed codecs.

A minimal fix that keeps the full postback is to change the image client‑side before the postback (so the browser can repaint immediately) and let the server still run the stored procs. Example using an ASP.NET Button OnClientClick:

<asp:Image ID="imgStatus" runat="server" ImageUrl="/images/easy.png" />

<asp:Button ID="btnRun" runat="server" Text="Run"
  OnClientClick="document.getElementById('<%= imgStatus.ClientID %>').src='/images/cog.gif'; this.disabled=true; return true;"
  OnClick="btnRun_Click" />

A more robust approach is to run the procedures asynchronously and update the UI from JavaScript (no blocking postback). Example flow with fetch and the Web API / handler on the server:

function startRun() {
  var img = document.getElementById('imgStatus');
  img.src = 'images/cog.gif';
  document.getElementById('btnRun').disabled = true;

  fetch('/api/runprocedures', { method: 'POST' })
    .then(function(res){ if (!res.ok) throw new Error('Server error'); return res.json(); })
    .then(function(){ 
      img.src = 'images/happy.png';
      var s = new Audio('/sounds/done.mp3');
      s.play().catch(function(){ /* autoplay blocked — fallback UI or visual cue */ });
    })
    .catch(function(err){
      img.src = 'images/error.png';
      console.error(err);
    });
}

Audio tips and troubleshooting:

  • Prefer MP3 for best cross‑browser/IE compatibility; some WAV encodings are not supported by all IE versions.
  • Ensure IIS sends correct MIME types (audio/mpeg for .mp3, audio/wav for .wav).
  • Autoplay can be blocked; calling play() from the click handler or immediately after an AJAX success (a user gesture precedes it) improves reliability.
  • If using full postback, register a startup script from code‑behind to call new Audio(...).play() after the response returns.
  • If the workstation is using IE8 or older, HTML5 audio is not supported — a browser upgrade or different delivery strategy will be required.

Summary: swap the image client‑side (OnClientClick) or move the long work to an async endpoint and control UI + audio entirely from JavaScript; convert the sound to MP3 and verify MIME types for best IE behavior.

Member Avatar for M.Waqas Aslam

I think HTML5 is not compatible with the version of IE you are using. Please do mention the version you are using.

Do you need any help regarding Button rotation and smiling face ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.