我正在尝试在旋转木马引导程序中构建播放器mp3。但只适用于第一张专辑。其他相册未加载音频文件，因为它们已被禁用。但是当用户点击旋转木马的导航按钮时，如何加载音频文件????。当浏览器加载网站时，最好加载所有音频文件？或者当项目具有类时使用jquery .active ??我正在使用php和js。
HTML
<div id="carousel-mp3" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item album1 active">
<div class="item-list center-block">
<h3 class="text-center">la desvitualización de las ideas</h3>
<img class="img-responsive text-center float" src="images/desvirtualizacion200x200.png">
<p class="album-info">ghdfgdfgdfdfggf.</p>
<div class="player-mp3">
<table class="table-mp3 center-block" 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="track-tittle"> <?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']; ?>">
<i class="fa fa-download get-track fa-1x"></i>
<!-- <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 class="album-download text-center">
<a class="buttom-download" href="#"> <i class="fa fa-download fa-cog fa-2x"></i>Descargar Disco</a>
</div>
</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>lorem iumpsuee... </p>
<div class="player-mp3">
<table class="table-mp3" data-directorio-album ="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 start" 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']; ?>">
</td>
</tr>
<?php endforeach; ?>
</table>
</div>
</div>
</div>
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;
//iniciando los audios segun el item con la clase .active
if($(".album2").hasClass("active"))
{
var directorioCanciones = 'mp3/';
var audios = [];
var directorioAlbum1 = directorioCanciones + $('#reproductor1').attr('data-directorio-album') + '/';
$.each($('.start'), function(k, audioButton)
{
var audio1 = new Audio( directorioAlbum + $(audioButton).attr('data-archivo') );
var audioId1 = $(audioButton).attr('data-id-cancion');
audios[audioId1] = audio1;
console.log(audio1);
});
}
//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;
//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);
});
});