Music does not play in IE8

Content
1

Hello,

I have got this code:

<script type="text/javascript">
$(function(){
	var hmusic_html = '<object type="application/x-shockwave-flash" data="/player/template_maxi_0.6.0/player_mp3_maxi.swf" width="25" height="0"><param name="movie" value="/player/template_maxi_0.6.0/player_mp3_maxi.swf" /><param name="bgcolor" value="#000000" />';

	var params_play = '<param name="FlashVars" value="mp3=/player/template_maxi_0.6.0/hubert_music.mp3&amp;loop=1&amp;showslider=0&amp;autoplay=1&amp;width=25" /><embed src="/player/template_maxi_0.6.0/player_mp3_maxi.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="25" height="0"></embed></object>';
	var params_noplay = '<param name="FlashVars" value="mp3=/player/template_maxi_0.6.0/hubert_music.mp3&amp;loop=1&amp;showslider=0&amp;width=25" /><embed src="/player/template_maxi_0.6.0/player_mp3_maxi.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="25" height="0"></embed></object>';	
	
	var hubcookie = $.cookie("play");
	var hmusic_el = $("#hmusic");
	
	if (hubcookie == null){
		$.cookie("play", "1", { expires: 7 });
		hmusic_el.html(hmusic_html + params_play);
	}
	else if (hubcookie == "1"){
		hmusic_el.html(hmusic_html + params_play);
	}
	
	$("#play").click(function(){
		$.cookie("play", "1", { expires: 7 });
		hmusic_el.html(hmusic_html + params_play);
	});
	
	
	$("#stop").click(function(){
		$.cookie("play", "0", { expires: 7 });
		hmusic_el.html(hmusic_html + params_noplay);
	});	
});
</script>

This code behaves correctly in all other web browsers except IE.

It does this:

  • it starts to play music automatically in case that there is no cookie
  • it starts to play music automatically in case that the cookie is set to 1
  • it starts to play music when #play is clicked
  • it stops to play music when #stop is clicked

In IE it behaves like this:

  • it starts to play music if I press “Delete browsing history” together with Cookies and refresh web page
  • it does not stop playing music if I click #stop, but sets Cookie to 0
  • it does not start playing music if I click #start, but sets Cookie to 1

Any help?

2

This is not a flash issue, but a javascript/html issue.

3

Thanks, I will repost it in javascript part of forums.

4

try not setting the HTML charset to UTF-8 just to see if that fixes issues with the cookies. i had an issue recently where the cookies would not work as expected in IE 8 if that was set.

5

My first question would be why are you building the element using scripting. The second question would be why are you building it innerHTML style instead of the DOM (assuming scripting is appropriate)… the third question would be about the use of EMBED (which there’s no need for) which the scripting isn’t targeting to start playing (so it should work in no versions of IE)… and of course as always since that appears to use jquery bloat, I’d swing a giant axe at that nonsense as well.

First, I’d put the player where it belongs – it’s content, get it in the markup using a method that actually works cross browser :


<!--[if IE]>
	<object
		classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
		width="25" height="0"
		id="hMusic"
	>
<![endif]-->
<!--[if !IE]>-->
	<object
		type="application/x-shockwave-flash"
		data="/player/template_maxi_0.6.0/player_mp3_maxi.swf"
		width="25" height="0"
		id="hMusic"
	>
<!--<![endif]-->
	<param name="movie" value="/player/template_maxi_0.6.0/player_mp3_maxi.swf" />
	<param name="bgcolor" value="#000000" />';
	<param name="FlashVars" id="hMusicFlashVars" value="" />
</object>

Which gives you a valid target to do whatever it is your scripting is trying to do… which appears to be a content swap which I’m not sure IE (or Opera) will pay attention to on a flash element – and that appears to be something that should be handled using the dom on the elements property instead of forcing a reflow. Give the param an ID and swap it’s value instead of replacing the entire content.

// setup:

var hMusicFile=‘mp3=/player/template_maxi_0.6.0/hubert_music.mp3&loop=1&showslider=0&width=25’;

// play:

document.getElementById(‘hMusicFlashVars’).value=hMusicFile+‘&autoplay=1’;

// noplay:

document.getElementById(‘hMusicFlashVars’).value=hMusicFile;

Since all you’re doing is changing if that one value is present or not.

It could also be that since you do NOT have autoplay set for player_mp3_maxi.swf, the flashvars isn’t gonna do jack…