Scribd Logo
Upload

Welcome to Scribd!

  • Practica 2 - Audio

    Uploaded by

    Martin Garcia
    22 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    22 views3 pages

    Practica 2 - Audio

    Uploaded by

    Martin Garcia

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    Instituto Tecnolgico de Celaya

    HTML5: Prctica #2 Utilizando la etiqueta de audio

    Tpicos Avanzados de Programacin Web


    Semestre Enero Junio 2014 Al igual que en la etiqueta de video, una de las formas para incorporar sonido en nuestras pginas web antes de HTML 5 se haca a travs de plugins externos (como Flash), en los que se poda agregar un reproductor para mejorar la experiencia del usuario. Sin embargo, ahora con HTML 5 se introduce la etiqueta <audio> para incorporar sonido de forma nativa a nuestras pginas web y tambin de forma estndar. Se incorpora un reproductor que contiene controles bsicos para ajustar el volumen, reproducir y pausar este elemento multimedia. Al igual que con la etiqueta de video, la compatibilidad de los archivos de sonido depende del navegador: Extensin ogg wav mp3 Tipo audio/ogg audio/wav audio/mpeg IE 9+ No No Si Firefox 3.6+ Si Si No Chrome 6+ Si Si Si Safari 5+ No Si Si Opera 10.6+ Si Si No

    Y de igual forma, permite varios elementos <source> para que el navegador utilice el primero que reconozca y soporte. Para las prcticas: En el sitio recursos, agregue 2 archivos: o Un audio en formato ogg llamado cancion.ogg o Otro audio en formato mp3 llamado cancion.mp3 Ejercicio 1: Mostrando un archivo de audio con controles de reproduccin nativos Genere un sitio en su servidor llamado audio1. Cree una pgina llamada pagina.html con el siguiente contenido:
    <!DOCTYPE html> <html> <body> <audio controls preload> <source src="../recursos/cancion.ogg" type="audio/ogg" /> <source src="../recursos/cancion.mp3" type="audio/mpeg" /> </audio> </body> </html>

    Quite la propiedad controls a la etiqueta audio y observe lo que sucede. Agregue la propiedad autoplay="true" y observe lo que sucede. Agregue la propiedad loop="true" y observe lo que sucede.

    Algunos de los atributos del elemento <audio> son:

    Instituto Tecnolgico de Celaya


    HTML5: Prctica #2 Utilizando la etiqueta de audio

    Tpicos Avanzados de Programacin Web


    Semestre Enero Junio 2014 Mtodo/Atributo src Descripcin Permite especificar el archivo de sonido que se va a reproducir. Se puede reemplazar por varios <source> anidados para aadir multisoporte a nuestra pgina web. Es un atributo booleano que indica si el archivo de sonido debe iniciar su reproduccin de forma automtica cuando se cargue la pgina o no. Le dice al navegador si se deben descargar datos del archivo o no. Los valores disponibles son: none, metadata, all Es un valor booleano que especifica si el archivo de sonido debe volver a reproducirse una vez alcanzado el final de archivo. Es un atributo booleano que especifica si el navegador debe mostrar sus controles predeterminados o no para controlar la reproduccin del archivo de sonido. Especifican el ancho y alto, respectivamente, del reproductor. Para establecer el segundo actual de reproduccin Permite conocer el tiempo que dura en segundos el archivo de sonido. Permite ajustar o conocer el volumen actual de la reproduccin

    autoplay

    preload

    loop

    controls

    width y height currentTime duration volume

    En general, la etiqueta audio posee las mismas propiedades que la etiqueta <video>, y con respecto a los eventos, maneja los siguientes: abort canplay ended error loadeddata loadstart pause play progress ratechange seeked seeking suspend volumenchange waiting

    Instituto Tecnolgico de Celaya


    HTML5: Prctica #2 Utilizando la etiqueta de audio

    Tpicos Avanzados de Programacin Web


    Semestre Enero Junio 2014 Ejercicio 2: Mostrando un archivo de audio con controles propios Genere un sitio en su servidor llamado audio2 Cree una pgina llamada pagina.html con el siguiente contenido: <!DOCTYPE html> <html> <body> <div style="text-align:center"> <button onclick="ReproducirPausar()">Reproducir/Pausar</button> <button onclick="Subir()">Subir volumen</button> <button onclick="Bajar()">Bajar volumen</button> <br> <audio id="audio1" width="450"> <source src="../recursos/cancion.ogg" type="audio/ogg" /> <source src="../recursos/cancion.mp3" type="audio/mpeg" /> </audio> </div> <script> var miAudio=document.getElementById("audio1"); function ReproducirPausar() { if (miAudio.paused) miAudio.play(); else miAudio.pause(); } function Subir() { miAudio.volume+=0.1; } function Bajar() { miAudio.volume-=0.1; } </script> </body> </html>

    You might also like