Cómo insertar audio en una página html. ¿Cómo insertar audio en un documento HTML? Cómo configurar música de fondo en html

Esta pregunta surge muy a menudo, por lo que decidí dedicarle un artículo separado en las lecciones. Dado que HTML no tiene una tecnología universal para reproducir audio en todos los navegadores, para solucionar este problema sugiero descargar el archivo del reproductor de audio, como se hace en la mayoría de los sitios. Hacemos todo paso a paso:

1. En el hosting donde se encuentra tu sitio, en el directorio raíz (la carpeta donde está el archivo índice), crea la carpeta de audio. En el futuro colocarás todos los archivos de audio en él.

3. Ahora seleccione los archivos que necesita, preferiblemente en formato mp3. Cree una carpeta de audio en la raíz del sitio y cárguelos.

4. Ya sólo queda introducir el código de conexión del reproductor. Es adecuado para cualquier sitio. En el lugar correcto, solo necesita indicar la ruta al archivo del reproductor y al archivo de audio, reemplazando respectivamente las palabras su_dominio y nombre del archivo de audio:

¡Y todo está listo! También puedes mirar el ejemplo práctico.

Cómo instalar música de fondo en HTML Utilizando las capacidades de HTML y el navegador, también puede insertar música de fondo en la página. Necesitará un archivo de audio en el formato deseado: WAV, AU, MIDI o MP3. Puede utilizar cualquier archivo con la extensión especificada como ejemplo.

La primera forma es la etiqueta de inserción. El elemento incrustado se utiliza para cargar y mostrar objetos (por ejemplo, archivos de vídeo, películas flash, algunos archivos de audio, etc.) que el navegador no comprende inicialmente.

La sintaxis es bastante simple:

No se requiere una etiqueta de cierre.

Ahora veamos un ejemplo de un registro con atributos, y a continuación con su decodificación:

Incrustar atributos de etiquetas para reproducir audio en html
ancho: ancho del panel en píxeles (o porcentaje)
altura: altura del panel en píxeles (o porcentaje)
alinear: posición del panel en relación con el texto, los valores posibles son izquierda, derecha, centro
oculto: le permite ocultar el panel, valores de atributos: verdadero: el panel está oculto, falso: el panel es visible (valor predeterminado)
inicio automático - verdadero - el reproductor se inicia automáticamente cuando se carga la página, falso - espera a que se presione el botón de reproducción
bucle - bucle, verdadero - la pista se reproduce en círculo, y si es falso - solo una vez

Segunda vía. Muy antiguo, pero también práctico) Agrega la melodía a la misma carpeta (directorio) donde se encuentra tu archivo, y en el cuerpo escribe el siguiente código:

Como resultado, después de cargar la página, sonará la melodía que especificó en la etiqueta bgsound. Ahora echemos un vistazo mejor a los atributos de la etiqueta:

src: ruta a su archivo de audio
bucle: cuántas veces repetir la melodía (si es -1, se repite sin cesar)
balance - valor de balance estéreo (de -10000 a 10000)
volumen: volumen de reproducción de melodía, donde 0 es el máximo y -10000 es el mínimo.

Sin embargo, no será posible controlar el reproductor de ninguna manera: cada vez que se actualice la página, la pista se reproducirá nuevamente.

Después de describir el método para insertar música de fondo, quiero disuadirlo de esto, ya que la mayoría de los usuarios, por regla general, ya escuchan música cuando visitan varios sitios. Por lo tanto, la música que lo acompaña solo puede obligarlo a cerrar la pestaña del sitio.

Insertar audio y música en HTML5 - etiqueta de audio
audio: una etiqueta emparejada que define el sonido de fondo, la música u otra transmisión de audio en el sitio.

Atributos de etiquetas de audio

reproducción automática: el archivo se reproduce inmediatamente cuando se carga la página (similar a la música de fondo de bgsound)
controles: muestra el panel de control del reproductor en el navegador
bucle: reproduce el archivo nuevamente después de que finaliza
precarga: el archivo de audio se cargará junto con la carga de la página
src: ruta al archivo de audio (mp3 u ogg)

Código de ejemplo con etiqueta de audio

Etiqueta de audio

Audio en HTML 5

