AppendTo variabele class in selector
Ik probeer meerdere audioplayers op 1 pagina te laden(origineel https://codepen.io/jhereg00/pen/WjQPdW). Ik heb het handmatig getest, en dit werkt. Wanneer ik het dynamisch wil maken loop ik tegen het volgende aan:
Via php heb ik een array, die ik heb omgezet naar een variabele voor JavaScript. De variabele bevat verschillende url's naar audiobestanden.
Code (php)
1
2
3
2
3
Door middel van een loop probeer ik de url's in JavaScript te laden, dat volgens mij nu goed gaat. Echter de audioplayer wordt in de HTML geladen d.m.v.
Code (php)
1
appendTo(playerContainer1)
Code (php)
1
cap.appendTo(playerContainer.increment());
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
var counter = 0;
for(i in audiobestand){
var increment = function(){
return counter=counter+1;
}
var cap = new CircleAudioPlayer({
audio: audiobestand[i],
size: 120,
borderWidth: 8
});
cap.appendTo(playerContainer1);
}
</script>
var counter = 0;
for(i in audiobestand){
var increment = function(){
return counter=counter+1;
}
var cap = new CircleAudioPlayer({
audio: audiobestand[i],
size: 120,
borderWidth: 8
});
cap.appendTo(playerContainer1);
}
</script>
Hopelijk heb ik het zo een beetje duidelijk uitgelegd.
Groet,
Nien
Gewijzigd op 13/12/2019 15:09:13 door Nien E
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// now init one as an example
var cap = new CircleAudioPlayer({
audio: 'http://www.html5tutorial.info/media/vincent.mp3',
size: 120,
borderWidth: 8
});
cap.appendTo(playerContainer);
// and a second
var cap = new CircleAudioPlayer({
audio: 'http://www.html5tutorial.info/media/vincent.mp3',
size: 120,
borderWidth: 8
});
cap.appendTo(playerContainer);
var cap = new CircleAudioPlayer({
audio: 'http://www.html5tutorial.info/media/vincent.mp3',
size: 120,
borderWidth: 8
});
cap.appendTo(playerContainer);
// and a second
var cap = new CircleAudioPlayer({
audio: 'http://www.html5tutorial.info/media/vincent.mp3',
size: 120,
borderWidth: 8
});
cap.appendTo(playerContainer);
Resultaat:
Code (php)
1
2
3
4
2
3
4
<div id="playerContainer">
<canvas class="circle-audio-player is-paused" width="120" height="120"></canvas>
<canvas class="circle-audio-player is-paused" width="120" height="120"></canvas>
</div>
<canvas class="circle-audio-player is-paused" width="120" height="120"></canvas>
<canvas class="circle-audio-player is-paused" width="120" height="120"></canvas>
</div>
Waarom zou je met playerContainer1 tm playerContainer9 willen werken? Dit dient geen enkel doel lijkt me?
Ik kan me wel voorstellen dat je elke player nog in een div wilt plaatsen als je er bijvoorbeeld nog een stukje tekst bij wilt plaatsen. Je zou dan het beste een eigen functie kunnen schrijven en deze dan voor iedere player aanroepen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function appendPlayer(cap, text) {
var div = document.createElement('div'); // maak een nieuwe div
var title = document.createElement('h5'); // maak een nieuwe header
title.innerHTML = text; // voeg een tekst toe aan de header
div.appendChild(title); // voeg de header toe aan onze nieuwe div
div.classList.add("mystyle"); // geef de div een class attribute voor de css
cap.appendTo(div); // voeg vervolgens de player toe aan onze nieuwe div
playerContainer.appendChild(div); // voeg de niewe div toe aan de container
}
// now init one as an example
var cap = new CircleAudioPlayer({
audio: 'http://www.html5tutorial.info/media/vincent.mp3',
size: 120,
borderWidth: 8
});
appendPlayer(cap, "Eerste player");
// and a second
var cap = new CircleAudioPlayer({
audio: 'http://www.html5tutorial.info/media/vincent.mp3',
size: 120,
borderWidth: 8
});
appendPlayer(cap, "Tweede player");
var div = document.createElement('div'); // maak een nieuwe div
var title = document.createElement('h5'); // maak een nieuwe header
title.innerHTML = text; // voeg een tekst toe aan de header
div.appendChild(title); // voeg de header toe aan onze nieuwe div
div.classList.add("mystyle"); // geef de div een class attribute voor de css
cap.appendTo(div); // voeg vervolgens de player toe aan onze nieuwe div
playerContainer.appendChild(div); // voeg de niewe div toe aan de container
}
// now init one as an example
var cap = new CircleAudioPlayer({
audio: 'http://www.html5tutorial.info/media/vincent.mp3',
size: 120,
borderWidth: 8
});
appendPlayer(cap, "Eerste player");
// and a second
var cap = new CircleAudioPlayer({
audio: 'http://www.html5tutorial.info/media/vincent.mp3',
size: 120,
borderWidth: 8
});
appendPlayer(cap, "Tweede player");
Resultaat:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div id="playerContainer">
<div class="mystyle">
<h5>Eerste player</h5>
<canvas class="circle-audio-player is-playing" width="120" height="120"></canvas>
</div>
<div class="mystyle">
<h5>Tweede player</h5>
<canvas class="circle-audio-player is-paused" width="120" height="120"></canvas>
</div>
</div>
<div class="mystyle">
<h5>Eerste player</h5>
<canvas class="circle-audio-player is-playing" width="120" height="120"></canvas>
</div>
<div class="mystyle">
<h5>Tweede player</h5>
<canvas class="circle-audio-player is-paused" width="120" height="120"></canvas>
</div>
</div>