14 replies [Last post]
suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 33 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

I am using the following code to embedd an mp3 file into my html document:
 <embed src="aharddaysnight.mp3" width="140" height="40" autostart="false" loop="FALSE"></embed>
In IE, this works fine, as an mp3 player with controls automatically shows up.
In FF, however, a pop-up appears that says additional plug-ins are needed. When I click on the option to install additional plug-in, it doesnt allow me to because of a security certificate error.
In chrome, the player shows up, but the media starts playing automatically, even though the code says autostart "false".
Does anyone have a better way to embedd mp3, or a fix to this problem???

Thanks!!!!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The embed element has never

The embed element has never been a part of html, but IE still sucks where the object element is concerned. What I've done is use the object element for modern browsers, and used MSFT conditional comments to show IE only the embed element, but hide it from the others.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" 
	  content="text/html; charset=UTF-8" />
 
    <title>Test document</title>
 
    <style type="text/css">
      object,
      embed {
        border: 1px solid black;
        height: 40px;
        width: 140px;
        }
 
      #player {
        text-align: center;
        }
 
    </style>
  </head>
 
  <body>
    <p id="player">
<!--[if !ie]> -->
      <object data="Try.mp3"
	      type="audio/x-mpeg">
	<param name="autoplay"
	       value="false" />
	<param name="width"
	       value="140" />
	<param name="height"
	       value="40" />
	<param name="controller" 
	       value="true" />
	<param name="autostart" 
	       value="0" />
	Oops!
      </object>
<!--<![endif]-->
 
<!--[if ie]>	
    <embed src="Try.mp3" 
	   width="140" 
	   height="40" 
	   autostart="false" 
	   loop="FALSE">
    </embed> 
<![endif]-->
      <br />
      My MP3 player
    </p>
  </body>
</html>

Works as expected in IE7-9, Opera, Chrome and Firefox.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 33 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Hi, Thanks for your response.

Hi,
Thanks for your response. This did not work for me, and I am trying to figure out why.
I put the following code into the of the document:

<meta http-equiv="Content-Type" 
	  content="text/html; charset=UTF-8" />
 <style type="text/css">
      object,
      embed {
        border: 1px solid black;
        height: 40px;
        width: 140px;
        }
 
      #player {
        text-align: center;
        }
 
    </style>

And the following into the

<!--[if !ie]> -->
      <object data="aharddaysnight.mp3"
	      type="audio/x-mpeg">
	<param name="autoplay"
	       value="false" />
	<param name="width"
	       value="140" />
	<param name="height"
	       value="40" />
	<param name="controller" 
	       value="true" />
	<param name="autostart" 
	       value="0" />
	      </object>
<!--<![endif]-->
 
<!--[if ie]>

Is that what I was supposed to do?
Because I dont even get a player showing up in my browser!
Thanks for your help!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Why not just drop that

Why not just drop that horrible 'embed' tag altogether? I recently had to embed mp4 in a site, using simply the 'object' element with data attr and mime type set I could get the flash player running in all browsers inc IE7/8 only when I tested in in IE9 did I get nada, blank player, so using the same approach as Gary I simply repeated the object elements opening tag but in the second version I added the classid attr to tell IE what activex control to work with for Win media player you'd use 'classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"'

Wrapping the two opening object tags in [!IE] and [if IE] worked fine, all IE browsers displaying and running the video correctly with all other browsers simply running with the object tag without clsid.

You might also think about adding the codebase param

Think that we may have reached the point where the embed tag can finally be dropped.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Is that what I was supposed

Is that what I was supposed to do?
Because I dont even get a player showing up in my browser!

Look at Gary's example, in yours where is the embed tag ?

With what you showed you wouldn't get anything showing in IE.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 33 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

What do you mean? I have my

What do you mean? I have my embed tag in the <head> of my document, in <style> just like he did.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not quite

Those are style rules. You can delete them if you wish. This is the part that matters.

…
</object>
<!--<![endif]-->
 
<!--[if ie]>	
    <embed src="Try.mp3" 
	   width="140" 
	   height="40" 
	   autostart="false" 
	   loop="FALSE">
    </embed> 
<![endif]-->
      <br />
      My MP3 player
    </p>

When a solution is offered, and it doesn't work, it is a Good Thing® to verify that you applied it exactly as presented. Obviously, in this case, the file name is excepted. I should have posted with yours instead of mine. Wink My bad.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

What do you mean? I have my

What do you mean? I have my embed tag in the of my document, in just like he did.

Ah ok silly me didn't spot that; 10 years of doing this stuff I should have spotted the embed tag in a style declaration in the head of a document Wink

And ignore my foolish ramblings about the object tag and embed tag, again the ramblings of a mad man!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 33 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

I really appreciate your

