Dlaczego tablica OBJEKTÓW mi nie działa? Undefined?

pytanie zadane 11 marca 2016 w JavaScript przez artimal Gaduła (4,800 p.)
edycja 12 marca 2016 przez artimal

Witam, korzystam właśnie z wtyczki wavesurfer.js i tworzę playery na stronie za jej pomocą. Kiedy piszę wszystko osobno to nie ma problemu ale nie chcę się bawić w 14 długich kodów dlatego zrobiłem wyszukiwanie ilości elementów html i pętlę for oraz tablicę. Niestety coś się dzieje złego kiedy używam tablicy konstruktorów. Otóż ta wersja działa:

wavesurfer = WaveSurfer.create({
  container: waveform1,
  waveColor: '#5C6366',
  progressColor: 'white',
  height: 100,
  normalize: 1
});
wavesurfer.load("audio/before1.mp3");

Ale kiedy utworzę sobie tablicę to już nie:

var wavesurfer = [];
wavesurfer[i*2] = WaveSurfer.create({
  container: waveform1,
  waveColor: '#5C6366',
  progressColor: 'white',
  height: 100,
  normalize: 1
});
wavesurfer[i*2].load("audio/before" + song + ".mp3");

Konsola rzuca następujące błędy:

Niestety nie wiem o co chodzi więc proszę o pomoc. Chciałbym uniknąć redundancji.
Pozdrawiam

3 odpowiedzi

odpowiedź 11 marca 2016 przez artimal Gaduła (4,800 p.)

Widzę, że to bez wklejania pełnego kodu nie ma szans :D
W HTML nie ma nic szczególnego, playery mają swoje unikalne id "waveform1" "waveform2" itd. Jeden player to dwa playery nałożone na siebie które grają wersję przed masteringiem i po masteringu po naciskaniu przycisku. To wszystko jak już mówiłem działa dla 1 playera lecz przejście na tablice i podawanie containera jako zmiennej już nie. JS:

var elements = $(".Wallop2").find(".Wallop-item");
var x = elements.length;
$(".loading").load('img/icons/loading.svg');
var wavesurfer = [];

for(var i=0; i<x; i++)
{
var song = i*2+1;
var str1 = song.toString();
var str2 = "#waveform";
var waveform1 = str2.concat(str1);
song = song+1;
str1 = song.toString();
var waveform2 = str2.concat(str1);

alert("Oto waveform1: " + waveform1 + " A oto waveform2: " + waveform2);

wavesurfer.push(WaveSurfer.create({
  container: waveform1,
  waveColor: '#5C6366',
  progressColor: 'white',
  height: 100,
  normalize: 1
}));

wavesurfer[i*2].load("audio/before" + song + ".mp3");

wavesurfer.push(WaveSurfer.create({
  container: waveform2,
  waveColor: '#5C6366',
  progressColor: 'white',
  height: 100
}));

wavesurfer[i*2].on("ready", function f(x){wavesurfer[i*2+1].load("audio/after" + song + ".mp3");});

/*
wavesurfer[i*2] = WaveSurfer.create({
  container: waveform1,
  waveColor: '#5C6366',
  progressColor: 'white',
  height: 100,
  normalize: 1
});

wavesurfer[i*2+1] = WaveSurfer.create({
  container: waveform2,
  waveColor: '#5C6366',
  progressColor: 'white',
  height: 100
}); */



var graj=1; // 1 czy 2 kawałek grać czyli wersję przed czy po obróbce.
var time=0;
var playornot=0; // Play-Pause

wavesurfer[i*2].on("seek", function f(x){time=wavesurfer[i*2].getCurrentTime();});
wavesurfer[i*2+1].on("seek", function f(x){time=wavesurfer[i*2+1].getCurrentTime();});

wavesurfer[i*2+1].on("ready", function f(x){
  elements[i].find(".loading").remove();
  elements[i].find(".example").addClass("flip");
  elements[i].find(waveform1).removeClass("ukryj");
  elements[i].find(".play").load('img/icons/play.svg');
  elements[i].find(".after").load('img/icons/after.svg');
});

$(".play").click(function()
{

if(playornot==0)
{
	$(this).find(".play").load('img/icons/pause.svg');
	playornot=1;
}
else
{
	$(this).find(".play").load('img/icons/play.svg');
	playornot=0;
}

if(!wavesurfer[i*2].isPlaying()==1 && !wavesurfer[i*2+1].isPlaying()==1){if(graj==1) wavesurfer[i*2].play(time); else wavesurfer[i*2+1].play(time);}
else
{
	if(wavesurfer[i*2].isPlaying()==1)
	{
		wavesurfer[i*2].pause();
		time=wavesurfer[i*2].getCurrentTime();
	}
	else
	{
		wavesurfer[i*2+1].pause();
		time=wavesurfer[i*2+1].getCurrentTime();
	}
}

});

$(".after").click(function(){
	if(graj==1)
	{
		time=wavesurfer[i*2].getCurrentTime(); wavesurfer[i*2+1].play(time); wavesurfer[i*2+1].pause(); 
		$(waveform2).removeClass("ukryj");
		$(waveform1).addClass("ukryj");
		$(this).addClass("active");
		graj=2;
	}
	else
	{
		time=wavesurfer[i*2+1].getCurrentTime(); wavesurfer[i*2].play(time); wavesurfer[i*2].pause(); 
		$(waveform1).removeClass("ukryj");
		$(waveform2).addClass("ukryj");
		$(this).removeClass("active");
		graj=1;
	}

if(wavesurfer[i*2].isPlaying()==1){wavesurfer[i*2].pause(); time=wavesurfer[i*2].getCurrentTime(); wavesurfer[i*2+1].play(time);}
else
if(wavesurfer[i*2+1].isPlaying()==1){wavesurfer[i*2+1].pause(); time=wavesurfer[i*2+1].getCurrentTime(); wavesurfer[i*2].play(time);}

});


}

