Español | 9 Mb | Online | Publicación:2013 | Pass:www.detodoprogramacion.org
El tutorial de hoy vamos a codificar un reproductor de audio de la interfaz de usuario impresionista Vamos a codificar con CSS3 para el estilo y los "MediaElement.js" para la funcionalidad. MediaElement.js es un audio de HTML5 y un reproductor de vídeo que también funciona para los navegadores más antiguos que utilizan Flash y Silverlight para imitar el MediaElement API HTML5.
Empezamos!
Paso 1 - Descarga de MediaElement.js
En primer lugar tenemos que descargar el script "MediaElement.js" y extraerlo. Luego de la carpeta "build" necesitamos tres archivos:
- flashmediaelement.swf
- MediaElement-and-player.min.js
- silverlightmediaelement.xap
Paso 2 - Formato HTML
Ahora, tenemos que vincular a la biblioteca jQuery, podemos albergar de forma local o use el ofrecido por Google. Entonces tenemos que vincular a "MediaElement-and-player.min.js" archivo de comandos y el archivo CSS. Todos estos tres archivos deben estar dentro de la etiqueta head.
Para crear el reproductor vamos a añadir una anchura <div> la clase "audio-player". Esta div será el contenedor de nuestros elementos player. Vamos a añadir una etiqueta <h1> para el título de la canción y <img> para la portada. A continuación, vamos a añadir la etiqueta <audio> que unirá a nuestra canción y vamos a establecer el id para "audio-player".
Para terminar tenemos que añadir este código antes de la finalización de la etiqueta </ body>. También tenemos que agregar el mismo ID que se utilizó en la etiqueta <audio> para cargar el reproductor. Puede configurar algunas opciones también, para más información leer la documentación "MediaElement.js".
Paso 3 - Estilos de contenedores
En primer lugar vamos a añadir algunos estilos de reposición de todos los elementos que vamos a utilizar en el envase.
Ahora el estilo de dejar que el contenedor player, vamos a establecer la anchura de 400px y alto de 120px. También vamos a añadir un gradiente de fondo css3 y esquinas redondeadas.
Paso 4 - Título y cubierta
Vamos a situar el título y la tapa del recipiente de player y luego añadir algunos estilos de tipografía para el título.
Paso 5 - Controles Botones
Ahora vamos a estilo de los controles de reproducción (play / pause, mute / unmute). Para ello vamos a empezar por dar algunos estilos generales de los botones y luego vamos a establecer un ancho fijo y altura. Vamos a colocar el "reproducir / pausa" botones y los botones "Activar / desactivar" en la misma posición y se le cambiará el evento click.
Paso 6 - Deslizador de volumen
Para el estilo del deslizador de volumen vamos a colocar, y luego vamos a dar un ancho de 200px y alto 8px. También tenemos que establecer un color de fondo, algunas sombras y esquinas redondeadas.
Entonces tenemos que el estilo del "volumen actual", para hacerlo vamos a añadir una imagen de fondo personalizada, esquinas redondeadas, etc
Paso 7 - Barra de progreso
Los estilos de la barra de progreso son casi lo básico. Nosotros le daremos el mismo ancho que el contenedor player(400px) y colóquelo en la parte inferior. También vamos a hacer la esquina izquierda y derecha redondeada. A continuación, vamos a definir algunos colores de fondo para cada estado de tiempo (total, con carga y corriente). Como usted puede notar que tenemos que establecer el ancho a 0 para el tiempo y la carga actual y como la canción juega o se carga el ancho aumentará.
Paso 8 - Progres y manija Volumen
Ahora vamos a añadir un identificador de la barra de progreso y el deslizador de volumen. Básicamente, sólo a añadir una imagen de fondo, definir la anchura / altura y posicionarlo.
Paso 9 - Tooltip Tiempo
Para terminar el reproductor de audio, añadiremos una sugerencia tiempo que aparecerá cuando el ratón sobre la barra de progreso. Los estilos son casi los mismos que en los otros pasos, vamos a posicionarnos, añada una imagen de fondo ancho fijo / valores de altura y. También vamos a añadir algunos estilos de tipografía.
Hemos codificado con éxito este reproductor de audio. Si usted tiene cualquier pregunta, hágamelo saber en los comentarios. Asimismo, no se olvide de dejar algunos comentarios y compartirlo con tus amigos. Siganos si quieres ser el primero en saber sobre los últimos artículos y tutoriales.
Son dos dìas que trato de descargar el còdigo pero no aparece ningùn link.
ResponderEliminarLogrè descargarlo.
EliminarMuchas gracias por los mùltiples aportes !!!!!
como descargar el codigo?
ResponderEliminar