ClintLalonde.net

One EdTech's attempt at balancing the ed with the tech

Desire2Share Ning Group

Just a quick note that if you administer and/or support people who use Desire2Learn, Kyle Mackie at the University of Guelph has set up a new Ning group called Desire2Share. It’s a private group and if you want to join us, contact Kyle. His credentials are on the site.

This site is outside of the official Desire2Learn community and is independent of the company. Just a bit of peer to peer support for all of us using and supporting D2L. So far there are 20+ members from around North America.

Adding audio to your website, blog or online course is pretty easy to do these days. Long gone are the days when we would force students to download and install proprietary players like Real Player or Quicktime. With the ubiquity of Flash and JavaScript, and mp3 we now have more options for delivering audio on the web than ever before.

Here are 4 audio players that I have been working with recently while redeveloping a French language course. All of these players support mp3 and are built using JavaScript and Flash. 2 of the players (Playtagger and  Yahoo Media Player) only require a single line of code to get working on a page. The other 2 (Wordpress Audio Plugin and the JW FLV Player) are more complicated, but much more feature rich. All will do the job of playing audio without requiring a software download or install by students and all worked when I tested them in D2L.

The links to the demo of each player will open in a new window since I didn’t want to have multiple players competing with each other on the same mp3 files.

1) Playtagger

The most basic of all the players on this list, the Delicious Playtagger, is minimalism in action. You can start, stop or add the file to Delicious. That’s about it. No pause or volume control. In fact, no audio controls whatsoever.

But what Playtagger lacks in features it makes up for in simplicity of use. Include a single line of JavaScript in your HTML, and any link to an mp3 file in your document automatically becomes playable on the page. A play icon will appear just to the left of the mp3 link.

The one little problem I have with the Playtagger is that if you click on the text link, the mp3 file may either try to load in your default media player or try to download the mp3 file to your computer, depending on your browser. It would be better if the mp3 file played in Playtagger regardless of whether you click on the Playtagger play icon or the actual text link itself.

That one minor problem aside, if you are looking for a simple option to play an mp3 file, you can’t get much simpler than Playtagger.

Playtagger in action.

2) Yahoo Media Player

Like Playtagger, the Yahoo Media Player is added to a page with a single line of JavaScript, which adds the audio player to any mp3 link on your page. Click on the play icon beside the file and the player opens up at the bottom of the screen.

The Yahoo Media Player has more features than Playtagger. There is a pause button, skip forward/back to the next/previous track control, volume control, and track and time information.If you have multiple audio files on a page, the Yahoo Media Player will play the files back to back like a playlist. In fact, there is a playlist option within the media player itself.

The Yahoo Media Player does give you more options to customize the interface and the default behaviour of the player. There are some documented hacks at the media player wiki which come in handy if you want to extend or change the player.

Another resource you will want to check out if you use the Yahoo Media Player is the blog of  Eric Fehrenbacher. Eric has written a number of scripts that extend the player and add extra features. Features like TrackSeek , which adds a slider to give users the ability to move forward and back in a track and TrackLoop which will loop through a playlist after it is finished.

Yahoo Media Player in action.

3) Wordpress Audio Player

First off, the Wordpress Audio Player is not just for the Wordpress blog platform. There is a stand alone version that can be used on any web page.

This audio player is a tad more complicated than Playtagger or the Yahoo Media Player. There is more mucking around with the code to set parameters, but the process is well documented and should be fairly straightforward to get you up and running.

You also have to download and install the scripts for the Wordpress Audio Player on your own server, unlike Playtagger and the Yahoo Media Player whose scripts are hosted on external servers. This could be a deal breaker if you don’t have access to a web server. However, if you are using D2L, you can use the file manager in D2L as a place to serve up the files from.

Those negatives aside, I think the Wordpress Audio Player has the nicest interface of the lot and packs all you need for features in a compact player. The player itself slides open and closed so it takes up very little screen space and you can change the look and behaviour of the player by changing a few values in the settings.  And unlike the Yahoo Media Player, the Wordpress Audio Player comes with a slider enabled out of the box with no need for a third party script.

Wordpress Audio Player in action.

4) JW FLV Player

The JW FLV player is by far the most full featured (and hence, the most complicated) of the 4 players here. The JW FLV Player works not only for audio files but for video as well.