Pokaż 14 poprzednich komentarzy

komentarz 12 marca 2016 przez artimal Gaduła (4,800 p.)

Czy o to ci chodziło? http://codepen.io/anon/pen/wGzvZx Według mnie efekt jest taki sam i nadal nie działa.

komentarz 12 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Te same błędy w konsoli? No to już nie wiem :(

komentarz 12 marca 2016 przez artimal Gaduła (4,800 p.)

To sobie wymyśliłem :D Ale jestem pewien, że da się zrealizować jakoś ten pomysł. Może jakiś spec się wypowie.

komentarz 12 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Hmm... a spróbuj w konsoli wypisywać kolejno zmienne z funkcji makewave(), żeby zobaczyć czy siedzi tam to, co ma być - może okaże się, że jednak w którejś linijce nie ma prawidłowej wartości stąd ten błąd?

Nadal nie rozumiem, dlaczego stosujesz zapisy w stylu [i * 2] +1?

komentarz 12 marca 2016 przez artimal Gaduła (4,800 p.)

Zapis ten jest po to, że jeden player to dwa nałożone na siebie playery które zmienia się przyciskiem .after w trakcie lecenia piosenki więc skoro for robi tyle rundek ile jest elementów "opinia" w html to za każdym razem ustanawiam te dwa playery.
i=0 -> 0,1
i=1 -> 2,3
itd.
Co jest dostosowane do waveformów w html gdzie są ręcznie ustalane id: waveform1, waveform2, itd...

odpowiedź 11 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)
edycja 11 marca 2016 przez ScriptyChris

wavesurfer[i*2]

Czym jest i? Bo nigdzie nie widać, abyś je deklarował.

Możesz zrobić coś takiego:

var wavesurfer = [];
wavesurfer.push(WaveSurfer.create({
  container: waveform1,
  waveColor: '#5C6366',
  progressColor: 'white',
  height: 100,
  normalize: 1
}));

for (var i = 0, len = wavesurfer.length; i < len; i++)
{
   wavesurfer[i].load("audio/before" + song + ".mp3");
}

Zamiast song wewnątrz pętli, może podstaw i - jeśli chodzi Ci o kolejny numer piosenki.

I możesz również zrobić pętle, która będzie umieszcza obiekty WaveSurfer wewnątrz tablicy (zamiast ręcznie push'ować), tylko wcześniej musisz wiedzieć ile tych player'ów będziesz miał i napisać funkcje, która będzie je dynamicznie tworzyć. Bo teraz tworzony jest 1 obiekt player'a (tak to rozumiem), który w pętli (wykonującej się raz) wczytuje jakąś piosenkę. Ale najpierw trzeba utworzyć kilka tych obiektów player'ów, aby pętla wczytująca piosenki miała sens.

Doczytałem się na stronie tego pluginu, że propertis container ma mieć jako atrybut element HTML, w którym trzymasz (chyba) ten odtwarzacz:

container: '#waveform',

U Ciebie natomiast jest to zmienna waveform1, którą też nie widać abyś gdzieś tworzył (być może dlatego w konsoli masz błąd Container element not found)). Jeśli masz w HTMLu kilka takich elementów waveformX (gdzie X oznacza ich kolejny numer). To nadaj im jakąś klasę, a następnie w JavaScript w pętli użyj tych elementów waveformX do tworzenia kolejnych obiektów poprzez konstruktor WaveSurfer.

