1 Reply Latest reply on Jun 24, 2013 2:21 AM by rstasik

    Help with adding audio files to page

    rstasik Level 1

      I am using DW CS5.  I have had numerous troubles adding audio files to any page.  Please know that I am not at all computer savy when it comes to html codes etc.  But I have been working with DW CS5 and have a functional website and my pages validate.  That being said, please be patient with me if I am asking stupid questions or don't understand the solution.

       

      Now to the problem....I originally wanted to add mp3 files...but I am not sure how to work with plugins or which plugin to use.

       

      Therefore, I converted my mp3 files to swf and used the insert media file feature in DW CS5.  But when I look at the finished page...I only see a big white box.  Nothing happens when you click on it. 

       

      First question...which is the best method to add audio files?

      Second question...what steps do I need to follow achieve the desired result?

       

      Note:  there is one validation error on this page and I'm not sure why or how to fix it.  Any suggestions here would be greatly appreciated.

       

      Here is the code for the page (or you can go to this link:  http://02cada7.netsolhost.com//test2/cupotea.shtml):

       

      <!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>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <title>cupotea</title>

      <style type="text/css">

          body {

              margin: 0;

              width: 100%;

              background-color: #000; /* change this to whatever the background color should be for the sides (and the bottom) */

          }

         

          #wrapper {

              min-width: 960px; /* this is how wide the actual content area will be (the centered part) */

              max-width:    1260px;

              margin-left: auto;

              margin-right: auto;

              padding: 0 0 5 5; /* keep the first two values at 0, the others are for left and right space from the edge of the background */

              background-color: #000; /* this is the background color of the main content area */

              color: #FFF; /* this is the default font color */

          }

       

       

          #top {

              height: 75px;

              font-size: 60px;

              font-style: italic;

              font-weight: bold;

              color: #FFFDE6;

              background-color:#750700;

              text-align: center;

          }

          #left {

              width: 120px; /* this is the width of the side area. this will take some of the width of the wrapper, above */

              float: left;

              padding-top:10px;

          }

       

          #main {

              min-width: 840px; /* this is the width of the main content area. This, plus the width of the side, should equal the width of the wrapper */

              max-width: 1340px;

          float:left;

          background-color:#000;

          color: #000;

      }

       

      #body {

          width:853px;

          float:left;

          color: #fffde6;

          padding-right: 10px;

          padding-left: 10px;

      }

       

      #bodyleft {

          width:425px;

          float:left;

          padding-top:70px;

      }

      #bodyleft2 {

          width:425px;

          float:left;

          padding-top:70px;

      }

      #bodyright {

          width:425px;

          float:left;

          padding-top:70px;

      }

      #bodymiddle {

          width:853px;

          float:left;

          color: #fffde6;

          padding-right: 10px;

          padding-left: 10px;

      }

      a img {border:none; }

       

      .standardparagraph {

          font-family: Arial, Helvetica, sans-serif;

          font-size: 12pt;

          color: #fffde6;

          text-align: justify;

          font-weight: normal;

      }

       

      .standardparagraph2{

          font-family: Arial, Helvetica, sans-serif;

          font-size: 12pt;

          color: #fffde6;

          text-align: justify;

          font-weight: normal;

          border-top:thin;

          border-color:#666;

          border-bottom-style:solid;

      }

      .standardparagraph3{

          font-family: Arial, Helvetica, sans-serif;

          font-size: 12pt;

          color: #fffde6;

          text-align:    center;

          font-weight: normal;

      }

      .standardparagraph4{

          font-family: Arial, Helvetica, sans-serif;

          font-size: 12pt;

          color: #fffde6;

          text-align: center;

          font-weight: normal;

          border-top:thin;

          border-color:#666;

          border-bottom-style:solid;

      }

       

      .pagetitle {

          font-family: Arial, Helvetica, sans-serif;

          font-size: 16pt;

          font-weight: bold;

          color: #fffde6;

          text-align: center;

      }

      </style>

      //<![CDATA[

      function MM_swapImgRestore() { //v3.0

        var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

      }

      function MM_preloadImages() { //v3.0

        var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

          var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

          if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

      }

       

      function MM_findObj(n, d) { //v4.01

        var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

          d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

        if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

        for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

        if(!x && d.getElementById) x=d.getElementById(n); return x;

      }

       

      function MM_swapImage() { //v3.0

        var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

         if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

      }

       

      //]]>

      <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

      <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

      <script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>

      <link href="SpryAssets/SpryMenuBarVertical-2.css" rel="stylesheet" type="text/css" />

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

      <script type="text/javascript" src="lightbox/js/prototype.js"></script>

      <script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects"></script>

      <script type="text/javascript" src="lightbox/js/lightbox.js"></script>

      <link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

      <style type="text/css">

      a:link {

          color: #06F;

      }

      a:visited {

          color: #06F;

      }

      a:hover {

          color: #06F;

      }

      a:active {

          color: #06F;

      }

      </style>

      </head>

       

      <body onload="MM_preloadImages(''images/buttons/miscfamily2.jpg','images/buttons/home2.jpg','im ages/buttons/familytrees2.jpg','images/buttons/legacy2.jpg','images/buttons/polska2.jpg',' images/buttons/dziekuje2.jpg','images/buttons/calendar2.jpg','images/buttons/dziekuje2.jpg ','images/buttons/StasikEarly1800sto1870-2.jpg','images/buttons/JanikMid1800sto1866-2.jpg' ,'images/buttons/Stasik1857toPresent-2.jpg','images/buttons/1st-generation-2.jpg','images/ buttons/2nd-generation-2.jpg','images/buttons/3rd-generation-2.jpg','images/buttons/4th-ge neration-2.jpg','images/buttons/5th-generation-2.jpg','images/buttons/6th-generation-2.jpg ','images/buttons/7th-generation-2.jpg','images/buttons/january-2.jpg','images/buttons/feb ruary-2.jpg','images/buttons/march-2.jpg''images/buttons/april-2.jpg','images/buttons/may- 2.jpg','images/buttons/june-2.jpg','images/buttons/july-2.jpg','images/buttons/august-2.jp g','images/buttons/september-2.jpg','images/buttons/october-2.jpg','images/buttons/novembe r-2.jpg','images/buttons/december-2.jpg')">

      <div id="wrapper">

        <div id="top">

          <div align="center">THE STASIK FAMILY</div>

        </div>

        <div id="left">

      <!--#include virtual="includes/menu.html" -->

        </div>

        <div id="main">

         <div align="center">

          <br />

          <span class="pagetitle">CUP O' TEA</span><br />

          </div>

          <div id="body">

              <p class="standardparagraph2">When preserving family history, nothing can compare to sitting down with a Grandparent or Great Aunt or Uncle over a cup of tea; listening to them reminicse about the past.  Unlike handwritten accounts, there is opportunity to ask questions or delve further into the subject.  Even better, recording such conversations so they can be shared for generations to come.<br />

      <br />

       

      The following audio files were created by Virginia (Stasik) Zarow at the request of Laura (Stasik) Schmidt and Carrie (Stasik) Kot.  There were a total of five cassette tapes, ranging from 1 hour to a 1 1/2 halfs in length.  Scott Freeson converted each tape to digital format and then they were broken down into various segments for a total of 7 audio files.  It is recommended that you listen to each tape in the order presented to maintain the proper timeline and context.<br /><br /></p>

      <p class="standardparagraph">The first five audio files were recorded by Aunt Virginia in response to questions posed by Laura (Stasik) Schmidt and her sister Carrie (Stasik) Kot.  Aunt Virginia re-recorded her responses in August 2009 after noticing some mistakes in the original recording.<br />

      <br />

      Note:  Virginia refers to her father as "tata", which is the Polish word for dad.</p>

      <div id="bodyleft">

      <span class="standardparagraph">What are the recollections you have about your parents, in particular their interests, their hobbies, and their lives and faith?<br />

      What did your dad do around the house?<br />

      How did your mom relax?<br /><br /></span>

      <span class="standardparagraph">How did you celebrate holidays and birthdays? <br />

      Did you go on vacations?<br />

      What did you and your brothers do for fun?<br /><br /></span>

      <span class="standardparagraph">What do you know about Jacob Sikora and Catherine Dziwak, the extended family and their faith?<br />

        - Jacob Sikora and Catherine (Dziwak) Sikora<br />

        - Michael (aka Patsy)<br />

        - Magdeline (aka Chochi)<br />

        - Angeline (aka Nellie) - includes information about Frank &amp; their children<br />

        - Elizabeth (aka Diane)<br />

        - John<br />

        - Peter<br />

        - Walter<br /><br /></span>

      <span class="standardparagraph">  What was the house like?<br />

        - In the beginning<br />

        - The 1936 flood<br />

        - Renovations<br />

        - The final demise<br /><br /></span>

      <span class="standardparagraph2">Miscellaneous tidbits...<br />

        - Polish Proverbs<br />

        - Ancedotes<br /><br /></span>  </div>

      <div id="bodyright">

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="50" height="25" id="FlashID" title="virginia1of5">

        <param name="movie" value="audiofiles/virginia1of5.swf" />

        <param name="quality" value="high" />

        <param name="wmode" value="opaque" />

        <param name="swfversion" value="15.0.0.0" />

        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->

        <param name="expressinstall" value="Scripts/expressInstall.swf" />

        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->

        <!--[if !IE]>-->

        <object type="application/x-shockwave-flash" data="audiofiles/virginia1of5.swf" width="50" height="250">

          <!--<![endif]-->

          <param name="quality" value="high" />

          <param name="wmode" value="opaque" />

          <param name="swfversion" value="15.0.0.0" />

          <param name="expressinstall" value="Scripts/expressInstall.swf" />

          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->

          <div>

            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

          </div>

          <!--[if !IE]>-->

        </object>

        <!--<![endif]-->

      </object>

      <span class="standardparagraph3">for the media file<br /><br /><br /><br /></span>

      <span class="standardparagraph3">for the media file<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></span> 

      <span class="standardparagraph3">for the media file<br /><br /><br /><br /><br /><br /></span>

      <span class="standardparagraph4">for the media file<br /><br /><br /><br /></span>

          </div>

          <div id="bodymiddle"><span class="standardparagraph">The second tape, also recorded in August 2009, consists of 2 clips and covers the years 1944 through 1947.</span></div>

      <div id="bodyleft2">

      <span class="standardparagraph">Summer of 1944 to December of 1945<br />

        - Meeting of Frank Zarow<br />

        - New Years Eve - 1944<br />

        - Prom Night - May 1945<br />

        - First boyfriend, Eddie Yesh<br />

        - First job as a hygienist<br />

        - Meeting of John Zarow<br />

        - Enrolled at Indiana State Teachers College<br />

        - Meeting of Ted Zaroff<br />

        - Thanksgiving - 1945<br />

        - Florian Stasik Airforce injury<br />

        - Christmas - 1945<br />

        - New Years Eve - 1945</span>

      <span class="standardparagraph">Note:  Per Virginia, Ted's name should be spelled Zarow, like most of his brothers.  There was a mixup with his birth certificate and his last name was mispelled (although it is phonetically correct).  He chose to keep this spelling as did one of his brothers.<br /><br /></span>

      <span class="standardparagraph">January 1946 to December 1947<br />

        - Takes job as cook/housekeeper<br />

        - Break-up with Eddie Yesh<br />

        - Frank Zarow passes away<br />

        - Christmas 1946<br />

        - Meets John Zarow again<br />

        - New Years Eve 1946<br />

        - John courts Virginia<br />

        - First date with John<br />

        - John's father passes away<br />

        - Christmas 1947</span>

      <span class="standardparagraph">Virginia mentions visiting cousin Helena in Poland.  She is referring to <a href="4-0-helenastasikguzik.shtml">Helena (Stasik) Guzik </a>and her trip to Poland in 1990.  </span></div>

      <div id="bodyright2">

      <span class="standardparagraph3">for the media file<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></span>

      <span class="standardparagraph3">for the media file<br /><br /><br /><br /></span></div>   

      <script type="text/javascript">

      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

      </script>

      </div>

      </div>

      <script type="text/javascript">

      swfobject.registerObject("FlashID");

        </script>

        </div>

      </body>

      </html>

        • 1. Re: Help with adding audio files to page
          rstasik Level 1

          Woohoo! I was able to resolve the issue including the validation issue.  But I have a follow up question...

           

          Currently if you click on the play button another window pops up which has the play/control/stop buttons to control the audio file.  The attribute is set to new window.  If I change the attribute to parent window, then the page that has the control buttons overlays ontop of the page with the link.

           

          To get back to the original page, one must click on the back arrow near the address bar.

           

          Isn't there a way to not have a separate window appear?  In other words, the controls are embeded into the parent page?

          1 person found this helpful