Of all the players, JW FLV is the only one capable of doing true media streaming using RTMP as opposed to progressive downloading. True media streaming requires a media server. If you have access to a medai server, then JW FLV Player is your player.

Like the Wordpress Audio Player, you need to upload the Javascript and Flash files to your own server.

Configuring the player can be a bit of a frustrating affair if you are not technically inclined. Much of the documentation and tutorials feel like they were written by developers, which is okay if you are a developer but not so if you just want to get the thing working. You should feel comfortable working in JavaScript before diving into the JW FLV Player, especially if you want to customize the features or look and feel beyond the default player.

Speaking of which, the JW FLV Player does have a vibrant developer community and many developers are creating and releasing skins and addons that change the look and functionality of the default player, so you have a lot of pre built interfaces to choose from if the default interface doesn’t toggle your play button.

JW FLV Player in action as an audio only player. This is a streamed mp3 file from our Flash media server.

5) Bonus for the more geek oriented: SoundManager

Okay, if the thought of digging into the JW FLV Player code excites rather than terrifies you, then be sure to check out SoundManager. SoundManager is not a player per se, but rather bills itself as a Javascript Sound API which lets you create some pretty impressive audio players. Check out the page as playlist demo and the still-under-development-so-may-not-be-working-perfectly examples of the 360° Player Demo. However, SoundManager is very JavaScript intensive and I was never able to get it working reliably enough in D2L to use it.

And then there is HTML 5

The chances that most of these players will become obsolete once the WC3 releases HTML 5 to the world are pretty good. HTML 5 promises easier ways to embed audio and video content on web pages with standard HTML tags. The goal is to make adding multimedia content to a web page as easy as adding an image or a table is currently.

But even though HTML 5 got a huge Google boost with the demo of Google Wave, which is a fully functioning  HTML 5 web application, we’re still a few years away from it being available widely enough to rely on it as the sole method of delivering audio and video content. So in the interm we still need players to play multimedia content.

Reblog this post [with Zemanta]

Online Course Peer Review at Lake Superior College just posted a nice D2L tip on how to personalize content in a D2L course.

By inserting {firstname} into any HTML spot in your courses (news, content, release conditions, etc), D2L automatically places your students’ first names into your message.  This just adds an element of personalization to your class.  This also works if you’d like a student’s last name or username inserted — {lastname} or {username}.

I have tested a few other variables and have found that these work as well.

  • {OrgName} will show the name of the organization (in our case, Camosun Online).
  • {OrgUnitName} will show the name of the course.
  • {UserName} will show the login name of user.

I have checked the D2L documentation and can’t seem to find any reference or list of available variables so there may be more. Remember to include the brace symbol ‘{‘ and ‘}’ at the beginning and end of each variable.

Reblog this post [with Zemanta]

Demo of TiltViewer

TiltViewer is a free, customizable 3D Flash image viewing application you can add to your site to create a lovely, interactive wall of photos. In just a few minutes I put together a demonstration page to show off the effect.

The images are being pulled from my Flickr account, and if you click on the rotate icon in the bottom right hand corner, you can the Flickr description of the image along with some other data, which could make TiltViewer a nice little flash card exercise with the image on one side and answers on the reverse.

TiltViewer also integrates with Picasa or with a folder of stand alone images on your web server. And, best of all for us D2L users, I was able to get the application working in D2L without a lot of mucking, which is a bit of a surprise since anything that uses javascript often makes D2L very unhappy. Here is what TiltViewer looks like in D2L.

TiltViewer inside D2L

If you plan to use this with stand alone photos, it does require some mucking with an XML file, but the instructions are straightforward.

Reblog this post [with Zemanta]

Well, I put this video together and demonstrated this technique at a video workshop for our faculty last week, only to have it fail miserably in Internet Explorer 7. Of course. Go figure.

I have embedded dozens of YouTube videos in blogs, wikis, discussion boards and in older version of D2L (prior to 8.3) and have never had a problem. But the D2L HTML editor (which I believe is based on the open source TinyMCE editor) strips out the embed tag when you cut and paste using IE7.

This is a brutal bug, imho, and I’ve reported it to D2L as well as posted it in the D2L user community.

At any rate, here is the video, complete with a spiffy annotation (my first for a YouTube video) explaining this does not work in IE 7.

« Previous Entries  Next Page »