Su navegador no admite la etiqueta de audio.
Descargar musica.

Etiquetas, atributos y valores

• - determina el sonido HTML y la música de fondo del sitio. Ubicado en sector.
• - define la URL de un archivo de sonido en formato Wav o Mp3.
• loop="" - determina el número de reproducciones.
• volume="-1000" - ajusta el volumen del sonido. En este caso, el valor indicado se restará del nivel de volumen actual establecido en la computadora del usuario.
• balance="0" - ajusta el balance del sonido.

¡Atención! El método descrito anteriormente para introducir sonido de fondo en una página HTML sólo es adecuado para las primeras versiones de los navegadores Internet Explorer y Opera. No es adecuado para navegadores modernos ⇒ ¡La música y el sonido en la página del sitio no se reproducen! Por lo tanto, mire a continuación, donde se analiza en detalle el método entre navegadores para insertar sonido y música en un sitio web para todos los navegadores (Opera, Firefox, Internet Explorer, Chrome).

Sonido en HTML o música en el sitio para todos los navegadores.

Sonido HTML de fondo para Opera, Firefox, Internet Explorer, Chrome:

El código se encuentra en el sector.

Atributos y valores

• autostart="" - determinará si la música se reproducirá automáticamente al abrir una página de Internet o no. Valores posibles: verdadero - sí o falso - no.
• loop="" - determina si las reproducciones se repetirán. Valores posibles: verdadero - sí o falso - no.
• oculto="" - determina si el panel de control del reproductor estará oculto o no. Valores posibles: verdadero - sí o falso - no. En caso contrario, se indican las dimensiones del panel: ancho="" alto="" .

¡El consejo se sugiere por sí solo! Utilice música o sonido HTML de fondo en su sitio sólo cuando esté realmente justificado.

El audio HTML5 proporciona capacidades mejoradas para trabajar con contenido de audio. Hasta hace poco, la única forma de agregar archivos de sonido a las páginas web era integrar un sonido de fondo mediante una etiqueta que se reproduciría mientras el usuario navegaba por la página, sin opción de desactivarlo.

Gracias a la incorporación de un nuevo elemento a la especificación HTML5, ahora es posible agregar contenido de audio con una interfaz de programación incorporada sin necesidad de complementos.

Cómo agregar audio HTML5 a una página web 1. Compatibilidad con el navegador de elementos

Es decir: 9,0
Firefox: soporte básico 3.5, soporte completo 15.0
Cromo: 3.0
Safari: 3.1
Ópera: 10,5
iOSSafari: 7.1
Mini Opera: -
Navegador de Android: 4.1
Chrome para Android: 44

El elemento HTML5 se utiliza para incrustar contenido de audio en páginas web. En general, el marcado HTML tiene este aspecto:

El atributo de controles agrega navegadores para mostrar la interfaz de control del reproductor de audio: botones de reproducción, pausa y volumen.

Arroz. 1. Aspecto del reproductor de audio en diferentes navegadores

Actualmente no existe ningún formato de audio que funcione en todos los navegadores, por lo que para garantizar que el contenido sea accesible para la audiencia más amplia posible, se recomienda incluir varias fuentes de audio representadas mediante el atributo src del elemento. Al mismo tiempo, puede agregar contenido alternativo para navegadores que no admiten el elemento.

Descargar nombre.mp3

Tabla 1. Atributos de etiqueta Atributo

auto-reproducción	Reproducción automática de un archivo de audio inmediatamente después de cargar la página.
control S	Le indica al navegador que muestre controles básicos de reproducción (iniciar y detener la reproducción, saltar a otra ubicación en una grabación, ajustar el volumen).
bucle	Reproducción en bucle de un archivo de audio.
apagado	Desactiva el sonido al reproducir un archivo de audio.
precarga	Un atributo responsable de precargar contenido de audio. Opcional, algunos navegadores lo ignoran. Valores posibles: auto: el navegador descarga el archivo de audio completo para que esté disponible cuando el usuario comience a reproducirlo. Metadatos: el navegador descarga la primera pequeña parte del archivo de audio para determinar sus características básicas. ninguno: no hay descarga automática del archivo de audio.
src	Contiene la URL absoluta o relativa del archivo de audio.

