Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Audio z playlistą otwiera utwór w nowej karcie
Forum PHP.pl > Forum > Przedszkole
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:

  1. <div id="aPlayer">
  2. <audio id="audio1" preload="auto" tabindex="1" controls="controls" type="audio/mpeg">
  3. <source type="audio/mp3" src="">
  4. Twoja przeglądarka nie obsługuje odtwarzacza... Przepraszamy
  5. </audio>
  6. </div>
  7. <ul id="playlist1" class="playlist">
  8. <li class="gramy"><a href="mp3/utwor.mp3">utwor</a></li>
  9. <li><a href="mp3/utwor1.mp3">utwor 1 </a></li>
  10. <li><a href="mp3/utwor2.mp3">utwor 2 </a></li>
  11.  
  12. </ul>
  13. </div>
  14. </div>


skrypt:

  1. var audio;
  2. var playlist;
  3. var tracks;
  4. var current;
  5.  
  6. init();
  7. function init(1){
  8. current = 0;
  9. audio = $('#audio1');
  10. playlist = $('#playlist1');
  11. tracks = playlist.find('li a');
  12. len = tracks.length - 1;
  13. audio[0].volume = .10;
  14. playlist.find('a').click(function(e){
  15. e.preventDefault();
  16. link = $(this);
  17. current = link.parent().index();
  18. run(link, audio[0]);
  19. });
  20. audio[0].addEventListener('ended',function(e){
  21. current++;
  22. if(current == len){
  23. current = 0;
  24. link = playlist.find('a')[0];
  25. }else{
  26. link = playlist.find('a')[current];
  27. }
  28. run($(link),audio[0]);
  29. });
  30. }
  31. function run(link, player){
  32. player.src = link.attr('href');
  33. par = link.parent();
  34. par.addClass('gramy').siblings().removeClass('gramy');
  35. audio[0].load();
  36. audio[0].play();
  37. }


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 smile.gif Pozdrawiam
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?

  1. audio = $('#audio' + ID);
  2. playlist = $('#playlist' + ID);


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

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

  1. <audio id="audio1">
  2. <ul id="playlist1">


--- 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?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.