[JavaScript] Audio z playlistą otwiera utwór w nowej karcie Opcje

[zyluss]

Witajcie, nie potrafię sobie poradzić z powieleniem skryptu odpowiedzialnego za odtwarzacze na stronie, mam ich na stronie 8, i do każdego osobny skrypt z odrębnym ID, dokładnie jest to skrypt: http://devblog.lastrose.com/html5-audio-video-playlist/ , w komentarzach jest jak powielić player.

Mój wygląda tak:

Sam odtwarzacz:

[HTML] pobierz, plaintext 
  <div id="aPlayer">
                    <audio id="audio1" preload="auto" tabindex="1" controls="controls" type="audio/mpeg">
                        <source type="audio/mp3" src="">
                        Twoja przeglądarka nie obsługuje odtwarzacza... Przepraszamy
                    </audio>
                    </div>
                    <ul id="playlist1" class="playlist">
                        <li class="gramy"><a href="mp3/utwor.mp3">utwor</a></li>
                        <li><a href="mp3/utwor1.mp3">utwor 1 </a></li>
                        <li><a href="mp3/utwor2.mp3">utwor 2 </a></li>
 
                    </ul>
                  </div>
                  </div>
[HTML] pobierz, plaintext 

skrypt:

[XML] pobierz, plaintext 
var audio;
var playlist;
var tracks;
var current;
 
init();
function init(1){
    current = 0;
    audio = $('#audio1');
    playlist = $('#playlist1');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = .10;
    playlist.find('a').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('a')[0];
        }else{
            link = playlist.find('a')[current];    
        }
        run($(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('gramy').siblings().removeClass('gramy');
        audio[0].load();
        audio[0].play();
}
[XML] pobierz, plaintext 

jsfiddle: https://jsfiddle.net/47qh28c6/6/

Każdy player z 8 ma swój skrypt init(1), init(2), init(3) ...

czy powinienem użyć jakieś funkcji (pętli?) do nadawania ID? bo po prostu tak wpisane no nie działa..

dzięki z góry za pomoc Pozdrawiam

Ten post edytował zyluss 28.02.2017, 14:18:57

[trueblue]

Numer powinieneś przekazywać przy wywołaniu funkcji, a nie jej definicji.
Jeśli już odbierzesz, to powinieneś go użyć wewnątrz.
Możesz w pętli. Możesz również zastąpić id klasą i wszystkie elementy danej klasy "oplayerować" wewnątrz init (wtedy raz ją wywołujesz).

[zyluss]

mógłbyś mnie mniej więcej naprowadzić? bo rozumiem to tak żeby w init dać klasę czyli init(#player1); ale gdzie ją wywołać? bo w <audio> mam ID = audio1 czy zamknąć każdy player w div z ID #player1 ?

[trueblue]

#audio1 to id, nie klasa, zresztą wcześniej o tym wspomniałeś.
Skoro zmienia się tylko numer, to ten przekazujesz do funkcji, a nie pełne id. Tam gdzie ten numer jest powiązany jakkolwiek z elementem playera, tam go podstawiaj (zamiast obecnie na sztywno liczby 1).

[zyluss]

ID nie klasę przepraszam, hmm.. czyli tylko samo ID ładować do jednego skryptu obsługującego player tak?

[XML] pobierz, plaintext 
audio = $('#audio' + ID);
playlist = $('#playlist' + ID);
[XML] pobierz, plaintext 

tylko jak przekazać to do skryptu, w sensie jak tego uzyć?

w odtwarzaczu ID elementów ma wyglądać tak(?):

[HTML] pobierz, plaintext 
<audio id="audio1">
<ul id="playlist1">
[HTML] pobierz, plaintext 

--- edycja:

poradziłem sobie z ID audio i playlisty natomiast nie potrafię zrobić dla init(), function init(){, próbowałem na wszelkie sposoby z '', "", bez i nic? jak temu nadać unikalne ID?

Ten post edytował zyluss 28.02.2017, 19:24:36