Playliste aktualisieren

[Thomas_Jung]

Hallo ich verwende das Script von der Seite
http://www.2webvideo.com/jquery-mp3-playlist-creator-free-for-you.

Wie kann ich mp3´s zur aktuellen Playliste hinzufügen ohne das der Player neu gestartet wird.

Mein Versuch:

$(document).ready(function(){
function refresh_song_list(event) {
  $.ajax({
url:'playlist.html', 
cache:false,
success:function(data){
  $("#playlist").html(data);
  }
 
});
}
 
var timeout = setInterval(reload_song_list, 5000); 
function reload_song_list () {
refresh_song_list();
}
});

//playlist.html
Die Liste wird beim Start einmal geladen und dann möchte ich weitere Titel hinzufügen.
Ohne das der Player etwas mitbekommt.
Er soll einfach den nächsten Titel abspielen.

     <div  id="1" href="demo.mp3" style="width: 400px;" class="item">
     <div>
     <div class="fr duration">02:06</div>
     <div class="btn play"></div>
     <div class="title"><b>Artist</b> - Titel</div>
     </div>
     <div class="player inactive"></div>
  </div>

Nach 5 Sekunden sie die Liste so aus.

     <div  id="1" href="demo.mp3" style="width: 400px;" class="item">
     <div>
     <div class="fr duration">02:06</div>
     <div class="btn play"></div>
     <div class="title"><b>Artist</b> - Titel</div>
     </div>
     <div class="player inactive"></div>
  </div>
     <div  id="2" href="demo2.mp3" style="width: 400px;" class="item">
     <div>
     <div class="fr duration">02:06</div>
     <div class="btn play"></div>
     <div class="title"><b>Artist2</b> - Titel2</div>
     </div>
     <div class="player inactive"></div>
  </div>

u.s.w

Kann mir jemand einen Tip geben?

Gruß Thomas

 

[Sempervivum]

Leider lässt sich die Seite nicht über die API aus. Es müsste eine Funktion geben, um die Playliste zu aktualisieren. Ich wollte mir das Skript mal ansehen, aber der Download-Link funktioniert nicht.

 

[Sempervivum]

Habe das Skript doch über den Quelltext gefunden.
Wird denn die Playlist sichtbar aktualisiert?
Dann müsste man sie nur noch aktivieren. Dies passiert anscheinend in der Funktion init():

init: function(options) {

var settings = {
backgroundColor : 0xFFFFFF,
volumeBarWidth : 40,
progressBarWidth : 320,
barSpace : 20,
volumeBarColor : 0x555555,
volumeBarHeight : 1,
volumeSliderWidth : 10,
volumeSliderHeight : 5,
volumeSliderColor : 0x555555,
progressBarHeight : 1,
progressSliderWidth : 10,
progressSliderHeight : 5,
progressBarColor : 0x999999,
progressSliderColor : 0x555555,
bufferColor : 0x555555,
playerurl : "drplayer.swf"
}

if (options) {
$.extend( settings, options );
}

return this.each(function() {
var el = $(this);
var id = generatePlaylistID();
$(el).data("id", id);
$(el).addClass(id);
//init
$.each($(el).find(".item"), function() {
var item = $(this);
$(this).data("settings", settings);
$(this).find(".btn").click(function() {
if ($(item).hasClass("paused")) {
$(item).removeClass("paused");
$(this).removeClass("play").addClass("pause");
resume(el);
} else if ($(item).hasClass("current")) {
$(this).removeClass("pause").addClass("play");
$(item).addClass("paused");
pause(el);
} else {
stop(el);
playTrack(item, id);
}

})
});

});

},

Ich würde versuchen, nach diesem Muster eine Funktion update() zu machen:

update: function() {
return this.each(function() {
var el = $(this);
//init
$.each($(el).find(".item"), function() {
var item = $(this);
$(this).find(".btn").off("click").click(function() {
if ($(item).hasClass("paused")) {
$(item).removeClass("paused");
$(this).removeClass("play").addClass("pause");
resume(el);
} else if ($(item).hasClass("current")) {
$(this).removeClass("pause").addClass("play");
$(item).addClass("paused");
pause(el);
} else {
stop(el);
playTrack(item, id);
}

})
});

});

},

und beim Success aufzurufen:

success:function(data){
  $("#playlist").html(data).playlist('update');
  }

Leider fehlte mir das Ajax, um es testen zu können. Daher weiß ich nicht, ob es so funktionieren wird.
(Leider sind alle Einrückungen beim Einfügen verloren gegangen.)

 

[Thomas_Jung]

Hi
Danke für die Info.
Werde es ausprobieren.

Gruß Thomas