The first solution, which consists in modifying every links in page at page loading is quite simple. Code below is more or less similar to those proposed earlier, except for the extension test (indexOf is a waste of time in this case, and may return false positive) and the window name (which corresponds to the name of the file).

var mp3_corrections =

{

    // returns true if href relies on a mp3 file

    is_mp3 : function(href)

    {

        var l;

        l = href.length - 4;

        return ((l >= 0) &&  (href.substr(l) === ".mp3"));

    },

    // returns the name of the window corresponding to the href file

    get_window_name : function(href)

    {

        var i;

        return ((i = href.lastIndexOf("/")) > 0) ? href.substr(i) : href;

    },

    // corrects mp3 links in the page, adding target attribute

    correct : function()

    {

        var links, link, i, l, name_regexp;



        links = document.getElementsByTagName("a");

        for(i = 0, l = links.length; i < l; i++)

        {

            link = links[i];

            if(this.is_mp3(link.href))

            {

                link.target = this.get_window_name(link.href);

            }

        }

    }

}

I won't repeat what said Yaron Shapira about code place. If you use the prototype framework, just add

Element.observe(window, "load", mp3_corrections.correct);

after the mp3_correction object définition. Otherwise, add

 mp3_corrections.correct(); 

Another solution I see, and which has the advantage to avoid delaying page loading, is to listen uncaught click events of the page. Disadvantage is that every click event which bubbles until window will be tested.

What to add to the mp3_corrections object if you use Prototype :

install : function()

{

    Element.observe(document.body, "click", this.intercept_mp3_links.bind(this));

},

// if event come from a mp3 link, stop its propagation and opens a new window 

intercept_mp3_links : function(event)

{

    var el;



    el = Event.element(event);

    if(Element.match(el, "a") && this.is_mp3(el.href))

    {

        Event.stop(event);

        window.open(

            link.href,

            this.get_window_name(link.href),

            "dependent=yes,location=no,menubar=no"

        );

    }

}

Otherwise :

install : function()

{

    var body, callback;



    body = document.body;

    if(body.addEventListener)

    {

        body.addEventListener("click", mp3_corrections.intercept_mp3_links, false);

    }

    else

    {

        if((callback = body.onClick))

        {

            body.onClick = "mp3_corrections.intercept_mp3_links(event); " + callback;

        }

        else

        {

            body.onClick = "return mp3_corrections.intercept_mp3_links(event);";

        }

    }

},

intercept_mp3_links : function(event)

{

    var el;



    el = event.srcElement || event.target;



    if((el.tagName.toLowerCase() === "a") && this.is_mp3(el.href))

    {

        Event.stop(event);

        window.open(

            link.href,

            this.get_window_name(link.href),

            "dependent=yes,location=no,menubar=no"

        );

        if(event.preventDefault)

        {

            event.preventDefault();

            event.stopPropagation();

        }

        else

        {

            event.cancelBubble = true;

            return false;

        }

    }



    return true;

}

And you'll have to call mp3_corrections.install the same way than for the mp3_correction.correct method.

Personally, I prefer the second solution.
I gave examples for the Prototype framework, but there's also simplest ways to proceed with JQuery or ExtJs for example ...