I have a carusell with 5 discs. the first one that is active item if it plays but when changing to another disk it does not. I'm using php and js.
The content of a hidden carusel item is not loaded in the sun, is it? I have been modifying the php and the js for a while so that when changing the disc the mp3s of each disk are initialized and with the console.log I see that it only loads the first disk.
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="item-list center-block">
<h3 class="text-center">la desvitualización de las ideas</h3>
<img class="img-responsive text-center" src="images/desvirtualizacion200x200.png">
<p>La idea sigue siendo la misma. Rock cannábico y kalimochero. La grabación la hemos hecho en La casa reproductora, el estudio de grabación que Dani ha creado con varios amigos.</p>
<div class="player-mp3">
<!-- <table class="table-mp3">
<tr class="fila">
<td class="tdvol"><img src="images/volverde.png">-</td>
<td><input type="range" id="volumen" min="0" step="0.1" val="0.8" max="1"/> </td>
<td class="tdvol"><img src="images/volverde.png">+</td>
</table> -->
<table class="table-mp3" data-directorio-album="ideas" id="reproductor">
</tr>
<?php
$canciones = array(
array(
'titulo' => 'Cuando amanece',
'enlace' => 'https://mega.nz/#!OUNTlQJB!iE524wZy1gBsbmWdguJyVcNVKs4GOdR8RDBR8CVmxRo',
'archivo' => 'amanece.mp3',
),
array(
'titulo' => 'Escupitajo',
'enlace' => 'https://mega.nz/#!WJclRZ4b!bIefoNl_qErezMCq3JEj-e1TfhJR1zH2uHZR_fz2mu0',
'archivo' => 'escupitajo.mp3',
),
array(
'titulo' => 'Estas jodido',
'enlace' => 'https://mega.nz/#!fEUBnJ5B!PhCUClyw1lVbwdQRm-My4mBhy0-qUObl63iSiVOsvAU',
'archivo' => 'estasjodido.mp3',
),
array(
'titulo' => 'Esta vida',
'enlace' => 'https://mega.nz/#!KAUWlSDJ!Y1fPYPz4wcA3Cm55HBydUMOwf8EeuokhZ-ceFj3ZOpA',
'archivo' => 'estavida.mp3',
),
array(
'titulo' => 'La valla',
'enlace' => 'https://mega.nz/#!qAE0kA5Z!rtMxmZsmBPGIvDNmC5WVRF9zxgFbqVVhaXAtMyRmTNQ',
'archivo' => 'lavalla.mp3',
),
array(
'titulo' => 'Los muertos',
'enlace' => 'https://mega.nz/#!vB8TABSY!WtLm5dPIM8VEdzi53xY85RFHhqz5-ezdBmLnEG_00wA',
'archivo' => 'losmuertos.mp3',
),
array(
'titulo' => 'Poemas a la noche',
'enlace' => 'https://mega.nz/#!nEFXjYqJ!oGOaiRFBeQ4-jZlgHUDAb8XxZKb1QHK_Ivs4KtsuCU0',
'archivo' => 'poemasalanoche.mp3',
),
);
?>
<?php foreach($canciones as $id => $cancion):?>
<tr class="fila">
<td>
<i class="fa fa-play fa-1x icon start" data-id-cancion="<?php echo $id; ?>" data-archivo="<?php echo $cancion['archivo']; ?>">
<span class="titulocancion"> <?php echo $cancion['titulo'] ?></span>
</td>
<td>
<time class="seek">00:00</time> / <time class="duration">00:00</time>
</td>
<td>
<a target="_blank" href="<?php echo $cancion['enlace']; ?>">
<img title="Descargar" class="icondes" onmouseover="src='images/downrojo.png'" onmouseout="src='images/downverde.png'"src="images/downverde.png"></a>
</td>
</tr>
<?php endforeach; ?>
</table>
</div>
</div>
</div>
<div class="item album2">
<div class="item-list center-block">
<h3 class="text-center">Bokerones muertos</h3>
<img class="img-responsive text-center" src="images/bokeronesmuertos200x200.jpg">
<p>Este nuevo disco, musicalmente más tranquilo, es el tercero que hacemos juntos. Todos los instrumentos los hemos grabado en casa de Dani, mientras que las voces las hemos grabado en casa de Fernando. Empezamos a trabajar el disco en enero de 2014 y, como ya hemos hecho los dos últimos años, lo presentamos en septiembre. </p>
<div class="player-mp3">
<table class="table-mp3" data-directorio-album1="bokerones" id="reproductor1">
</tr>
<?php
$canciones1 = array(
array(
'titulo1' => 'Animal',
'enlace' => 'https://mega.nz/#!aI1UBQqS!jdusjEJFhRJaL_c-mgtRfEO18ERaANdQI_MucGc_bZs',
'archivo1' => 'animal.mp3',
),
array(
'titulo1' => 'Bokerones muertos',
'enlace' => 'https://mega.nz/#!iNdnAbYK!72hc7JHN9pM1FCzfYhlG3b9ojvMlrSAOqFKj-Mj-vyk',
'archivo1' => 'bokerones.mp3',
),
array(
'titulo1' => 'Rifeño',
'enlace' => 'https://mega.nz/#!eAMUjLhZ!1Z16ZJBwlXZggjR2Yua8tphuDvKHkB-zy8WwNKMnoQU',
'archivo1' => 'rifeno.mp3',
),
array(
'titulo1' => 'Sin sentido',
'enlace' => 'https://mega.nz/#!jYU0WJiY!gqMfUlbVi_TNXlugQlNpAyRC4RZXMwmhGrQrZScAqv4',
'archivo1' => 'sin_sentido.mp3',
),
array(
'titulo1' => 'Soy un hombre',
'enlace' => 'https://mega.nz/#!uM9B2LoJ!_B5lycWKfkOhGqTP42eShykyd997UsfYr3GvXQ01FLc',
'archivo1' => 'soy_un_hombre.mp3',
),
array(
'titulo1' => 'Te quiero',
'enlace' => 'https://mega.nz/#!fQs0iRSa!jki8C158KGdHXJNMu7eWTJspVROkQoGBv1xPN5G8t0Y',
'archivo1' => 'te_quiero.mp3',
),
array(
'titulo1' => 'No se ya quien soy',
'enlace' => 'https://mega.nz/#!iBlhDLRY!k3qvgxzw2odDnB4N7dP6x930g2pFVkaR3O-BJ_IRPDg',
'archivo1' => 'ya_no_se.mp3',
),
);
?>
<?php foreach($canciones1 as $id => $cancion1):?>
<tr class="fila">
<td>
<i class="fa fa-play fa-1x icon play" data-id-cancion="<?php echo $id; ?>" data-archivo="<?php echo $cancion['archivo1']; ?>">
<span class="titulocancion"> <?php echo $cancion1['titulo1'] ?></span>
</td>
<td>
<time class="seek">00:00</time> / <time class="duration">00:00</time>
</td>
<td>
<a target="_blank" href="<?php echo $cancion['enlace']; ?>">
<img title="Descargar" class="icondes" onmouseover="src='images/downrojo.png'" onmouseout="src='images/downverde.png'"src="images/downverde.png"></a>
</td>
</tr>
<?php endforeach; ?>
</table>
</div>
</div>
</div>
reproductor.js
$(document).ready(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
var directorioCanciones = 'mp3/';
var audios = [];
var directorioAlbum = directorioCanciones + $('#reproductor').attr('data-directorio-album') + '/';
var directorioAlbum1 = directorioCanciones + $('#reproductor1').attr('data-directorio-album1') + '/';
var directorioAlbum2 = directorioCanciones + $('#reproductor2').attr('data-directorio-album') + '/';
var directorioAlbum3 = directorioCanciones + $('#reproductor3').attr('data-directorio-album') + '/';
var directorioAlbum4 = directorioCanciones + $('#reproductor4').attr('data-directorio-album') + '/';
var playingSongId;
//Inicializando los audios
$.each($('.start'), function(k, audioButton)
{
var audio = new Audio( directorioAlbum + $(audioButton).attr('data-archivo') );
console.log(audio);
var audioId = $(audioButton).attr('data-id-cancion');
audios[audioId] = audio;
var audio1 = new Audio( directorioAlbum1 + $(audioButton).attr('data-archivo') );
console.log(audio);
var audioId1 = $(audioButton).attr('data-id-cancion');
audios[audioId1] = audio1;
//Mostrando la duracion
audio.addEventListener('loadedmetadata', function() {
$(audioButton).parents('.fila').find('.duration').text( convierteSegundos(audio.duration) );
});
audio.addEventListener('timeupdate', function(){
$(audioButton).parents('.fila').find('.seek').text( convierteSegundos(audio.currentTime) )
});
audio.addEventListener('ended', function(){
pauseAndChangeIcon(audioId);
});
});
How can I load the mp3s when changing discs in carusel?
the carusel when an item is active, take the active class but I can not initialize the audio of the disk that has the active class.