2

Tengo un carusell con 5 discos. el primero que es item activo si reproduce pero al cambiar a otro disco no. estoy usando php y js.

El contenido de un item del carusel oculto no esta cargado en el dom no? llevo un rato modificando el php y el js para que al cambiar de disco se inicializen los mp3 de cada disco y con el console.log veo que sólo carga el primer disco.

<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);
        });
    });

como puedo cargar los mp3 al cambiar de disco en el carusel?

introducir la descripción de la imagen aquí

el carusel cuando un item esta activo, coge la clase active pero no consigo incializar el audio del disco que tiene la clase active.

2
  • La verdad no entiendo bien. ¿te refieres a caroufredsel o a que tipo de carrusel?, ¿es posible que armes un ejemplo verificable? porque creo que tu problema no está en php, sino el el script que usas. el 18 jul. 2017 a las 15:52
  • a un carusel normal con dos botones de navegacion que tiene dentro varios discos. la version anterior de la web era con varias paginas, ahora la estoy haciendo de una sola pagina con los discos en el carusel. y no se escuchan por que no se inicializan los otros discos al navegar con el carusel. el primero, el item activo si funciona el 19 jul. 2017 a las 12:14

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.