Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[tuto]Crear un reproductor de audio en html5
#1
Dedo arriba 
[Imagen: audioplayer.png]
Hola a todos bueno en este tutorial aprenderan a crear un reproductor de audio en html5 y css3
Cita:Como ya muchos sabran con el pasar del tiempo plugins de audio y video para la web tal como flash han perdido campo tras el lanzamiento del HTML5 que permite al webmaster de una web brindar contenido multimedia sin nesecidad que el usuario tenga instalado en su navegadar flash ó algun otro tipo de plugin similar

Un audio en html5 , ejemplo
Código:
<audio controls="controls">
  <source src="track.ogg" type="audio/ogg" />
  <source src="track.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Como ya algunos sabran en html5 se utiliza la nueva "tag" audioque como su nombre lo indica se utiliza para incluir un audio.

como podran ver es muy similar a una importacion de una imagen (estructura) los OGG es la terminacion para el que se pueda usar con firefox debido a que la extencion .mp3 no lo soporta firefox.

Ejemplo de como quedaria:
[Imagen: standard-html-5-audioplayer.png]

Atributos para la audio tag en html5
  • Autoplay: puede ser "True" o dejarla en blanco , se usa para definir que la pista se reproducira cuando termine de cargar la pagina
  • Controls: Como en la imagen anterior, "pausa","play","stop" etc
  • src: define la ruta donde esta la pista que se reproducida
Crear el markup para el reproductor
  1. Header

    Código:
    <!DOCTYPE html>
    <head>
        <title>HTML5 Audio Tutorial</title>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
        <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script src="http://code.jQuery.com/jQuery-latest.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/js.js"></script>
        <script type="text/javascript" src="js/html5slider.js"></script>
    </head>

  2. Body
    Código:
    <body>
        <h1>HTML 5 Audio Player</h1>
        <div class="container gradient">
            <img class="cover" src="images/cover.jpg" alt="">
            <div class="player gradient">
                <a class="button gradient" id="play" href="" title=""></a>
                <a class="button gradient" id="mute" href="" title=""></a>
                    <input type="range" id="seek" value="0" max=""/>
                <a class="button gradient" id="close" href="" title=""></a>
            </div><!-- / player -->
        </div><!-- / Container-->
    </body>
    </html>
  3. Css
    Código:
    .gradient {
        border: 1px solid black;
        -webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
        -moz-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
        box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
        background: #494949; /* Old browsers */
    background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
        background: -moz-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
        background: -o-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
        background: -ms-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
        background: linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); /* W3C */
    -image  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */
    }
    .container {
        -webkit-transition: all .7s ease;
        -moz-transition: all .7s ease;
        -o-transition: all .7s ease;
        -ms-transition: all .7s ease;
        transition: all .7s ease;
        position: absolute;
        width: 427px;
        height: 70px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
        -moz-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
        box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
        top: 50%;
        left: 50%;
        margin: -214px 0px 0px -214px;
        padding: 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }
    .containerLarge {
        height: 427px;
    }
    .cover {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        width: 398px;
        height: 10px;
        border: 2px solid black;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
        -moz-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
        box-shadow: inset 0px 5px 5px rgba(0,0,0,1);
    }
    .coverLarge {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
        height: 398px;
        -webkit-transition: opacity .7s ease;
        -moz-transition: opacity .7s ease;
        -o-transition: opacity .7s ease;
        -ms-transition: opacity .7s ease;
        transition: opacity .7s ease;
        -webkit-transition-delay: .5s;
        -moz-transition-delay: .5s;
        -o-transition-delay: .5s;
        -ms-transition-delay: .5s;
        transition-delay: .5s;
    }
    Quedara de esta forma:
    [Imagen: creating-html5-audio-player.png]
  4. Css
    Código:
    .player {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        width: 300px;
        bottom: 10px;
        width: 95%;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        padding: 5px;
    }
    .button {
        display: block;
        width: 34px;
        height: 34px;
        background-image: url(../images/sprite.png);
        background-repeat: no-repeat;
        float: left;
        margin-right: 5px;
    }
    #play {
        background-position: 6px 5px;
    }
    #pause {
        background-position: -32px 5px;
    }
    #mute {
        background-position: -63px 5px;
    }
    #muted {
        background-position: -106px 5px;
    }
    input[type="range"] {
        width: 250px;
        margin-top: -5px;
    }
    #close {
        float: right;
        background-position: -146px 5px;
        display: none;
    }
    .volume {
        position: absolute;
        height: 100px;
        width: 34px;
        border: 1px solid black;
        background-color: #242323;
        top: -97px;
        display: none;
    }
    input{
        display:none\9!important;
    }
    input[type="range"] {
        -webkit-appearance: none;
        border: 1px solid black;
        position: absolute;
        top: 18px;
        display: block;
        width: 63%;
        height: 15px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        background-color: #242323;
        left: 90px;
        -webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
        -moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
        box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
    }
    input::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border:1px solid black;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #80e4df; /* Old browsers */
    background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
        background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
        background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
        background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */
    }
  5. jQuery
    Código:
    container = $('.container');
        cover = $('.cover');
        play = $('#play');
        pause = $('#pause');
        mute = $('#mute');
        muted = $('#muted');
        close = $('#close');
        song = new Audio('music/track1.ogg','music/track1.mp3');
        duration = song.duration;
  6. Declaramos con un If para que se distinga si se usa firefox la cancion se reprodusca como ogg y como mp3 para otros buscadore
    Código:
    if (song.canPlayType('audio/mpeg;')) {
        song.type= 'audio/mpeg';
        song.src= 'music/track1.mp3';
        } else {
        song.type= 'audio/ogg';
        song.src= 'music/track1.ogg';
        }
  7. Controles
    Código:
    play.live('click', function(e) {
            e.preventDefault();
            song.play();
            $(this).replaceWith('<a class="button gradient" id="pause" href="" title=""></a>');
            container.addClass('containerLarge');
            cover.addClass('coverLarge');
            $('#close').fadeIn(300);
            $('#seek').attr('max',song.duration);
        });
        pause.live('click', function(e) {
            e.preventDefault();
            song.pause();
            $(this).replaceWith('<a class="button gradient" id="play" href="" title=""></a>');
        });
  8. Boton Mute
    Código:
    mute.live('click', function(e) {
            e.preventDefault();
            song.volume = 0;
            $(this).replaceWith('<a class="button gradient" id="muted" href="" title=""></a>');
        });
        muted.live('click', function(e) {
            e.preventDefault();
            song.volume = 1;
            $(this).replaceWith('<a class="button gradient" id="mute" href="" title=""></a>');
        });
  9. Ahora para que nuestro reproductor se pueda saltar o adelantar secciones de la cancion usamos "seek" que fue el nombre de la id que se le otorgo a la linea del tiempo del reproductor
    Código:
    $('#close').click(function(e) {
            e.preventDefault();
            container.removeClass('containerLarge');
            cover.removeClass('coverLarge');
            song.pause();
            song.currentTime = 0;
            $('#pause').replaceWith('<a class="button gradient" id="play" href="" title=""></a>');
            $('#close').fadeOut(300);
        });
  10. Y esto es para que el tiempo de la cancion sea igual al del reproductor cuando se usa el "seek"
    Código:
    song.addEventListener('timeupdate',function (){
        curtime = parseInt(song.currentTime, 10);
            $("#seek").attr("value", curtime);
        });