2. Códecs de audio

Un códec de audio (decodificador) es un programa para convertir datos digitales en un archivo de audio o formato de transmisión de audio. Los formatos de audio populares son:

MP3 es el formato de audio más popular que utiliza compresión con pérdida y le permite reducir el tamaño del archivo varias veces. Debido a las tarifas de licencia, Firefox y Opera no son compatibles.

A.A.C. (Códec de audio avanzado)- un códec cerrado, similar al MP3, pero en comparación con este último, admite una mayor calidad de sonido con un tamaño de archivo similar.

Ogg Vorbis es un formato gratuito y de código abierto compatible con Firefox, Opera y Chrome. Proporciona buena calidad de sonido, pero no es ampliamente compatible con los reproductores de hardware.

3. Recursos de medios alternativos

El elemento se utiliza para agregar múltiples recursos multimedia para y . Indica archivos de vídeo/audio alternativos entre los que el navegador puede elegir según el tipo de medio o códec admitido.

4. Añade subtítulos y títulos.

El elemento se utiliza como elemento hijo y . Agrega una pista de texto para subtítulos, títulos multimedia u otra información de texto que debería estar visible mientras se reproduce un archivo de audio o video.

Tabla 3. Atributos de etiqueta Descripción del atributo, valor aceptado

por defecto	Indica que esta pista se reproduce de forma predeterminada. Sólo un elemento puede contener un atributo determinado.
amable	Especifica el tipo de pista de texto; los subtítulos se muestran de forma predeterminada. Valores aceptados: subtítulos: traducción de diálogos y efectos de sonido, que se muestran como texto sobre el video (para usuarios sordos). capítulos: agrega títulos de capítulos como una lista para navegar a través del archivo multimedia. descripciones: agrega una descripción de audio de lo que sucede en el video (para usuarios ciegos). Metadatos: los metadatos utilizados por los scripts no se muestran a los usuarios. subtítulos: duplicación de texto de la pista de audio del video, que se muestra como subtítulos del video.
etiqueta	Agrega un título de pista. Si este atributo no está configurado, el navegador aplicará el valor predeterminado.
src	Contiene una URL absoluta o relativa a los datos de la pista de texto.
srclang	Idioma de la pista que se está reproduciendo.

5. Ejemplo estilizado de reproductor de audio.

Usando estilos CSS puedes darle a tu reproductor de audio un aspecto inusual. La reproducción se controla mediante un pequeño script (usando la biblioteca jQuery), el sonido aparece cuando pasa el cursor sobre el disco.

Para insertar un clip de audio en una página web, HTML 5 proporciona una etiqueta emparejada. La dirección de Internet del archivo en el que se almacena este clip de audio se indica mediante el atributo SRC de esta etiqueta:

Cuando un navegador web encuentra una etiqueta, puede descargar y reproducir el archivo de audio inmediatamente, descargarlo sin reproducirlo o no hacer nada en absoluto. (En el último caso, podemos iniciar la reproducción desde un script web; los scripts web se analizarán en la Parte III). También puede proporcionar controles en la página web que permiten al visitante reproducir, pausar, avanzar o rebobinar rápidamente un audio. archivo y ajusta el volumen. Todo esto se puede personalizar mediante varios atributos de etiquetas, que veremos en breve.

La etiqueta crea un elemento de bloque de la página web. Por lo tanto, no podremos insertar un clip de audio en una página web como parte de un párrafo. Pero para colocarlo en un párrafo aparte no tenemos que realizar ninguna acción adicional (a diferencia de una imagen).

De forma predeterminada, el navegador web no reproducirá el clip de audio. Para hacer esto, debe especificar el atributo especial AUTOPLAY en la etiqueta. Este es un atributo verdaderamente especial: no tiene significado; su mera presencia en la etiqueta es suficiente para que surta efecto (atributo de etiqueta sin significado):

¡Ahora escucharás el sonido!

De forma predeterminada, el clip de audio no se muestra de ninguna manera en la página web (lo cual, sin embargo, es comprensible: el audio no debe verse, sino escucharse). Pero si coloca un atributo en la etiqueta sin el valor CONTROLS, el navegador web mostrará controles de reproducción de audio en el lugar de la página web donde se coloca la etiqueta. Estos incluyen un botón de reproducción/pausa, una barra de reproducción y un control de volumen:

Presione el botón de reproducción para escuchar el sonido.

Tiene sentido indicar un atributo sin el valor AUTOBUFFER en una etiqueta sólo si no hay ningún atributo AUTOPLAY allí. Si se especifica, el navegador web comenzará a descargar el archivo de audio inmediatamente después de cargar la página web; esto eliminará la demora del archivo antes de que comience a reproducirse.

Para poner a prueba los conocimientos adquiridos en acción, necesitaremos un clip de audio en un formato compatible con el navegador web. El autor encontró un pequeño clip de audio en formato WAV-PCM y le puso el nombre sound.wav. Puedes usar cualquier otro clip de audio, pero por supuesto tendrás que especificar el nombre del archivo en el que está almacenado en el código HTML del Listado 4.2.

. Creemos una página web que describa esta etiqueta, cuyo código HTML se muestra en el Listado 4.2.

Guardemos la página web en un archivo llamado t_audio.htm. Coloquemos el archivo de audio seleccionado (del autor - sound.wav) en la carpeta donde se encuentran todos los archivos de nuestro sitio web (incluido t_audio.htm). E inmediatamente abra la página web recién creada en un navegador web (Fig. 4.2).

Veremos el código de ejemplo y, a continuación, el resultado de su ejecución: elementos interesantes para controlar la reproducción de un clip de audio. Podemos darle al play y escucharlo.

Insertando un vídeo

Se utiliza una etiqueta emparejada para insertar un vídeo en una página web. La dirección de Internet del archivo de vídeo se indica mediante el conocido atributo SRC de esta etiqueta:

Al encontrar esta etiqueta, el navegador web mostrará un panel de visualización de contenido de video en el lugar de la página web donde se encuentra. Dependiendo de los atributos que especifiquemos en la etiqueta, puede descargar y reproducir el archivo de audio inmediatamente, solo descargarlo sin reproducirlo o no hacer nada en absoluto. También puede mostrar controles de reproducción de video en una página web.

Al igual que la etiqueta, la etiqueta crea un elemento de bloque de una página web y admite los atributos AUTOPLAY, CONTROLS y AUTOBUFFER:

Si el vídeo aún no ha comenzado a reproducirse, el panel de vista previa mostrará el primer fotograma del vídeo o nada en absoluto (el comportamiento exacto depende del navegador web). Pero podemos especificar una imagen gráfica que se mostrará allí como pantalla de presentación. Esto se hace usando el atributo POSTER de la etiqueta; su valor indica la dirección de Internet del archivo gráfico deseado:

Aquí hemos especificado una imagen de presentación para el vídeo, que se mostrará en el panel de visualización antes de que comience a reproducirse y que se almacena en el archivo filmposter.jpg.

Bueno, ¿practiquemos? Primero, busquemos un archivo de vídeo de un formato adecuado. El autor encontró un pequeño vídeo en formato OGG y le puso el nombre film.ogg. Puedes elegir cualquier otro vídeo, pero, por supuesto, tendrás que especificar su nombre de archivo en el código HTML a continuación.

EN UNA NOTA

Si no encuentra un vídeo en un formato adecuado, puede crear uno usted mismo transcodificando un vídeo guardado en un formato diferente. Para ello es adecuada la utilidad SUPER ©, que se puede encontrar en la dirección de Internet http://www.erightsoft.com/SUPER.html. Admite muchos formatos multimedia, incluido OGG.

Abramos la página web index.htm e ingresemos la etiqueta en la sección de etiquetas. Creemos una página web que describa esta etiqueta, cuyo código HTML se muestra en el Listado 4.3.

Guardemos la página web en un archivo llamado t_video.htm. Coloquemos el archivo de video seleccionado (del autor - film.ogg) en la carpeta donde se encuentran todos los archivos de nuestro sitio web (incluido t_video.htm). Y abra la página web terminada t_video.htm en un navegador web (Fig. 4.3).

