audio dans boucle foreach

Version imprimable

bonjour
j'ai une boucle foreach avec un <audio> dedans qui doit à chaque ligne prendre un nouveau fichier mp3
mais dans cette écriture il me donne à chaque ligne le premier mot de la liste ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	    		<?php foreach ($results as $row) {   ?>	   
				<?php echo $row["mot"];?> | 
				<?php echo $row["ts_m"];?> | 
				<?php echo $row["ts_or"];?> | 
				<audio autoplay="false" id="ts2">
        			<source src="modules/mod_tasawaq/audio/<?php echo $row["mot"];?>_ts.mp3" type="audio/mpeg">
				</audio>
				<div id="ts2">
				<img alt="" src="modules/mod_tasawaq/audio/audio0.png" 
					onclick="joueTs2()" 
					width="20" 
					height="20"
					title="écouter"
					onmouseover="this.src='<?php echo JURI::base() ?>/modules/mod_tasawaq/audio/audio1.png';" 
					onmouseout="this.src='<?php echo JURI::base() ?>/modules/mod_tasawaq/audio/audio0.png';"/>				
				</div><br/>			
			<?php } ?>

voici le script utilisé

Code:

1
2
3
4
5
6
<script>        
       function joueTs2() {
            var sound = document.getElementById("ts2");
            sound.play();
        }
</script>

merci LJ

20/04/2021, 21h25
CosmoKnacki

Contrôle ce que contient la variable $results: var_dump($results);.

D'autre part, l'attribut html id doit être unique, il ne peut pas y avoir plusieurs éléments qui ont la même valeur dans la même page.
20/04/2021, 21h44
laurent jarry

$results ramène l'ensemble de mes lignes de ma BD dans un array
il s'affiche bien l'ensemble des éléments ligne par ligne comme ceci

argile | labou | Sonraï
banco | labou | Sonraï
ciel | bénayo | Sonraï
colline | takasor | Tamasheq
eau | ari | Sonraï
étoile | atri | Tamasheq
feu | hourou | Sonraï
fleuve | agaraw | Sonraï

et devant il y a une image sur laquelle le script audio s'exécute bien mais il exécute seulement le premier mot de la liste même sous les autres lignes affichées
visible ici
http://www.ingall-niger.org/aujourd-...nnaire-tasawaq

j'ai enlevé le id du div et idem

LJ
20/04/2021, 22h17
CosmoKnacki

Donc $results est correct.

Citation:

j'ai enlevé le id du div et idem

Certes, mais comme chaque balise audio générée par ta boucle aura le même attribut id, le problème reste entier.

Tu dois changer de stratégie et en adopter une qui ne soit pas basée sur les ids.

Un truc comme ça devrait le faire:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ul class="playlist">
    <?php foreach ($results as $row): ?>
    <li class="track">
        <?= "{$row['mot']} | {$row['ts_m']} | {$row['ts_or']} |" ?>
        <audio autoplay="false">
            <source src="modules/mod_tasawaq/audio/<?= $row["mot"] ?>_ts.mp3" type="audio/mpeg"/>
        </audio>
 
        <img src="modules/mod_tasawaq/audio/audio0.png" />
    </li>
    <?php endforeach; ?>
</ul>
 
<!-- ... -->
 
<script>
const tracks = document.getElementsByClassName('track');
 
for (const track of tracks) {
    track.querySelector('img').addEventListener('click', function(e) {
        e.target.parentNode.querySelector('audio').play();
    }, false);
}
</script>

21/04/2021, 15h54
laurent jarry

merci c ok