AppendTo variabele class in selector

Door Nien E op 13-12-2019 14:48 gewijzigd op 13-12-2019 15:09

1.896 views

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.


<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.

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

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?


		<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

Frank Nietbelangrijk

13-12-2019 18:13

Als je meerdere CircleAudioPlayer objecten maakt dan kun je meerdere players aan de container toevoegen.


// 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:


<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:


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:


<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

13-12-2019 20:59

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

14-12-2019 14:06

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.

Reageren

Inloggen om te reageren