I really appreciate your help. however, when I follow your solution, I still get a pop-up window that says "adobe flash player has stopped a potentialy unsafe operation..." In IE, the players appear anyways, and in FF, the players dont appear at all....
Thanks

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Well

The code example I gave you does work. If yours doesn't, you have not implemented exactly what I gave you. Please post your code, else go over your code and find your error.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 33 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Here's my code. Hope you san

Here's my code. Hope you san tell what's blocking it from working. (Maybe it's just my pc?) In IE, the player shows up, but with a message "Adobe flash player has stopped a potentially harmful action..." And in FF, that message appears, and the players don't.
Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
 
<title>Beatle Song Profiles</title>
<link rel="stylesheet"type="text/css"href="gloabal_css.css"/>
 <meta http-equiv="Content-Type" 
	  content="text/html; charset=UTF-8" />
 
  <style type="text/css">
      object,
      embed {
        border: 1px solid black;
        height: 40px;
        width: 140px;
        }
 
      #player {
        text-align: center;
        }
 
    </style>
 
 
</head>
 
<body>
	<div id="wrapper"> <!--start wrapper-->
 
    	<div id="header"> <!--start header-->
        	<img class="logo"src="images/logo_homepage.jpg" />
 
            <span class="slogan">The musical canon of the beatles</span>
            <a href="#"><img href="#"class="viewCart"src="images/view_cart.jpg" /> </a>
 
        </div> <!-- end header-->
 
        <div id="nav"> <!--start nav-->
        	<ul>
             <li><a href="index.html">Home</a></li>
             <li><a href="http://www.beatlescholarship.com"target="_blank">Beatle Scholarship</a></li>
             <li><a href="who.html">Who We Are</a></li>
             <li><a href="http://www.beatlescholarship.com/category/beatlemusings-an-anthology-of-beatle-scholarship/"target="_blank">Beatle Musings</a></li>
             <li><a href="tour.html">Lecture Tour</a></li>
             <li><a href="contact.html">Contact Us</a></li>
            </ul>
            <div class="clear"></div>
        </div> <!--end nav-->
 
        <div id="intro"> <!--start intro-->
        	<a href="http://www.beatlescholarship.com"target="_blank"><img class="bs_logo"src="images/bs_logo.gif" /></a>
            <p class="introPara">BeatleSongProfiles is a 3-minute audio presentation of every one of the 200 songs The Beatles recorded.<br /><br /> It provides expert commentary by Beatle scholars and music critics on the origins and inspiration of the song, how the track was performed and recorded, why the music is unique, and an explanation of the meaning and interpretation of the lyrics.</p>
            <div class="clear"></div>
        </div> <!--end intro-->
 
        <div id="samples"> <!--start samples-->
        	<h2>Audio Samples</h2>
            <span class="audio">Listen to three sample "Beatle Song Profiles" </span>
            <div class="audioSamples">
 
         		<dl class="mpThree">  
 
               	 <dt> <!--<embed src="aharddaysnight.mp3" width="140" height="40" autostart="false" loop="FALSE"></embed>-->
                     <p id="player">
<!--[if !ie]> -->
      <object data="aharddaysnight.mp3"
	      type="audio/x-mpeg">
	<param name="autoplay"
	       value="false" />
	<param name="width"
	       value="140" />
	<param name="height"
	       value="40" />
	<param name="controller" 
	       value="true" />
	<param name="autostart" 
	       value="0" />
 
      </object>
<!--<![endif]-->
 
<!--[if ie]>	
    <embed src="Try.mp3" 
	   width="140" 
	   height="40" 
	   autostart="false" 
	   loop="FALSE">
    </embed> 
<![endif]-->
      <br />
 
    </p>
 
