EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            formatos de audio optimizacion web
            Formatos de archivos de audio y optimizaciones
            14/11/2019
            Control reproducción vídeo audio JavaScript
            Control de reproducción de vídeo y audio con JavaScript
            16/11/2019

            Inserción de audio en HTML5

            insercion de audio en html5

            insercion de audio en html5

            Tabla de contenidos

            • 4.1. Atributos elemento <audio>
            • 4.2. Soporte navegadores
            • 4.3. Tipos MIME
            • Ejercicios propuestos

            El elemento <audio> de HTML5 dispone de prácticamente los mismos atributos que el elemento <video> visto en la sección anterior:

            4.1. Atributos elemento <audio>

            El elemento <audio> dispone de varios atributos que nos permiten establecer sus diferentes valores de comportamiento.

            • Src, indica la URL del archivo de audio. Este atributo puede ser reemplazado por el elemento <source> y su propio atributo src para declarar varias fuentes con diferentes formatos. En el siguiente ejemplo el navegador leerá la etiqueta <source> y decidirá qué archivo reproducir de acuerdo a los formatos que soporte.
            • Controls, muestra los controles de audio que nos ofrece el navegador. Cuando se incluye el atributo el navegador activará su propia interfaz de control del audio. De esta forma el usuario podrá reproducir el audio, pararlo, etc.
            • Autoplay, al incluir este atributo, el navegador reproduce el audio automáticamente.
            • Loop, al incluir este atributo, el navegador reproduce nuevamente el audio cuando llega a su fin.
            • Preload, puede recibir tres valores:
              • none: el audio no se cachea.
              • metadata: recomienda al navegador que capture información acerca de la fuente (duración).
              • auto: descarga el archivo lo más pronto posible.

            4.2. Soporte navegadores

            MP3 está bajo licencia comercial, así que no es soportado por navegadores como Firefox u Opera. OGG es soportado por estos navegadores, pero no por Safari e Internet Explorer. Por este motivo, es necesario subir los dos tipos (OGG y MP3) de archivos en nuestras páginas web.

            4.3. Tipos MIME

            Conviene especificar el contenido de un audio para que el navegador sepa identificar el tipo de formatos de nuestros archivos y sepa cómo manejarlos. En el siguiente ejemplo el navegador elegirá solamente un audio. Al especificar el atributo type (no obligatorio), permitimos que el navegador conozca el tipo MIME y los tipos de codecs que debe utilizar antes de descargar el audio. Si no indicamos dicho atributo, el navegador intentará averiguar, mediante prueba y error, cuál es el tipo adecuado.

            <audio id="medio" controls>
                 <source src="cancion.mp3" type='audio/mpeg; codecs="mp3"'>
                 <source src="cancion.ogg" type='audio/ogg; codecs="vorbis"' >
            </audio>

            Comprueba tu aprendizaje

            Se puede insertar varios tipos de sonidos dentro de la etiqueta audio.

            ¡Bien! ¡Has fallado!

            ¿Es obligatorio indicar el atributo type dentro de la etiqueta source?

            ¡Bien! ¡Has fallado!

            Ejercicios propuestos

            Actividad 4

            Crea una nueva entrada en tu blog en la que debes incluir, mediante la etiqueta <audio>, el audio trabajado en la sección anterior. Incluye el audio en dos formatos diferentes.

            Compartir

            UD6. Sonido, Vídeo y animaciones

            • 1. Formatos de vídeo y conversiones
            • 2. Inserción de vídeo en HTML5
            • 3. Formatos de audio y optimizaciones
            • 4. Inserción de audio en HTML5
            • 5. Control de vídeo y audio con JavaScript
            • 6. Animaciones con propiedad animation
            • 7. Canvas en HTML5
            • 8. Animaciones en Canvas
            • 9. Referencias y recursos: sonido, vídeos y animaciones

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results