Tech Note: Embedding Audio, Video and Image Content

[mrpicard]

One of the purposes of the BJFE Forum is to share our experiences with BJ's pedals. To this end I have extended the forum to support the embedding of audio and video content directly into a message. These new types are:

Audio

• MP3 clips
• SoundCloud clips
• MySpace music
• SoundClick songs
• SoundClick bands

Video

• Google videos
• MySpace videos
• Photobucket videos
• YouTube movies (standard and widescreen)

Photographs

• BJFE Forum Gallery
• MobileMe Web Gallery
• Picasa Web Album Slideshow (RSS Feed)
• Photobucket Slideshow

The sections below covers each media type and describes:

1. Purpose: The purpose of the embedded media player
2. Example: An example of what the embedded media player looks like once it is embedded in a message
3. Code: The specific code used to create the example
4. Explanation: Further details on the coding

  MP3 Clips  

Purpose:

Play an MP3 file located at a URL.

Example:

Download: http://www.ufoclub.it/synphoton.mp3

Code:

[mp3]http://www.ufoclub.it/synphoton.mp3[/mp3]

Explanation:

The text between the [mp3] tags must be the URL pointing to the MP3 file to be played.

  SoundCloud Clips  

Purpose:

Play a single, specific audio file held on http://www.soundcloud.com.

Example:

Code:

[soundcloud]http://soundcloud.com/dsong/bjf-syod-egdm-dhbod-demo-3-26-10-1[/soundcloud]

Explanation:

The text between the [soundcloud] tags refers to the individual SoundCloud audio file, available from the SoundCloud web site. This particular example plays demos of the SYOD, HBOD DLX and EGDM pedals played by melodichaotic.

  MySpace Music  

Purpose:

Load and play the audio files for a MySpace artist.

Example:

Code:

[myspaceaudio=36878,42831392,8944963][/myspaceaudio]

Explanation:

The three variables in the [myspaceaudio] tag are the plid (player id), profid (profile id) and artid (artistid) taken from the MySpace artist profile. All these codes must match the artist MySpace codes and must be separated by commas.

  SoundClick Songs  

Purpose:

Play a single, specific song held on http://www.soundclick.com.

Example:

Code:

[soundclicksingle]3661654[/soundclicksingle]

Explanation:

The text between the [soundclicksingle] tags refers to the individual SoundClick Song ID, available from the SoundClick web site. This particular example plays the "BJF Tea Green EQ (Amp Cranked)" song created by the artist Teahouse.

  SoundClick Band  

Purpose:

Load and play the audio files for a SoundClick band.

Example:

Now playing: Teahead

Code:

[soundclickband=Teahead]361669[/soundclickband]

Explanation:

The parameter in the [soundclickband] tag provides the band's name to appear in the media player. The number between the [soundclickband] tags refers to the band ID, available from the SoundClick web site. This particular example displays the songs for the band Teahead.

  Google Videos  

Purpose:

Load and play Google videos.

Example:

Code:

[googlevideo]8035933373921884072[/googlevideo]

Explanation:

The text between the [googlevideo] tags refers to the Google video ID. This particular example points to Fatback demonstrating the Rocketride SD-1.

  MySpace Videos  

Purpose:

Load and play MySpace videos.

Example:

Let your hair grow long

Code:

[myspacevideo]18665197[/myspacevideo]

Explanation:

The number between the [myspacevideo] tags refers to the MySpace Video ID. This particular example shows a certain pedal builder letting his hair down.

  PhotoBucket Videos  

Purpose:

Load and play PhotoBucket videos.

Example:

Code:

[photobucketvideo]http://vid246.photobucket.com/albums/gg89/reza_m/Music/led_zeppelin_-_dazed_and_confused.flv[/photobucketvideo]

Explanation:

The text between the [photobucketvideo] tags refers to the PhotoBucket video URL. This particular example points a Led Zeppelin video.

  YouTube Videos  

Purpose:

Load and play YouTube videos.

Example:

Code:

[youtube]87yq372R4Ts[/youtube]

Explanation:

The text between the [youtube] tags refers to the YouTube video ID. This particular example points to The Beatles playing "Revolution".

  YouTube Widescreen Videos  

Purpose:

Load and play widescreen YouTube videos.

Example:

Code:

[youtube-wide]mItU2k48kWo[/youtube-wide]

Explanation:

The text between the [youtube-wide] tags refers to the widescreen YouTube video ID. This particular example points to Linkin Park playing "Faint".

  BJFE Forum Gallery  

Purpose:

Display a photograph in the BJFE Forum Gallery. The post will show a thumbnail of the image that when you click on will display the large version of the photograph. An alternative is to simply embed the Image-URL or Image BBCode presented on the image details in the BJFE Forum Gallery and this will operate as a standard image tag.

Example:

Code:

[album]17[/album]

Explanation:

The text between the [album] tags refers to the BJFE Forum Gallery photo ID. This particular example provides a link to the BJFE Reference Gallery Dyna Red Distortion photograph.

  MobileMe Web Gallery  

Purpose:

Provide an interactive link to a MobileMe Web Gallery. When loaded, this object will cycle though the photographs help in the library. However, if you drag the mouse over the viewer you can view individual photos. If you then click on the individual photo a window will open with that photo enlarged. Alternatively, you can click the arrow at the bottom of the object to go the complete gallery.

Example:

Code:

[mobilemegallery=mrpicard]100335[/mobilemegallery]

Explanation:

The parameter in the [mobilemegallery] tag refers to the MobileMe user name and the text in between the [mobilemegallery] tags refers to the MobileMe Album ID. This particular example provides a link to a presentation by mrpicard of BJFE pedals.

  Picasa Web Album Slideshow  

Purpose:

Load and play a Picasa slideshow RSS feed. Because this is a RSS feed this means that the display will always update with the new photos in the album. If you press the play button the presentation will cycle through the photos. However, if you click on a specific photo that photo will then open in a completely new window.

Example:

Code:

[picasaweb=picardviews]5311552222369954449[/picasaweb]

Explanation:

The parameter in the [picasaweb] tag refers to the Picasa user name and the text in between the [picasaweb] tags refers to the RSS album ID. This particular example points to a nice presentation by user picardviews showing BJFE Pedals.

  Photobucket Slideshow  

Purpose:

Load and run a Photobucket slideshow

Example:

Code:

[photobucketslide]http://w219.photobucket.com/albums/cc60/virtualviews/a698ba77.pbw[/photobucketslide]

Explanation:

The value between the [photobucketslide]tags refers to the URL to the slideshow. This particular example runs the slideshow at http://w219.photobucket.com/albums/cc60 ... 98ba77.pbw.