Website Design & Marketing

Tweet this on Twitter Bookmark this on Technorati Stumble this on StumbleUpon Bookmark this on Reddit Bookmark this on furl Bookmark this on Digg Bookmark this on Delicious Bookmark this on Blinklist
Subscribe to our RSS Feed
jQuery Media : A Fun Tutorial on Sounds, Video, & Roll Overs
Posted in Javascript / AJAX on August 3rd, 2009 by Rusty

Tags: , , ,

This article was written out of joy in finding out that jQuery has the capabilities to play sounds and music on your website. Hurray! I love the possibilities of javascript and xml and embrace it as much as I can without making the website too overwhelming with AJAX or non-search friendly.

We want to start by making sure you have the required libraries. Starting with the latest jQuery. You will also need the Media plugin. For the sounds example towards the bottom you will need the Sound plugin.

Playing Media Files

Let’s start with a basic html page which will house our media player.

1
2
3
4
5
6
7
8
9
10
11
12
13

         <!--
         This is where we link to our media file it supports:
          Quicktime aif,aiff,aac,au,bmp,gsm,mov,mid,midi,mpg,mpeg,mp4,m4a,psd,qt,qtif,qif,qti,snd,tif,tiff,wav,3g2,3pg
          Flash	flv, mp3, swf
          Windows Media Player 	asx, asf, avi, wma, wmv
          Real Player	ra, ram, rm, rpm, rv, smi, smil
          Silverlight	xaml
          iframe	html, pdf
         -->
 
This is my example jquery music player.
 
         <a class="media" href="path/to/sound.wav">media file</a>

With our html page built out we add our jQuery scripts between our header tags:

1
2
3
4

<script src="path/to/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="path/to/jquery.metadata.js" type="text/javascript"><!--mce:1--></script>
<script src="path/to/jquery.media.js" type="text/javascript"><!--mce:2--></script>
<script type="text/javascript"><!--mce:3--></script>

With this setup your media file link will be converted into a media player where visitors can now listen or view your media file. keep in mind if you use mp3 or flash video you will need a media player. You can download it here.

VIEW THE DEMO

Let’s get into more advanced options. Now these options can be provided using an options object or by using the jQuery Metadata Plugin which can be downloaded in the beginning of this tutorial.

The following options are provided by the media player plugin by default:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// global defautls; override as needed
$.fn.media.defaults = {
    preferMeta:    1,         // true if markup metadata takes precedence over options object
    autoplay:      0,         // normalized cross-player setting
    bgColor:       '#ffffff', // background color
    params:        {},        // added to object element as param elements; added to embed element as attrs
    attrs:         {},        // added to object and embed elements as attrs
    flashvars:     {},        // added to flash content as flashvars param/attr
    flashVersion:  '7',       // required flash version
 
    // default flash video and mp3 player
    // @see: http://jeroenwijering.com/?item=Flash_Media_Player
    flvPlayer:     'mediaplayer.swf',
    mp3Player:     'mediaplayer.swf',
 
    // Silverlight options
    // @see http://msdn2.microsoft.com/en-us/library/bb412401.aspx
    silverlight: {
        inplaceInstallPrompt: 'true', // display in-place install prompt?
        isWindowless:         'true', // windowless mode (false for wrapping markup)
        framerate:            '24',   // maximum framerate
        version:              '0.9',  // Silverlight version
        onError:              null,   // onError callback
        onLoad:               null,   // onLoad callback
        initParams:           null,   // object init params
        userContext:          null    // callback arg passed to the load callback
    }
};

Any global settings can be explicitly overridden by simply changing its value. For example:

1
2

// change default flash player
$.fn.media.defaults.flvPlayer = 'myCoolPlayer.swf';

So let’s use a couple of these options to get some different results. Going back to our header tag scripts we change the options to display a video.

1
2
3
4

<script src="path/to/jquery.js" type="text/javascript"><!--mce:4--></script>
<script src="path/to/jquery.metadata.js" type="text/javascript"><!--mce:5--></script>
<script src="path/to/jquery.media.js" type="text/javascript"><!--mce:6--></script>
<script type="text/javascript"><!--mce:7--></script>

Now that you understand how to use this media plugin there are tons of available options and dynamic capabilities to really make this a marvelous contribution to the jQuery library.

Roll Over Sounds

Perhaps you would like to perform roll over sounds or onclick sounds using jQuery. This can be done pretty easily using the Sounds plugin which you can download in the beginning of this tutorial. Let’s start with a full source example page.

1
2
3
4
5
6
7
8

 
<script src="path/to/jquery.js" type="text/javascript"><!--mce:8--></script>
<script src="path/to/jquery.sound.js" type="text/javascript"><!--mce:9--></script>
<script type="text/javascript"><!--mce:10--></script>
 
This is my example jquery sounds on rollover.
 
         <a class="rollover" href="#">mouse over sound</a>

You should have a great understanding how these plugins can help enhance your website to play your media content or cool rollover sounds. If you have any questions or still need help feel free to comment.

Related Blogs

Related Posts:

  • No Related Posts

« Developing an Effective Social Media Marketing Strategy | Top 10 Social Networking Sites »

This entry was posted on Monday, August 3rd, 2009 at 10:45 am and is filed under Javascript / AJAX. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

1 Response to jQuery Media : A Fun Tutorial on Sounds, Video, & Roll Overs

jQuery Media-A Fun Tutorial on Sounds-Video and Roll Overs | jQuery Wisdom

November 16th, 2009 at 8:52 am

[...] it as much as I can without making the website too overwhelming with AJAX or non-search friendly. Web Site Demo Share and [...]