Discografia

Bonito Efecto para una Pagina de Musica

Bueno les pido disculpa por el tiempo que ha pasado desde mi ultima entreda. Ademas de estar trabajando he estado preperando este Bonito Efecto para aquellas personas que son musicos o tienen una pagina de musica.

Entonces sin mas nada que decir empezemos:

1. Vamos a empezar con el código HTML!

En primer lugar crearemos un DIV donde se va a alojar el efecto: 

<div class="cd_wrapper">
          <div id="cd_background" class="cd_background">
                <div class="cd_overlay"></div>
                <div class="cd_loading"></div>
            </div>
            <h1 class="cd_title">DAS<span>Diseño Ayudas Soluciones</span></h1>

El siguiente elemento DIV sera para al albergar las propiedas del reproductor y sus botones:

<div id="jquery_jplayer" class="jp-jplayer"></div>
            <div id="jp-audio" class="jp-audio">
                <div class="jp-type-playlist">
                    <div id="jp_interface" class="jp-interface">
                                    <ul class="jp-controls">
                            <li><a href="#" class="jp-play" tabindex="1">play</a></li>
                            <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                            <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
                            <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
                            <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
                            <li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
                            <li><a href="#" class="jp-next" tabindex="1">next</a></li>
                                    </ul>
                                    <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                                      </div>
                                    </div>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                      </div>
                        <div class="jp-current-time"></div>
                        <div class="jp-duration"></div>
                  </div>
                    <div id="jp_playlist" class="jp-playlist">
                                    <ul>

                          <li></li>
                                    </ul>
                  </div>
              </div>
          </div>

Ahora en la siguiente DIV indicaremos el orden las cancion y albunes "el nombre de las canciones hay que indicarlas, ya que no lee los datos de los archivos"; el orden en la que las queremos y una breve descripcion del cantante o si es de ustedes:

<div id="cd_container" class="cd_container">
                <div class="cd_album cd_album_1" data-bgimg="images/1.jpg">
                    <h1>linkin park</h1>
                    <a href="#" class="cd_back">&laquo; Volver</a>
                    <div class="cd_content">
                        <div class="cd_playlist">
                            <ul>
                                <li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">In The End</li>
                                <li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Numb</li>
                                <li data-mp3="songs/ramblinglibrarian_-_Our_Resolve.mp3" data-oga="songs/ramblinglibrarian_-_Our_Resolve.ogg">Crawling</li>
                            </ul>
                        </div>
                        <div class="cd_content_inner">
                            <p>Linkin Park es una banda estadounidense originaria de Agoura Hills, Los Angeles, California.</p>
                            <p>Su estilo ha sido el nu metal y rap metal; sin embargo, en su album Minutes to Midnight su sonido se vuelve más suave y orientado al rock alternativo.</p>
                            <p>Aqui puedes escribir una breve historia de tu album o algun otro album</p>
                        </div>
                    </div>
                </div>

Deberia quedarnos algo asi. "Como pueden ver en las lineas <div class="cd_album cd_album_1" data-bgimg="images/1.jpg"> deben indicar el numero del album y la imagen" pueden agregar tantos como deseen.

Y eso es lo mas basico que deben saber, casi no tengo tiempo pero si necesitan algo mas complejo con gusto lo editare.

Hasta la proxima amigos.