Debajo del código de ejemplo veremos el resultado de su ejecución: el panel de visualización y los elementos para controlar la reproducción. Presionemos el botón de reproducción y veamos la película. Tenga en cuenta que una vez que comience la reproducción, los controles desaparecerán; Para acceder a ellos, debe pasar el cursor del mouse sobre el panel de vista. Una vez que el vídeo haya terminado de reproducirse, estos controles volverán a aparecer en la pantalla.

Funciones de etiquetas adicionales y

¡Pero espera! Anteriormente, aprendimos que el conjunto de formatos multimedia admitidos varía entre los diferentes navegadores web. Y puede suceder que el audio o vídeo que coloquemos en la página Web sea demasiado resistente para algún navegador Web. ¿Qué tengo que hacer?

Especialmente para estos casos, HTML 5 ofrece la posibilidad de indicar varios archivos multimedia en una etiqueta o a la vez. El propio navegador web seleccionará aquel cuyo formato admita.

Si vamos a enumerar varios archivos multimedia en una sola etiqueta, debemos hacer dos cosas.

1. Eliminar de la etiqueta o referencia al archivo multimedia, es decir, el atributo SRC y su valor.

2. Coloque dentro una etiqueta o un conjunto de etiquetas, cada una de las cuales determinará la dirección de Internet de un archivo multimedia.

Una sola etiqueta especifica tanto la dirección de Internet del archivo multimedia como su tipo MIME. Los atributos SRC y TYPE de esta etiqueta están destinados a esto, respectivamente:

Esta etiqueta identifica dos archivos de vídeo que almacenan la misma película: uno en formato OGG y el otro en formato QuickTime. Un navegador web que admita el formato OGG descargará y reproducirá el primer archivo, y un navegador web que admita QuickTime cargará y reproducirá el segundo archivo.

Tenga en cuenta que se puede omitir el tipo MIME del archivo de vídeo (y, en consecuencia, el atributo TYPE de la etiqueta). Pero luego el navegador web tendrá que cargar el comienzo del archivo para ver si admite el formato del archivo. Y esta es una carga adicional y completamente innecesaria en la red. Por eso es mejor especificar siempre el tipo MIME.

¿Qué pasa si el navegador web no admite ninguna etiqueta? En este caso, los ignorará y no mostrará nada en la página web. Sin embargo, podemos proporcionar texto de reemplazo que describa el problema que ha surgido y sugiera alguna forma de resolverlo (por ejemplo, cambiar el navegador web). Este texto de reemplazo se coloca dentro de una etiqueta o después de todas las etiquetas (si las hay), por ejemplo, como en el Listado 4.4.

Tenga en cuenta que no especificamos las etiquetas que crean el párrafo en el texto de reemplazo. Las etiquetas en sí son elementos de bloque, por lo que no es necesario.

Se trata de medios de Internet y las herramientas HTML 5 que los respaldan.

Descripción

Agrega, reproduce y administra configuraciones de audio en una página web. La ruta al archivo se especifica mediante el atributo src o una subetiqueta. Puede escribir texto dentro del contenedor que se mostrará en los navegadores que no funcionan con esta etiqueta.

La lista de códecs compatibles con los navegadores es limitada y se muestra en la tabla. 1.

Mesa 1. Códecs y navegadores

Códec	explorador de Internet	Cromo	Ópera	Safari	Firefox
ogg/vorbis
wav
mp3
A.A.C.

Para una reproducción universal en navegadores específicos, el audio se codifica utilizando diferentes códecs y los archivos se agregan simultáneamente a través de la etiqueta.

Atributos de sintaxis El sonido comienza a reproducirse inmediatamente después de que se carga la página. Agrega un panel de control a un archivo de audio. Repite el sonido desde el principio hasta que termina. Se utiliza para descargar un archivo junto con la carga de una página web. Especifica la ruta al archivo que se está reproduciendo. etiqueta de cierre

Requerido.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

audio

Alexander Klimenkov - Catorce

Su navegador no admite la etiqueta de audio. Descargar musica.

El resultado del ejemplo en el navegador Opera se muestra en la Fig. 1.

Arroz. 1. Reproduce un archivo de audio

Navegadores

Los controles de reproducción de audio varían en apariencia entre navegadores, pero los elementos básicos son los mismos. Estos son el botón de reproducción/pausa, la duración de la pista, el tiempo de reproducción total y transcurrido y el nivel de volumen.