4 Replies - 1281 Views - Last Post: 05 October 2011 - 08:18 AM

#1 rlsdata   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 24-January 11

javascript - cross browser issue with PlaySound

Posted 05 October 2011 - 07:28 AM

I have a website that I am maintaining that was built some time ago. There is a little speaker icon on a page that allows a user to click to hear the pronunciation of a word.
<script type="text/javascript" language="Javascript">
					
	function PlaySound(url) {
		document.all.sound.src = url;
		}
</script>							
                              
<td align="center"> <a href='#' onclick=PlaySound('sound1/pronunciation.wav')><IMG SRC='images/audio.gif' ALT='Audio Pronunciation' BORDER='0' /></a> 


It does not work in all browsers and I am wondering what the alternative should be?

TIA

Is This A Good Question/Topic? 0
  • +

Replies To: javascript - cross browser issue with PlaySound

#2 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: javascript - cross browser issue with PlaySound

Posted 05 October 2011 - 07:37 AM

The problem there is the use of document.all. This is a very old relic from IE, from before the W3C had a standard for fetching elements by their IDs.

Instead, use the document.getElementById("id") method, where "id" matches the id attribute on the element you want to use. (I'm guessing "sound" in your case.)


Also, the language="Javascript" attribute on the <script> tag is not necessary. It, too, is very much outdated. Was actually replaced by the type attribute, which you also have there.
Was This Post Helpful? 0
  • +
  • -

#3 rlsdata   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 24-January 11

Re: javascript - cross browser issue with PlaySound

Posted 05 October 2011 - 07:56 AM

Hi Atli
Thanks for your help.

The html page is actual generated dynamically from this php code. Here is a snippet of the section related to this question.
function getWordAnsw($WID)
{
	$objDB=new DB;
	$sql= "select * from voc_word where word_id=$WID"; 
 	$res = $objDB->query($sql);
	$rec = $objDB->fetch_array($res);
 	$word_defination = stripslashes($rec['word_defination']); 	
	$word_id  = $rec['word_id'];  
	$_SESSION['wid_id12']=$word_id; 
	
	$word_term   = stripslashes($rec['word_term']);
	$_SESSION['last_word'] = $word_term;
	
	$word_cat_id   = $rec['word_cat_id'];
	$getCategory=getCategory($word_cat_id);
	$word_part_of_speech   = stripslashes($rec['word_part_of_speech']);
	$word_defination   =stripslashes($rec['word_defination']);
	$word_variation   =stripslashes($rec['word_variation']);
	$word_sentence   = stripslashes($rec['word_sentence']);
	$word_sound   = stripslashes($rec['word_sound']);
	$word_grade_id =$rec['word_grade_id'];
	$word_pronunciation1=stripslashes($rec['word_pronunciation1']);
	
	if ($word_variation=="" or $word_variation=='-')
	{
			$word_variation="";
	}
	else
	{
		$word_variation="Related word(s): $word_variation";
	}
	
	$word_sentence=str_replace($word_term,"<FONT   COLOR='#3333FF'>$word_term</FONT>",$word_sentence);

	

	$word_pronunciation1= unhtmlentities($word_pronunciation1);
  
	$word_charge   = $rec['word_charge'];


	if($word_part_of_speech=="V")
	{
		$word_part_of_speech='Verb';
	}
	else if($word_part_of_speech=="N")
	{
		$word_part_of_speech='Noun';
	} 	
	else if($word_part_of_speech=="A")
	{
		$word_part_of_speech='Adjective';
	}

  

	if ($word_charge=="N")
	{
		$word_charge='Neutral';
		$word_charge="<FONT  COLOR='#996600' align=center><b>$word_charge</b></FONT>";
	}
	else if($word_charge=="+")
	{
			$word_charge='Positive';
		$word_charge="<FONT   COLOR='#00CC00' align=center><b>$word_charge</b></FONT>";
	}else if ($word_charge=="-")
	{
			$word_charge='Negative';
		$word_charge="<FONT  COLOR='#FF0000' align=center><b>$word_charge</b></FONT>";
	}
 
  
$table=$table."<table width='100%' border='0' cellspacing='0' cellpadding='0' class='fc001'>
<input type='hidden' name='WID' value='$word_id'>
              <tr> 
                <td> 
                  <table width='100%' border='0' cellspacing='0' cellpadding='0'>
                    <tr> 
                      <td width='50%' class='fcorange' align=left>&nbsp;$word_part_of_speech</td>
                      <td><img src='images/ans_left.gif' width='17' height='30'></td>
                      <td bgcolor='#014BA7' class='word'>$word_term</td>
                      <td><img src='images/ans_right.gif' width='17' height='30'></td>
                      <td width='50%'  class='fcorange' align=right>$word_charge&nbsp;</td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr> 
                <td><img src='images/blank.gif' width='1' height='5'></td>
              </tr>
              <tr> 
                <td class='fcorange' align='center'> Group: $getCategory </td>
              </tr>
              <tr> 
                <td><img src='images/blank.gif' width='1' height='8'></td>
              </tr>
              <tr> 
                <td class='textbold12'> 
                  <div align='center' class='textbold12'>$word_pronunciation1</div>
                </td>
              </tr>
			  <tr> 
				<td colspan='2' align='center' align=center>
				<EMBED src='sound$word_grade_id/$word_sound' autostart='true' loop='false' quality='high' bgcolor='#FFFFFF' width='0'
				height='0' loop='true' type='application/x-shockwave-flash'
				pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'  >
				</EMBED>  
				<bgsound id='sound'>
				<script>
				function PlaySound(url) {
				  document.getElementById('sound') = url;
				}
				</script>			  
			  <a href='#' onclick=PlaySound('sound$word_grade_id/$word_sound')><IMG SRC='images/audio.gif' BORDER='0' ALT='Audio Pronunciation' ></a></td>
			  </tr> 
              <tr> 
                <td align='center'><FONT SIZE='2'>$word_defination</FONT></td>
              </tr>
              <tr> 
                <td><img src='images/blank.gif' width='1' height='8'></td>
              </tr>
              <tr> 
                <td align='center'>$word_sentence</td>
              </tr>
              <tr> 
                <td><img src='images/blank.gif' width='1' height='8'></td>
              </tr>
              <tr> 
                <td align='center'>$word_variation</td>
              </tr>
            </table>           
"; 

	return $table;
}



So, with changing the function to use the recommended syntax, does it look like the sound id is the element I should be using?
Thanks

This post has been edited by rlsdata: 05 October 2011 - 08:04 AM

Was This Post Helpful? 0
  • +
  • -

#4 rlsdata   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 24-January 11

Re: javascript - cross browser issue with PlaySound

Posted 05 October 2011 - 08:05 AM

I added the full php function that builds the table that includes the PlaySound function
Was This Post Helpful? 0
  • +
  • -

#5 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: javascript - cross browser issue with PlaySound

Posted 05 October 2011 - 08:18 AM

Based on that, you could duplicate the functionality of the old code by doing this:
<script type="text/javascript">
function PlaySound(url) {
    document.getElementById('sound').src = url;
}
</script>



I say duplicate because the element you are editing, namely the <bgsound id='sound'> element, is a non-standard, IE specific, element that will probably not function in any other browser. - The trouble with audio and video in websites, before HTML5 at least, is that there is no standard way to include them into a page.

The popular non-standard method to include such things in a page is to use Flash. I see you already have a flash element in there, but you don't appear to be using it. If the Flash object is meant to play the sound, you could try removing the <bgsound> element altogether, putting the id="sound" property on the <embed> tag instead, and then altering your Javascript to trigger it to play:
<script type="text/javascript">
function PlaySound() {
    document.getElementById('sound').play();
}
</script>


Then you could also alter the <a> tag so that the onclick property reads just: onclick="PlaySound()", rather than including the actual URL. (That already seems to be the URL for the Flash object... which is kind of odd, but worth a try.)

If that doesn't work, it may be that your Flash object isn't working, or that it's just some relic of a failed attempt to make this cross-browser compatible?


The only real cross-browser compatible, standard solution is the new HTML5 <audio> tag. You can read more about how to use it at the MDN: Using HTML5 audio and video.
The downside is that old browsers will not recognize this. Only IE9+ and the modern browsers (FF4+, Chrome, Opera, Safari) will be able to use it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1