HTMLHelp Forums > Need help getting sound to work on web page

Full Version: Need help getting sound to work on web page

HTMLHelp Forums > Web Authoring > General Web Design

Nuuk

Nov 7 2011, 08:02 AM

I've made a simple on-line Christmas card, and I would love to add some festive music. I have tried three or four methods, copied and pasted from various sites but none appear to work, either in Firefox of IE, or one any one of my three computers, one of which is running Ubuntu with Firefox.

Here is the webpage in question.

And here is the code: (with the music part in red)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>A Christmas card from Nick, December 2011.</title>

<link rel="stylesheet" type="text/css" href="xmasstyle2011.css">

</head>

<body>

<table border="3" cellspacing="0" cellpadding="0" bordercolor="#99CCFF" bordercolorlight="#DBEDFF" bordercolordark="#5B7997"><tr><td>
<object id="MediaPlayer1" width="300" height="45" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"
standby="Loading Microsoft Windows Media Player..." type="application/x-oleobject">
<param name="FileName" value="RichardSouther_The HollyAndTheIvy.mp3">
<param name="animationatStart" value="false">
<param name="transparentatStart" value="true">
<param name="autoStart" value="true">
<param name="showControls" value="true">
<param name="Volume" value="-100">
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="RichardSouther_The HollyAndTheIvy.mp3" autostart="true" showstatusbar="1" volume="-1" height="50" width="300"></embed></object>
</td></tr></table>

<div id="container">

<img src="banner.gif" width="485" height="40" style="position:relative; left:35px; top:-50px; "z-index: -3">

<p style="position:absolute; top:-64px; left:65px; z-index: 7"><font face="Comic Sans MS"; color="FFCC33" size="5">To Everybody, </font></p>

<img src="simpsons-snow-c.jpg" width="740" height="474" style="position:absolute; left:-0px; top:0px; "z-index: -2">

<img src="snowman-an3.gif" width="167" height="208" style="position:absolute; left:346px; top:215px; "z-index: -1">

<img src="xmasbells_an.gif" width="350" height="321" style="position:relative; left:450px; top:-145px; "z-index: -3">

</div>

</body>

</html>

I do have the mp3 music file in the same directory as the other files for this page.

I've been trying to sort this out for over a week now without success so if anybody can suggest a solution, I will be very grateful.

pandy

Nov 7 2011, 08:30 AM

Well, first of all the music file needs to be there. It doesn't look like it is.
http://nickw.worldonline.co.uk/Xmas/2011/R...lyAndTheIvy.mp3

I'm not familiar with the embed code you use, but it looks like it's MS MediaPlayer specific. Not everyone will have that player.

The problem with embedding mp3 is that all browsers don't support that format natively. I think your best option is to use one of the free flash mp3 players that you can find trough google.
http://www.google.com/search?q=flash%20mp3%20player

Cute X-mas card BTW!

Nuuk

Nov 7 2011, 05:55 PM

QUOTE(pandy @ Nov 7 2011, 01:30 PM)

Thanks Pandy. I've now tried half a dozen mp3 players but the only one that actually played the music took up half the page and messed up the card completely.

I've been trying to get the Google player to work most of this evening but with no luck. I'll keep searching for one that works, and is discrete enough for this particular web page.

pandy

Nov 8 2011, 01:19 AM

Maybe you do something wrong.

Nuuk

Nov 8 2011, 04:23 AM

OK, there's nothing like persistence in these situations, and I hope that I have now found the solution. I found this article on using the Google player where you simple replace the URL location of the example music with the URL of your mp3 file. I hope this will be of help to others.

So I now have

<object height="26" classid=�clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width=�350">
<param name="wmode" value="transparent" ></param>
<param name="flashvars" value="playerMode=embedded" />
<param name="src" value="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://nickw.worldonline.co.uk/Xmas/2011/holly.mp3"/>
<embed src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://nickw.worldonline.co.uk/Xmas/2011/holly.mp3
" type="application/x-shockwave-flash� wmode="transparent" height="26" onclick="logPostVideoPlay(�1940169', �#blog_video_1940169_0")" flashvars="playerMode=embedded" width="350"></embed>
</object>

but there's one thing I need to do now, and that is to get the music to start automatically when the page is loaded.

I have tried adding:

<param name="autoplay" value="true">

but that doesn't work. Can anybody suggest another solution?

pandy

Nov 8 2011, 04:32 AM

This looks hopeful.
http://sites.google.com/site/mori79/html-g...e-reader-player

Nuuk

Nov 8 2011, 04:38 AM

A cup of coffee and a bit more Googling did the trick. This is the code if the music is to autostart:

<object height="26" classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width=”350">
<param name="wmode" value="transparent" ></param>
<param name="flashvars" value="playerMode=embedded" />
<param name="src" value="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://nickw.worldonline.co.uk/Xmas/2011/holly.mp3&autoPlay=true"/>
<embed src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://nickw.worldonline.co.uk/Xmas/2011/holly.mp3&autoPlay=true
" type="application/x-shockwave-flash” wmode="transparent" height="26" onclick="logPostVideoPlay(’1940169', ‘#blog_video_1940169_0")" flashvars="playerMode=embedded" width="350"></embed>
</object>

So this is almost my finished on-line Christmas card for this year. It should be fairly easy to change the text, pictures, animations and music to make your own if you wish to. I change "Everybody to the name of recipient which is a bit of extra work as I send out around 50 of these, but it's a nice touch to personalise them. I've been sending these out since 2003 and they are always well-received, although I also send some 'real' cards as well.

PS Thanks again Pandy, that link does give the same solution.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.