AppendTo variabele class in selector

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Nien E

Nien E

13/12/2019 14:48:14
Quote Anchor link
Na heel veel gepuzzel heb ik het gevoel dat ik dicht bij de oplossing ben, maar ik kom er niet helemaal zelf uit.
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<script type=text/javascript>
    var audiobestand = <?php echo json_encode( $data ) ?>;
</script>


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)
PHP script in nieuw venster Selecteer het PHP script
1
appendTo(playerContainer1)
. Gezien ik meerdere audiobestanden heb, wil ik graag dat de class 'playerContainer1' oploopt naar 'playerContainer9'. In het volgende stukje code zie je dat ik een counter gemaakt heb. Deze wil ik graag aanroepen op de plek van de 1 in 'playerContainer1'. ik heb bijvoorbeeld geprobeerd om er
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
cap.appendTo(playerContainer.increment());
van te maken maar dat kan niet. Heeft er iemand een idee of dit uberhaupt mogelijk is, en zo niet, hoe zou ik dit het best kunnen aanpakken?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Hopelijk heb ik het zo een beetje duidelijk uitgelegd.

Groet,
Nien
Gewijzigd op 13/12/2019 15:09:13 door Nien E
 
PHP hulp

PHP hulp

27/05/2020 11:44:38
 
Frank Nietbelangrijk

Frank Nietbelangrijk

13/12/2019 18:13:52
Quote Anchor link
Als je meerdere CircleAudioPlayer objecten maakt dan kun je meerdere players aan de container toevoegen.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);


Resultaat:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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)
PHP script in nieuw venster Selecteer het PHP script
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
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");


Resultaat:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
Nien E

Nien E

13/12/2019 20:59:36
Quote Anchor link
Wow, bedankt voor je uitgebreide antwoord Frank! Ik ga het dit weekend gelijk uitproberen. De reden dat ik het op deze manier probeerde is omdat de urls via een array worden opgehaald en inderdaad met begeleidende tekst. Hopelijk gaat het me lukken. Ik laat het nog even weten!
 
Frank Nietbelangrijk

Frank Nietbelangrijk

14/12/2019 14:06:26
Quote Anchor link
Geen probleem. Je zult even door die array moeten wandelen en in die lus dus steeds een nieuwe player object moeten aanmaken en dan die functie appendPlayer moeten aanroepen.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.