Mp3s_in_glow

A while ago I blogged about adding some functionality to glow: Glow Kludges, in a fairly crude way. This technique for embedding players for audio and video content into glow semi- automatically has proved useful to several teachers and classes and in a few groups I’ve created.

I’ve managed to refine some of this a bit recently for both audio (mp3) files and some video formats, this is one of the improved techniques.

Again the idea is to replace a link to an mp3 files in a glow document library with an embedded Flash player. This avoids users having different behaviours when clicking on a link to an mp3 depending on their operating system, browser and settings

We use 2 JavaScript libraries jQuery and the jQuery SWFObject Plugin and a small fragment of code, links to the libraries (jQuery is hosted by google and can be loaded from there, I’ve uploaded jQuery SWFObject to some glow webhosting space) and the Dewplayer Flash mp3 player.

The links to the libraries and code are put in a glow xml webpart:

//first link to the 2 libraries
<script type = "text/javascript"src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" > </script>
<script type = "text/javascript"src = "http://publicwebsites1.glowscotland.org.uk/jjjs/jquery.swfobject.min.js" > </script>
 <span style="color:#0080FF">// now replace links to mp3s with flash player</span>
<script type = "text/javascript "charset = "utf - 8 " >
$(document).ready(
function() {
// href$=.mp3 is the selector finds all links to mp3 files
    $('a[href$=.mp3]').each(function() {
        audio_file = $(this).attr('href');
        $(this).flash(
        {
// dewplayer.swf is the flash document hosted in a glow webhosting site
            swf: 'http://publicwebsites1.glowscotland.org.uk/jjjs/dewplayer.swf',
// these arguments will be passed into the flash document
            flashvars: {
                mp3: audio_file,
            },
            height: 20,
            width: 200,
        }
        );
//we need to stop the link to the file working
        this.onclick = function() {
            return false;
        };
    }
    );
});
</script>

Basically with the above snippet of code in an xml webpart any links to mp3 files on a page will be converted into a flash player. The xml webpart can be hidden by setting its titlebar to none. When pupils upload mp3 files into a document library on a page the flash players will be embedded.

jQuery is an extremely powerful javascript library that is easy to use by folk like me with very limited JavaScript knowledge and very useful for adding functionality to glow.

By the By anyone interested in altering glows appearance should check out the Consolarium group, Charlie Love has sorted out how to apply a custom theme to the pages there and posted an explanation and resources on his blog.

A short while ago I wrote about using JavaScript in glow: Glow Kludges and noted that Fraser Davidson had briefly showed me his use of XSL in glow. I had hoped to catch up with Fraser to find out more about this, but have not managed to yet. He had mentioned that it should be possible to combine Javascript with the pages produced from xml (say a rss feed) and styled with XSL.

This weekend I was looking at this again, due to the horrible weather, and started googling XSL, while I’ve not got a real(any) understand of XSL I have managed to do my usual copy, paste & mangle and got some interesting results. I was able to take various rss feeds, format them with XSL and then insert media players with JavaScript. I don’t really know enough to understand this, but have made a wee screencast to some of the things I’ve been playing with.

One tip I do have for editing xml and xsl in glow is not to use the glow interface, just set links to your XML (and optionally XSL) in the XML webpart. These file then can be edited and updated without going into the glow ‘modify shared page stuff’ trying to edit the xml or xsl in Safari or firefox in a tiny text box is a pain.

I’d be interested in working with other glow folk to see where this could go, I wonder if a national group could be set up for discussion and testing.

It does make me wonder why these potentially powerful techniques have not been explained or documented by LTS or RM they would have answered many of the folk who were disappointed by lack of RSS support in glow.

The screencast is pretty rough, more of a thinking aloud one while looking at the screen than a planned out video, but I’d be keen to know what you think about this.

Original video replaced by vimeo copy (11.07.2011)

This was going to be my TeachMeet talk at the Scottish Learning festival this year, if my name had been pulled out of the virtual fruit machine.

kludge: (a badly assembled collection of parts hastily assembled to serve some particular purpose (often used to refer to computing systems or software that has been badly put together)) wordnetweb.princeton.edu/perl/webwn

The kludge refers in this case to my, fairly clunky, attempts to change some things about glow’s interface.

I’ve had a love/hate relationship with glow since I first saw it; I love the concept (What is Glow?) and hate some of the GUI and user experience. Since watching and being a little involved in glow training I hate some of the difficulties folk have doing simple things but I love seeing the inspiring work teachers and pupils have done in very a short space of time. (I saw great presentations from Marjory Murphy and Geraldine Shearer, both from North Lanarkshire, in the glowing lounge .)

Last week I was working with a primary 6 class using GarageBand to create some simple music, the idea was then to upload the pupil files to a glow group into a document library and discuss the music in a discussion forum below.

The group is a local Authority one, and the hope is that eventually pupils may comment and assess work from other classrooms and schools.

Glowdocs

Unfortunately when the children started trying to listen to each others music, the files downloaded and opened in itunes, rather that just played in the browser. This lead to a little confusion and made it hard to move from listening, back to the browser and into a discussion.

I had been using an xml webpart at the top of the page, to make the glow page a little prettier:

Garagebandglowtop

So I started copying the links to the mp3 files and using dewplayer to provide a flash player. It quickly became apparent that this was going to make the page very big and the players would be separated from the discussion by the document library. It would create a lot of work for me and would not be easily for most teachers to duplicate. I really wanted to automate the process and I’ve found one way to do that.

I’ve seen and used the Anarchy Media Player on many blogs. This is a JavaScript solution for turning links to media into media players:

Anarchy Media Player 2.5 for WordPress, WordPressMu and Standalone Javascript will play any simple href link to mp3, flv, Quicktime mov, mp4, m4v, m4a, m4b, 3gp as well as Windows wmv, avi and asf files, in the appropriate player on your web page.

I though I might give it a try. I need to upload a folder full of various files to a website outside glow, as I could not get Glow to accept a JavaScript file in a document library. Once I’d done that I needed to do some simple configuration and then added this fragment to the xml webpart:

The automagically turned the document library above into this:

Glowdocswithplayer

Each link to an mp3 file is changed into a flash player which plays that file.

Brief testing seems to show that this will work for .mov .flv video files too. There seems to be some browsers issues which I am testing. I’ve also tried a few experiments with the shadowbox-js media viewer and the jQuery JavaScript Library with some success, again a lot of browser testing to do. My Javascript knowledge is minimal to say the least but I had a couple of brief conversations in the glowing lounge at the Scottish Learning festival this week and was introduced to Fraser Davidson who works for RM supporting glow. He showed me some lovely stuff he has been doing with XSL to embed and beautify various feeds into glow. He also told me, if I picked it up correctly, that we could export and make available an xml webpart that already has the Javascript links and code to produce the sort of transformation of a document library I’ve been playing with. That would mean that folk would just need to add a webpart to their page to get the same sort of effect, no coding needed. I am hoping to get together with Fraser to find out more and swap ideas.

Later today I hope to attend the Glow Development Needs You! event at LTS and find out more about some alterations and enhancements of glow. It looks like there may be quiet a lot to look forward to in glow soon.