Help - Search - Members - Calendar
Full Version: Need help getting sound to work on web page
HTMLHelp Forums > Web Authoring > General Web Design
Nuuk
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. smile.gif
pandy
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! smile.gif

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

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! smile.gif


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
Maybe you do something wrong.
Nuuk
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. smile.gif

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? wink.gif


pandy
This looks hopeful.
http://sites.google.com/site/mori79/html-g...e-reader-player
Nuuk
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.
Invision Power Board © 2001-2014 Invision Power Services, Inc.