komentarz 11 marca 2016 przez artimal Gaduła (4,800 p.)

"i" to zwykły iterator z pętli ;) Musiałbym wstawiać dużą ilość kodu ponieważ nic nie robię ręcznie, jak mówię, chce jak największej automatyki i jak najmniejszej ilości kodu. Mam już wyszukiwanie elementów tak jak pisałem, wszystko jest jak powinno tylko zmiana na tablice tworzy błędy które podałem, rezygnacja z tablic i ograniczenie wszystkiego do 1 playera na stronie działa. Zmiana na "push" tak jak myślałem nie przyniosła żadnych zmian - błędy te same. Widocznie jakoś inaczej trzeba to stworzyć, mimo, że moje rozwiązanie wydaje się być logicznie dobre.

komentarz 11 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

Jesli i jest zwykłym iteratorem, to dlaczego robisz [i*2]? I czym jest waveform1? Pokaż kod HTML gdzie masz te odtwarzacze umieszczone i kod JS, w którym tworzysz zbiór tych elementów.

Chodzi mi o to, że jeśli chcesz tworzyć wiele obiektów na podstawie m.in. waveform1 (w tym miejscu powinien być ID elementu HTML, w którym trzymasz odtwarzacz - ale możliwe, że zamiast ID może być indeks elementu z klasy), to musisz gdzieś stworzyć np. tablicę tych uchwyconych elementów HTML. Dlatego w poście zaproponowałem nadanie im klasy, aby w JS pobrać te elementy i tworzyć kolejne obiekty, gdzie jako property container podstawiałbyś kolejny element z klasy.

komentarz 11 marca 2016 przez artimal Gaduła (4,800 p.)

Na razie wolałbym wersję z ręcznym nadawaniem id w html :) Jeśli już wszystko będzie działać to chętnie sobie potem ten kod udoskonalę. Kod wstawiłem w nowej odpowiedzi.

komentarz 12 marca 2016 przez artimal Gaduła (4,800 p.)

Skoro ręcznie ustawiam te id w html-u to co za problem?

<div class="Wallop2 Wallop--slide">
<div class="Wallop-list" style="padding: 25px;">



<div class="Wallop-item">
<div class="client">
<div class="image" id="avatar3"></div>
<div class="name">Mike Woods</div>
<div class="country">Australia</div>
<div class="cytat"><div class="quote"></div><p style="text-indent: 0px;"></p></div>
<div class="example">
    <div class="loading"></div>
    <div class="play"></div>
    <div class="after"></div>

    
    <div class="wave">
        <div id="waveform2" class="ukryj"></div>
        <div id="waveform3" class="upwave ukryj"></div>
    </div>

</div>
</div>
</div>




<div class="Wallop-item">
<div class="client">
<div class="image" id="avatar1"></div>
<div class="name">XXX</div>
<div class="country">Polska</div>
<div class="cytat"><div class="quote"></div><p style="text-indent: 0px;"></p></div>
<div class="example">
    <div class="loading"></div>
    <div class="play"></div>
    <div class="after"></div>
    <div class="wave">
        <div id="waveform1" class="ukryj"></div>
        <div id="waveform2" class="upwave ukryj"></div>
    </div>
</div>
</div>
</div>


<div class="Wallop-item">
<div class="client">
<div class="image" id="avatar2"></div>
<div class="name">Patryk</div>
<div class="country">Polska</div>
<div class="cytat"><div class="quote"></div><p style="text-indent: 0px;"></p></div>
<div class="example">
    <div class="loading"></div>
    <div class="play"></div>
    <div class="after"></div>

    
    <div class="wave">
        <div id="waveform4" class="ukryj"></div>
        <div id="waveform5" class="upwave ukryj"></div>
    </div>

</div>
</div>
</div>

  </div>
  <div class="Wallop-buttonPrevious prev"></div>
  <div class="Wallop-buttonNext next"></div>
</div>
</section>
</div>
</div>