automatic look for mp3-links an generate dynamic multiple Audio-Player(s) (no Playlist)

[derSteffen]

Here is a soltion (only in javascript) to look in a page for a link that contains, for example "audio-upload" and generate automaticly multiple dynamic audio-player!

We need jquery, jquery.jplayer.min (vers: 2.9.2), jplayer.blue.monday.min.css and this html and javascript:

<p><a href="http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a">First (no title-tag)</a></p>
<p><a href="http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a" title="Title Second">Description Second</a></p>
<p><a href="http://www.jplayer.org/audio/m4a/Miaow-02-Hidden.m4a" title="Title third">Description Third</a></p>

$(document).ready(function() {
    // look in the page for every link which contains m4a in the href
    // !!!!! in this way m4a is only the url an not the audio-format m4a !!!!!
    // then generate for every link a player
    $('a[href*="/m4a/"]').each(function(index) {    
    // example for a special content-div only: $('#maintext').find('a[href*="/m4a/"]').each(function(index) {   
        // count
        var id = $('.mp3player').length+1;          
        // the content between the a-tags
        var a_content = $(this).parent().children("a").html();      
        // if no title-tag in the link, then use the content between the a-tag for the title
        if ($(this).attr('title')) {var title_content = $(this).attr('title'); } else {var title_content = $(this).parent().children("a").html();};
        // if no title-tag in the link, then is the content of the title-tag and the content between the a-tag the same and we have two times the same issue ... we need only one time ... and so the a_content is empty!
        if (a_content == title_content) {var a_content = ""};
        // the audio-link
        var hrefaudio;
        hrefaudio = $(this).attr('href');
        // playground (for testing): to generate a play-button-image
        $(this).attr('href', hrefaudio);
        // Important (class mp3player) to get the id for every player
        $(this).html('<img src="images/audioplay-image.png" alt="Play-Button" class="mp3player" title="play: '+title_content+'" />');
        // the issue
        $(this).after(function() {
        // information for testing
        return "<br />Info (Test): "+ id + ' - ' + a_content + ' - ' + title_content + ' - ' + hrefaudio +"<br />" + 
        // generate player(s)
         '<div id="jquery_jplayer_'+id+'" class="jp-jplayer"></div> <div id="jp_container_'+id+'" class="jp-audio" role="application" aria-label="media player"> <div class="jp-type-single"> <div class="jp-gui jp-interface"> <div class="jp-controls"> <button class="jp-play" role="button" tabindex="0">play</button> <button class="jp-stop" role="button" tabindex="0">stop</button> </div> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <div class="jp-volume-controls"> <button class="jp-mute" role="button" tabindex="0">mute</button> <button class="jp-volume-max" role="button" tabindex="0">max volume</button> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> </div> <div class="jp-time-holder"> <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div> <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div> <div class="jp-toggles"> <button class="jp-repeat" role="button" tabindex="0">repeat</button> </div> </div> </div> <div class="jp-details"> <div class="jp-title" aria-label="title">&nbsp;</div> </div> <div class="jp-no-solution"> <span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. </div> </div> </div>';
        });     
        $("#jquery_jplayer_"+id).jPlayer({ ready: function (event) { $(this).jPlayer("setMedia", { title: title_content, m4a: hrefaudio, }); }, swfPath: "../../dist/jplayer", supplied: "m4a, oga", cssSelectorAncestor: "#jp_container_"+id, wmode: "window", useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true });  
    // end
    });
});

Greetings Steffen