html5 Mp3 Playliste aktualisieren

Thomas_Jung · 15. Januar 2017

Hallo.
ich möchte zu einer bestehenden Playliste mehrere Songs hinzufügen.
Anschließend muss ich den Player aktualisieren. So das er weiß das neue Lieder hinzu b.z.w entfernt wurden.

Kann mir jemand helfen wie ich das Realisieren kann.

Gruß Thomas

Code:

$(window).load(function(){
    var audio;
    var playlist;
    var tracks;
    var current;
   
    init();
    function init(){
        current = 0;
        audio = $('audio');
        playlist = $('#playlist');
        tracks = playlist.find('.mp3_links');
        len = tracks.length - 0;
        audio[0].volume = .10;
        audio[0].play();
        playlist.find('.mp3_links').click(function(e){
            e.preventDefault();
            link = $(this);
            current = link.parent().index();
            run(link, audio[0]);
        });
        audio[0].addEventListener('ended',function(e){
            current++;
            if(current == len){
                current = 0;
                link = playlist.find('.mp3_links')[0];
            }else{
                link = playlist.find('.mp3_links')[current];   
            }
            run($(link),audio[0]);
        });
    }
    function run(link, player){
            player.src = link.attr('href');
            par = link.parent();
            par.addClass('active').siblings().removeClass('active');
            audio[0].load();
            audio[0].play();
    }
});
   
   
    function initRefresh(){
   
    }

$(document).ready(function() {
    $('body').on('click', '.add', function() {   
    var mp3 = $(this).attr('rel');
    var title = $(this).attr('title');
    $("#playlist").append('<li><a class="mp3_links" href="'+mp3+'">'+title+'</a></li>');   

    initRefresh();

//Playliste aktualisieren !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    });
});

HTML:

<body>
      <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
        <source type="audio/mp3" src="demo_mp3/01_i_wanna_dance_with_somebody__who_loves_me_-whitney_houston.mp3">
        Sorry, your browser does not support HTML5 audio.
    </audio>
    <ul id="playlist">
        <li class="active"><a class="mp3_links" href="demo_mp3/01_i_wanna_dance_with_somebody__who_loves_me_-whitney_houston.mp3">I Wanna Dance With Somebody (Who Loves Me) - Whitney Houston</a></li>
        <li><a class="mp3_links" href="demo_mp3/01-motorhead_-_ace_of_spades.mp3">Ace Of Spades - Motörhead</a></li>
        <li><a class="mp3_links" href="demo_mp3/02_waiting_for_a_star_to_fall-boy_meets_girl.mp3">Waiting for a Star to Fall - Boy Meets Girl</a></li>
    </ul>
 
<br><br>
<a rel="demo_mp3/03-disturbed_-_the_sound_of_silence.mp3" title="The Sound Of Silence - Disturbed" href="javascript:void(0)" class="add">The Sound Of Silence - Disturbed</a>
<br><br>
<a rel="demo_mp3/04_girls_just_wanna_have_fun-cyndi_lauper.mp3" title="Girls Just Wanna Have Fun - Cyndi Lauper" href="javascript:void(0)" class="add">Girls Just Wanna Have Fun - Cyndi Lauper</a>

<br><br>
</body>

html5 Mp3 Playliste aktualisieren

Thomas_Jung

Erfahrenes Mitglied

Neue Beiträge