Gana la atención de los usuarios al incluir una introducción llamativa que les invite a conocer la solución que les presentas. Para el artículo “Cómo reproducir audio en HTML”, podrías empezar con algo así:
¿Quieres agregar audio a tu sitio web pero no sabes cómo hacerlo? ¡No te preocupes! En este artículo te mostraremos paso a paso cómo reproducir archivos de audio en tus páginas web utilizando sólo HTML. Es más fácil de lo que piensas, ¡así que sigue leyendo y dale a tu sitio un toque de audio!
Agregar audio puede ser tan desafiante como agregar video a sus páginas web HTML. Afortunadamente, con un poco de ayuda, agregar contenido de audio a sus páginas HTML puede ser fácil.
Hay varios métodos de agregando audio y cada método tiene sus propias ventajas y desventajas. Hay muchos métodos diferentes que se pueden usar para agregar medios a sus páginas.
Tenga en cuenta que algunos de los métodos enumerados a continuación no son compatibles con HTML 4.01. Tienes que tener un navegador que soporte HTML5 o sus usuarios tendrán que instalar los complementos necesarios.
Aquí están los formas más comunes para agregar un video a sus páginas web.
Elemento de audio
El <audio> El elemento es un elemento HTML5. Dentro de <audio> elemento, puede agregar múltiples <source> elementos para que el navegador pueda elegir qué archivo es mejor descargar.
Aquí hay un ejemplo:
<audio controls="controls">
<source src="https://www.itgeared.com/html-embed-play-audio/musicFile.mp3" type="audio/mpeg"/>
<source src="musicFile.ogg" type="audio/ogg"/>
Text content in the event that no audio can be played.
</audio>Elementos incrustados y objetos
También puede utilizar el <embed> y/o <object> elementos para intentar reproducir elementos multimedia en páginas HTML. Mientras que la <object> elemento es compatible con HTML4, el <embed> el elemento no lo es.
Si el navegador no admite el formato de archivo, el audio no se reproducirá. Usar este método no es fácil cuando se admiten varios tipos de navegadores.
Aquí hay un ejemplo de cómo reproducir audio usando ambos elementos:
<embed src="https://www.itgeared.com/html-embed-play-audio/musicFile.mp3" height="50" width="250"/>
<object data="https://www.itgeared.com/html-embed-play-audio/musicFile.mp3" height="50" width="250"/>Utilice soluciones múltiples
Otro método es utilizar varios elementos de modo que es probable que el navegador del usuario admita al menos un método. Tenga en cuenta que esta opción incluye elementos HTML4 y HTML5. Para que tu página se valide correctamente, necesitarás usar el DOCTYPE HTML5, <!DOCTYPE HTML>.
En esto ejemploel navegador intentará reproducir el audio usando uno de los elementos en este orden: audio, objectentonces embed. Aquí hay un ejemplo.
<audio controls="controls">
<source src="https://www.itgeared.com/html-embed-play-audio/musicFile.mp3" type="audio/mpeg" />
<source src="musicFile.ogg" type="audio/ogg" />
<object data="https://www.itgeared.com/html-embed-play-audio/musicFile.mp3" height="50" width="250">
<embed src="https://www.itgeared.com/html-embed-play-audio/musicFile.mp3" height="50" width="250">
Text content in the event that no audio can be played.
</embed>
</object>
</audio>Nuevamente, mi sugerencia es implementar una solución de audio que sea fácil de mantener y que al mismo tiempo satisfaga las necesidades de sus usuarios.
Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded
