Antes del surgimiento de HTML5, no existía un estándar para reproducir archivos de audio en una página web. La mayoría de las soluciones eran reproductores basados en flash que solo se renderizaban si tenía un complemento de reproductor flash instalado en su sistema. Este problema es lo que condujo al desarrollo de un nuevo estándar para medios dentro de cualquier navegador web.
En este momento, la mayoría de los dispositivos móviles o tabletas simplemente optaron por no admitir flash. Con este nuevo estándar implementado, los desarrolladores están utilizando las nuevas convenciones de HTML5 para implementar medios como audio o video.
WordPress ha hecho que importar audio a tu blog sea muy fácil. Este artículo le enseñará más sobre el soporte de audio y cómo usar y personalizar el reproductor de audio de WordPress.
En el momento de escribir este artículo, hay varios navegadores compatibles con el nuevo audioelemento HTML. A continuación se muestra una lista de los navegadores.
- Explorador de Internet 9+
- Firefox
- Ópera
- Cromo
- Safari
Marcado HTML básico
El nuevo audioelemento tiene una estructura simple que se vincula a un archivo en su sitio web de forma similar a como vincularía a una imagen. La diferencia y la clave para recordar es que los diferentes navegadores requieren diferentes formatos de audio. Algunos navegadores admiten más de un tipo de archivo de audio.
Así es como se ve el marcado:
|
01
02
03
04
05
|
<audio controls> <source src="audiofile.ogg" type="audio/ogg"> <source src="audiofile.mp3" type="audio/mpeg"> Your browser does not support the audio element</audio> |
Este artículo no pretende explicar el HTML que ve arriba, pero lo haré brevemente para brindarle un poco de información sobre lo que está sucediendo.
El audioelemento que define el contenido sonoro, se escribe con una controlsopción. Esto mostrará los controles de un reproductor multimedia de forma predeterminada. Esto les da a sus usuarios el control para pausar o reproducir el archivo, así como ajustar otras propiedades como el volumen.
El elemento es el enlace al archivo multimedia real que desea mostrar. Notarás que hay dos elementos. Estos son necesarios para ofrecer soporte para todos los principales navegadores modernos. Aquí hemos vinculado los tipos de audio de oggy mp3, el otro tipo al que puede vincular es wav.
Soporte de WordPress
La función de audio dentro de WordPress le permite incrustar archivos de audio y reproducirlos. Esto se agregó a partir de la versión 3.6 de WordPress.
WordPress incluyó la función como un código abreviado que utiliza el marcado que expliqué anteriormente. El código abreviado se vinculará a un archivo o archivos multimedia específicos y generará el HTML como escribí anteriormente.
El código abreviado predeterminado se ve así:
Para vincular a sus archivos, puede declarar la fuente de los archivos dentro del código abreviado que sería así:
También puede simplemente incluir un enlace a un archivo de audio como el que se muestra a continuación y WordPress lo reproducirá como audio y mostrará un reproductor.
This is my latest song
http://mywebsite/media/songs/sweetsong(.extensión de audio)
Algo más de contenido
Para asegurarse de que su audio se reproduzca en todos los navegadores, debe hacer referencia a otros tipos de audio para el mismo archivo, así:
Observe cómo src""se eliminó el atributo y se agregaron nuevos atributos. En este caso es mp3=" ", ogg=" ", wav=" ".
Opciones de reproducción.
El audioshortcode permite algunas opciones para la reproducción.
El srces un campo opcional, pero es aconsejable usarlo, especialmente si tiene varios navegadores compatibles. Los siguientes tipos se pueden definir para permitir retrocesos elegantes si un determinado navegador no puede reproducir un tipo de audio específico.
- mp3
- mp4
- ogg
- onda
- wma
bucle
Existe la opción de repetir automáticamente la reproducción de un archivo. Por defecto esta opción está desactivada. Personalmente, si hace un bucle de reproducción de audio, creo que solo molestará a sus usuarios, por lo que puede ser mejor evitarlo por completo.
o
auto-reproducción
En muy raras circunstancias, es posible que desee reproducir automáticamente el audio cuando un usuario visita una página específica. Por defecto esta opción está desactivada.
o
precarga
Es posible que desee precargar audio en algunas circunstancias. Hay algunas opciones disponibles si elige hacerlo:
– Este es el valor predeterminado. El audio no se cargará cuando se cargue la página, sino poco después.– El audio se carga junto con la página.– Solo se cargan los metadatos cuando se carga la página.
Agregar audio a una publicación
Con el trasfondo de cómo el audioshortcode maneja la implementación de sus archivos de audio dentro de WordPress, ahora puede crear una nueva publicación.
El proceso de agregar una nueva publicación es el mismo que siempre ha sido dentro de WordPress. Si planea agregar audio, puede agregarlo a su biblioteca de medios como lo haría con una imagen.
Una cosa que puede notar es un nuevo menú para seleccionar de qué manera implementar el audio aparece. Elegí el valor predeterminado aquí al agregar un archivo de audio.
Insertar audio. Observe el nuevo elemento de selección en la parte inferior derecha.
Una vez que inserte el audio, puede crear y ajustar su publicación de blog. Dentro de nuestra publicación agregamos el audio que aparece a continuación:
Agregar una nueva publicación de audio
Y luego, cuando se publica, aparece así con la interfaz de usuario integrada que crea el código HTML5 y su navegador.
La publicación está publicada. El audio se muestra con la configuración predeterminada.
Conclusión
El elemento de audio es una excelente manera de agregar variedad a las publicaciones de su blog. Una técnica más común y una tendencia prometedora es que los blogs incluyan podcasts. Los podcasts pueden cargarse en su sitio e incluirse con facilidad. El nuevo audioelemento HTML5 combinado con WordPress ha hecho que crear y compartir audio sea más fácil que nunca al proporcionar a sus usuarios un acceso rápido a contenido dinámico y más atractivo.
Imagen en miniatura del artículo por venimo / Shutterstock.com