Cougar WebWorks

Embedding sound and video into Web pages

If the page loads with flute music playing automatically, it's running from the video embedded in Video Method 2 below.

To see the code for these methods, view the source code in the browser or save and open as a text file.

Embedding Audio

Embedding Video

Method 1: Embedding "plugin" (mp3 file) to the page code.

For the user, this requires browser to have a plugin installed (for Firefox, go to either WMP or QT). I have set autoplay to "false." Chrome doesn't display this audio player correctly - it appears in the top left, almost off the screen, and begins autoplay.

Tune: "Trouble" by Nowick Gray

Method 1: Uploading to YouTube and embedding its code.

Even if you don't have video, you can use Windows Movie Maker to make a slide show with sound track. This produces a .wmv file that then can be uploaded to YouTube (Example: )

Method 2: 3rd-party flash players.

Premium Beat: (playing "Mystic Beach" from the album "Bamboo Grove," by Nowick & friends)

This text will be replaced by the flash music player.

Method 2: Embedding video directly.

You can also embed video directly (as here); but IE requires Active X control to be installed each time! Also, Firefox ignores autoplay=false once it has been played previously.  Chrome says there is a "Missing Plug-in."

Method 3: Javascript to open and play mp3 in small new popup window.

solution a) Requires making a separate .js file. This has to be in the same directory as the html file, or to have an absolute url ref within it for the mp3 location.  Use when it's difficult to modify page head (as in WordPress blog entries). Each .js file can only point to one song.

Example: shakuhachi flute: click to play

solution b) Requires putting code in head of page (view this page source).  Example: click to play . Good for multiple songs from single page.

Method 3: Flash Video embedded directly.

A better solution (besides embedding from YouTube) is to use Flash software to create a Flash movie (see example). This requires browsers to have the Flash plugin but most do and it's easy to install if not. I include the following message:

"If video or audio players don't appear, click here for latest Flash player."

This page by Nowick Gray, Cougar WebWorks
Web design, Internet publishing, Editing and Music creation