Training

• Home
• Training Classes

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

± Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

---

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

Audio - Adding to a Web Page

1. Create a folder for your audio files.
2. Select the audio file to add to the web page. Make sure you have rights to the music file before you use it!
3. Upload the audio file to the web hosting.
4. Embed the audio file - Every web browser treats videos differently so you should use both old and new HTML embed tags. (<object> and <embed>).
5. Open Dreamweaver
6. Create a new document Ctrl n or place the cursor on the web page where you want to insert the audio file.
7. In the Insert panel select Media: Plugin. Select the file that you want to add to the web page.
   
8. Dreamweaver will insert the following code:
   <embed src="/Multimedia/audio/01 - Dewey Square.mp3" width="32" height="32"></embed>
9. The following parameters should be added to give the user more control:

• pluginspage - where to get the plugin software
• type - specifies the plugin. If this parameter is not added, browsers will give different results:
  • The image below show the controls that Firefox, Internet Explorer and Opera display.
    
  • Chrome will autostart the audio file and will display which is not very helpful. If you click the black box it will stop the audio.
  • Safari will give an error message saying it cannot find the Internet plugin.
  • When the plugin is specified, Firefox, Opera, Chrome, and Safari display the following controls:
    
• src - the path to the audio file REQUIRED
• width - the width of the media player controls
• height - the height of the media player controls
• autostart - false tells the player not to start automatically - RECOMMENDATION: do not autostart
• hidden - false tells the controls to be displayed - RECOMMENDATION: the user should be able to control the audio
• loop - false tells the audio file not to repeat - RECOMMENDATION: it is probably better not to have the audio repeat

Compare

Example 1 and Example 2 below show the code and the audio controls that will be displayed. Review this page in different browsers and versions of browsers to see the difference.

Example 1:

<embed
src="/Multimedia/audio/01 - Dewey Square.mp3"
width="300"
height="45"
autostart="False"
>
</embed>

Example 2:

<embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows&amp;sbp=mediaplayer&amp;ar=Media&amp;sba=Plugin&amp;"
name="MediaPlayer"
src="/Multimedia/audio/01 - Dewey Square.mp3"
width="250"
height="45"
autostart="False"
hidden="false"
loop="False"
>
</embed>

Internet Explorer vs Other Browsers

Internet Explorer uses the

<!-- IE uses Object code-->
<object id="MediaPlayer2"
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject" width="300" height="45">
<param name="autoplay" value="false" />
<param name="FileName" value="/audio/Beethoven.mp3" />
<param name="AnimationatStart" value="false" />
<param name="TransparentatStart" value="false" />
<param name="AutoStart" value="false" />
<param name="ShowControls" value="true" />

</object>

 

top of page

Page last updated: May 31, 2012 14:36 PM