Search jQuery

jQuery Forum

playSound

in Using jQuery • 8 years ago

I inherited some jquery code for a site. Thus I did not write it. Part of the code plays a sound when a dialog box opens. The sound plays in firefox. The sound used to play in IE but now it does not.

This is the code that plays the sound. The popup has a snooze function thus the code has some timer stuff.

function playSound(soundfile)
  {
   document.getElementById("dummy").innerHTML="<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
  }
if(timer)
      {
       clearInterval(timer);
      }
      playSound("images/alert.wav");
      $("#arrivalNotification").dialog("open");
      if(soundTimer)
      {
       clearInterval(soundTimer);
      }
      //alert("starting");
      soundTimer=setInterval("playSound('images/alert.wav')",chimeDelay);

Any help is appreciated since this is new to me.

Replies(10)

jakecigar

Re: playSound

8 years ago

Embed is a nasty tag! If you are targeting current browsers use an <audio> tag instead.

If not, you’ll have to decide which plugin you are expecting your users to use and generate <object> & <param> tags to match it. If you are targeting old IE browsers <bgsound> may work as well.

I would use a static <audio> tag and use JavaScript to play it when needed.

JΛ̊KE

frommm

Re: playSound

8 years ago

I replaced the commented line with the line below and still no soun din IE yet there is sound in firefox and chrome. I tested it in IE9.

//document.getElementById("dummy").innerHTML="<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
document.getElementById("dummy").innerHTML="<audio autoplay=\"autoplay\"><source src=\""+soundfile+"\" autoplay=\"autoplay\" /></audio>";

jakecigar

Re: playSound

8 years ago

http://stackoverflow.com/questions/7358689/audio-tag-not-working-in-ie9

Use HTML5 doctype, and maybe add the meta tag.

JΛ̊KE

frommm

Re: playSound

8 years ago

I changed the doctype to html 5 doctype and added a meta tag.

Sound still works in firefox and chrome but not in IE9. I am thinking the popup window that shows the message and plays the sound does not have the html 5 doctype, but I cannot see a place to add a doctype to the popup part of the code. Code block 2 (new to me) is the dialoge box that popups up to display a message and plays the sound.

<!DOCTYPE html>
<html>
<head>

<title>Notification</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
$("#arrivalNotification").text("Your "+times+" appointment has arrived.");
      alertShown=true;
      $("#arrivalNotification").dialog({
       autoOpen:false,
       modal:true,
       draggable:false,
       width:370,
       close:function(){
            alertShown = false;
            snoozed = data.appointment_time;
            setTimeout("snooze()",snoozeTime);
          if(titleTimer)
          {
           clearInterval(titleTimer);
          }
          document.title = "Notification";
          if(soundTimer)
          {
           clearInterval(soundTimer);
          }
        },
       resizable:false,
       buttons: {
         "Snooze":function()
         {
            $("#arrivalNotification").dialog('destroy');
            alertShown = false;
            snoozed = data.appointment_time;
            setTimeout("snooze()",snoozeTime);
          if(titleTimer)
          {
           clearInterval(titleTimer);
          }
          document.title = "Notification";
          if(soundTimer)
          {
           clearInterval(soundTimer);
          }
         },

         "Start Appointment":function()
         {
            alertShown = false;
            $("#arrivalNotification").dialog('destroy');
            //alert(data.appointment_time);
            started=data.appointment_time;
            appointmentTime = data.appointment_time;
          $.post("MarkAsSeen.php",{time:data.appointment_time},function(data){
            //alert(data);
           },'text');
          if(titleTimer)
          {
           clearInterval(titleTimer);
          }
          document.title = "Notification";
          if(soundTimer)
          {
           clearInterval(soundTimer);
          }
            if(timer){
           clearInterval(timer);
            }
            timer = setInterval("checkAppointment()",3000);
            //alert(started);
         }
      }
      });

jakecigar

Re: playSound

8 years ago

Rather than working on the whole page, I’d like to see a smaller page that attempts to play a clip. I don’t even see the place where you are playing the sound.

I can help you with the events and methods used with html5 audio, and to some extent older versions.

Make a tiny page with a simple <audio> tag.

By the way, what format audio are you playing?? Wav? MP3? Some formats don’t play with some browsers. The <source> tag can be used to specify alternate formats.

JΛ̊KE

frommm

Re: playSound

8 years ago

The sound is being played in the function playSound. The commented line is the embed method. The uncomented line is using the html5 audio tag as you suggested. The long lines of code in the previous resply creates the dialog box (#arrivalNotification) that displays just prior to playing the sound.

The sound format is a wav file.

function playSound(soundfile)
  {
   //document.getElementById("dummy").innerHTML="<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
   document.getElementById("dummy").innerHTML="<audio autoplay=\"autoplay\"><source src=\""+soundfile+"\" autoplay=\"autoplay\" />Audio tag not supported.</audio>";
  }

...
  playSound("images/alert.wav");
      $("#arrivalNotification").dialog("open");
      if(soundTimer)
      {
       clearInterval(soundTimer);
      }
      //alert("starting");
      soundTimer=setInterval("playSound('images/alert.wav')",chimeDelay);

I created the following bit of code in a separate page. The sound file plays in firefox but still not it IE9. The text "Audio tag not supported" is displayed. I double checked and the browser is IE9.

jakecigar

Re: Re: playSound

8 years ago

this is a correct example of audio & source tags

<audio title="I Like it I Love It">
<source src="music/I_Like_It_I_Love_It.mp3" type='audio/mpeg'>
<source src="music/I_Like_It_I_Love_It.ogg" type='audio/ogg; codecs="vorbis"'>
<source src="music/I_Like_It_I_Love_It.mid" type='audio/midi'>
<source src="music/I_Like_It_I_Love_It.m4a" type='audio/x-m4a'>
<source src="music/I_Like_It_I_Love_It.aif" type='audio/x-aiff'>
</audio>

It has enough alternatives that it plays in any html5 browser.

JΛ̊KE

frommm

Re: playSound

8 years ago

It looks like microsoft IE9 cannot play it's own sound format, wav, in the audio tag. I converted the sound file to mp3 and now it plays in the demo soundtest page. Everything now works in an html5 browser. the final puzzle is to make it work in IE8 which is not html5.

Thanks for all the help

jakecigar

Re: Re: playSound

8 years ago

Maybe throwing in an <embed> of the mp3 after the <source>s would be sufficient for IE8 and below.

JΛ̊KE

frommm

Re: playSound

8 years ago

For IE8 I am trying to use modernizr.js or html5shiv.js to make IE8 html5 compatible. So for no luck making it work though. whether I download modernizr.js and include it or use the googlecode path to html5shiv, the audio tag is still listed as browser not supported.

Top Reply

Response title

Attachments

jQuery Forum

playSound

Replies(10)

Re: playSound

Re: playSound

Re: playSound

Re: playSound

Re: playSound

Re: playSound

Re: Re: playSound

Re: playSound

Re: Re: playSound

Re: playSound

Statistics

Tags

Actions