</dt>
                 <dd class="songTitleOne">A Hard Day's Night</dd>
                </dl>
 
                <dl class="mpThree">  
 
               	 <dt><embed src="help.mp3"width="140" height="40" autostart="false" loop="FALSE"></embed></dt>
                 <dd class="songTitleTwo">Help</dd>
                </dl>
 
                <dl class="mpThree">  
 
               	 <dt><embed src="eleanorrigby.mp3" width="140" height="40" autostart="false" loop="FALSE"></embed></dt>
                 <dd class="songTitleThree">Eleanor Rigby</dd>
                </dl>
 
 
            </div>
 
            <div class="clear"></div>
        </div> <!--end samples-->
 
        <div id="products"> <!--start products-->
       <p class="rollPara"> Rollover each product thumbnail to read the list of songs included in each product.</p>
        	<dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_one.jpg"/><span><img src="images/p_one_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 1<br />Abbey Road Side 1</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
            <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_two.jpg"/><span><img src="images/p_two_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 2<br />Abbey Road Side 2</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
            <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_three.jpg"/><span><img src="images/p_three_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 3<br />Beatle Classics Vol 1</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
            <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_four.jpg"/><span><img src="images/p_four_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 4<br />Beatle Classics Vol 2</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
             <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_five.jpg"/><span><img src="images/p_five_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 5<br />Beatle Classics Vol 3</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
              <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_six.jpg"/><span><img src="images/p_six_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 6<br />Beatle Classics Vol 4</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
            <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_seven.jpg"/><span><img src="images/p_seven_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 7<br />Beatle Classics Vol 5</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
            <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_eight.jpg"/><span><img src="images/p_eight_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 8<br />Beatle Classics Vol 6</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
            <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_nine.jpg"/><span><img src="images/p_nine_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 9<br />Beatle Classics Vol 7</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
            <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_ten.jpg"/><span><img src="images/p_ten_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 10<br />Beatle Classics Vol 8</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
             <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_eleven.jpg"/><span><img src="images/p_twelve_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 11<br />Help!</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
           <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_twelve.jpg"/><span><img src="images/p_eleven_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 12<br />Let It Be</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
            <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_thirteen.jpg"/><span><img src="images/p_thirteen_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 13<br />Magical Mystery Tour</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
            <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_fourteen.jpg"/><span><img src="images/p_fourteen_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 14<br />Revolver</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
             <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_fifteen.jpg"/><span><img src="images/p_fifteen_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 15<br />Rubber Soul</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
             <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_sixteen.jpg"/><span><img src="images/p_sixteen_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 16<br />Sgt. Peppers Side 1</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
             <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_seventeen.jpg"/><span><img src="images/p_seventeen_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 17<br />Sgt Peppers side 2</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
 
             <dl class="productdl">
 
            	<dt>
 
                    <a class="thumbnail" href="#thumb"><img src="images/p_eighteen.jpg"/><span><img src="images/p_eighteen_t.jpg" /></span></a>
 
 
                </dt>
                <dd>
                	<span class="volume">Volume 18<br />The White Album</span>
                    <div class="clear"></div>
                    <a href="#"><img class="buy"src="images/ej_add_to_cart.gif" /></a>
                </dd>
            </dl>
            <div class="clear"></div>
        </div> <!--end products-->
 
 
 
 
    </div> <!--end wrapper-->
    <div id="footer"> <!--start footer-->
    <p class="footerPara">&copy;The Center for Beatle Scholarship &shy; All Rights reserved | Site by<a class="sd" href="mailto:[email protected]" >Suave Design</a></p>
 
        </div> <!--end footer-->
 
    <script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script> 
</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

<!--[if ie]> <embed

<!--[if ie]>	
    <embed src="Try.mp3" 
	   width="140" 
	   height="40" 
	   autostart="false" 
	   loop="FALSE">
    </embed> 
<![endif]-->

You forgot to change the file name to "aharddaysnight.mp3".

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 33 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

www.beatlesongprofiles.comI

www.beatlesongprofiles.comI wish I can say that that solved the problem, but it didnt! Maybe it's just my pc, that doesnt let me view it properly for security reasons. My url is www.beatlesongprofiles.com
Can you see if its working for you??
Thanks loads!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Empty file on server

I only get an empty file.

[email protected] /cygdrive/c/wamp/www
$ mkdir beatles; cd beatles/; wget http://www.beatlesongprofiles.com
--2012-06-20 17:11:08--  http://www.beatlesongprofiles.com/
Resolving www.beatlesongprofiles.com (www.beatlesongprofiles.com)... 74.220.207.154
Connecting to www.beatlesongprofiles.com (www.beatlesongprofiles.com)|74.220.207.154|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 0 [text/html]
Saving to: `index.html'

    [ <=>                                   ] 0           --.-K/s   in 0s

2012-06-20 17:11:08 (0.00 B/s) - `index.html' saved [0/0]

Server response header:

Date: Wed, 20 Jun 2012 22:07:31 GMT
Server: Apache
Last-Modified: Wed, 20 Jun 2012 19:35:09 GMT
Etag: "cef80dd-0-4c2ec7f339540"
Accept-Ranges: bytes
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 20
Content-Type: text/html

200 OK
The twenty bytes shown here are probably part of the gzip header.

Directory listing after get:

[email protected] /cygdrive/c/wamp/www/beatles
$ ls -al
total 12
drwxr-xr-x+ 1 gt             None 0 Jun 20 17:11 .
drwxr-xr-x+ 1 Administrators None 0 Jun 20 17:11 ..
-rw-r--r--+ 1 gt             None 0 Jun 20 14:35 index.html

:shrug: Did you use the correct ftp mode when uploading?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 33 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

www.beatlesongprofiles.comoop

www.beatlesongprofiles.comoops, sorry. my index.html was blank.
Can you try again?
www.beatlesongprofiles.com