I have a self-refreshing, hidden iframe included in every page on my website. Each time it refreshes, it checks a database for any new alerts (the website is coded with classic ASP). If the iframe loads and finds a new alert, it will have an embed tag that plays an mp3 notification sound.
My problem is that when the iframe loads with the embed tag, the cursor will lose focus on any text field if the user was typing at the time.
This doesn't appear to be an issue in Safari, FireFox, or Chrome... Only IE, and I'm running IE 9. This is the first time I've dared to add audio to this website... If I can at least have this working with the most recent versions of all the mentioned browsers, I'd be happy.
Here's my embed tag:
<embed hidden="true" autoplay="true" src="/AllInclude/Sounds/Notification_1.mp3" height="0px" style="overflow:hidden"></embed>
Here's my code which includes the iframe:
<iframe src="/AllInclude/AlertChecker.asp" style="overflow:hidden;height:0px;position:absolute;top:-1000px" frameborder="no"></iframe>
Here's what my iframe uses to refresh itself:
<script type="text/javascript">
setTimeout ('ReloadPage()', 15000 );
function ReloadPage() {
window.location = window.location;
}
</script>
Thanks!
Update:
I was able to get a working version of the html5 audio tag in place of the embed tag... However, since the audio tag is html5, I would need to add the "DOCTYPE html" tag in every page for this to work on IE. This tag causes huge compatibility issues for my old ASP website... so unfortunately, html5 is not an option.
Alright, well, after finding no good solutions to this issue, I decided to give Adobe Flash a chance, and it seems to be the best option right now. It's not pretty and not the way I'd like to make this work, but it works (and most people have flash installed).
Anyways, here's where I found a free flash audio player that has the capability of starting automatically:
http://wpaudioplayer.com/standalone/
And here's what my code looks like (it only implements the flash player for IE since the embed tag works just fine on other browsers):
<%
BrowserType = lcase(Request.ServerVariables("HTTP_USER_AGENT"))
if onload <> "" AND InStr(BrowserType,"msie") > 0 then
%>
<script type="text/javascript" src="/AllInclude/JS/audio-player.js"></script>
<script type="text/javascript">AudioPlayer.setup("/AllInclude/Flash/player.swf", {width: 290, autostart: "yes"});</script>
<p id="audioplayer_1">Alternative content</p>
<script type="text/javascript">AudioPlayer.embed("audioplayer_1", {soundFile: "/AllInclude/Sounds/Notification_1.mp3"});</script>
<% elseif onload <> "" then %>
<embed hidden="true" autoplay="true" src="/AllInclude/Sounds/Notification_1.mp3" height="0px" style="overflow:hidden;"></embed>
<% end if %>