Creditos para Aaron Lumsden de Envato. Fuente | Tutsplus, envato
#2
-wah esta de lujo yo quisiera un reproductor que tenga facilidades para agregar tanto mp3 como radios online podria con este asi tipo WMP plugin...???
WWW
#3
Sonrisa Gracias por el tuto, hace tiempo e querido tener un reproductor en mi foro,
voy a probarlo.
Saludos
#4
ya me sabia uno pero este se ve menos "buggeado" y complicado que el que conozco jaja
#5
Qué bueno ver aportes de este tipo, ya es hora de dejar atrás al vetusto y pesado Flash por cosas más recientes, ligeras, y dinámicas.
"Digo lo que pienso y cargaré con la culpa, piensa lo que digo y quédate con la disculpa" ♫
#6
La verdad que queda muy bonito. HTML5 es el futuro, flash ya está quedando obsoleto y lo demuestra YouTube con su nuevos reproductores a prueba.
#7
Se ve bastante bien! Voy a crear uno, gracias!
Sonrisa

¿Tú hiciste el tutorial?
WWW
#8
buen tuto probando en local
#9
Pepefut escribió:Creditos para Aaron Lumsden de Envato.
no hasta abajo dejo los creditos al autor "Creditos para Aaron Lumsden de Envato."
#10
vendria bie3n poner un enlace al articulo original (fuente)
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
Música [Aporte] Reproductor de audio html djsmokingcr 11 253 02-05-2017, 03:04 AM
Último mensaje: gassip
  [Aporte] Libro html5 De distribucion libre gassip 5 277 04-01-2016, 01:27 PM
Último mensaje: Taquion
  Mobirise - Crear sitios Moviles de manera facil y gratis metalfuck 3 1,473 03-11-2015, 12:56 AM
Último mensaje: Caoba
  [Tutorial] jQuery HTML5 Form Plugin - jQuery Form Plugin luis.ml 0 155 16-08-2015, 02:02 AM
Último mensaje: luis.ml
  Formulario de inicio de session con html5 luis.ml 0 910 16-08-2015, 12:52 AM
Último mensaje: luis.ml
  Como crear un Código de Barras en PHP torgar22 1 337 25-03-2015, 04:33 AM
Último mensaje: garcon
  [PHP] Código para crear y eliminar una base de datos de MySQL desde PHP torgar22 5 423 27-02-2015, 12:57 AM
Último mensaje: yayito21
  Crear contraseñas seguras Netohg 43 1,864 06-02-2015, 02:45 AM
Último mensaje: Shirow_Aramaki
  Crear un mapa con puntos modificables fácilmente por cualquiera kakashi-sensei 7 431 27-01-2015, 08:02 PM
Último mensaje: kakashi-sensei
  Crear colores aleatariamente con PHP Dark_Soul 4 300 30-12-2014, 01:21 AM
Último mensaje: Dark_Soul



Usuarios navegando en este tema: 1 invitado(s)