{"id":6215,"date":"2021-10-01T11:17:52","date_gmt":"2021-10-01T09:17:52","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=6215"},"modified":"2023-08-29T09:37:07","modified_gmt":"2023-08-29T07:37:07","slug":"como-anadir-un-reproductor-de-audio-html","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/","title":{"rendered":"C\u00f3mo a\u00f1adir un reproductor de audio HTML"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u00bfTienes una p\u00e1gina web y quieres <strong>a\u00f1adir un archivo de audio para que se reproduzca de fondo<\/strong>? Bien, en la entrada de hoy te ense\u00f1ar\u00e9 a poner un reproductor de audio por HTML de una forma muy f\u00e1cil. \u00a1Empezamos!<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">Hoy en d\u00eda, si est\u00e1s desarrollando una web bajo WordPress u otro CMS, <strong>a\u00f1adir un reproductor de audio a tu sitio web no entra\u00f1a casi ninguna dificultad<\/strong>. Pero, \u00bfy si est\u00e1s desarrollando una web a medida y quieres a\u00f1adir el reproductor sin recurrir a plugins externos ni a funcionalidades propias de los CMS? Tan solo deber\u00e1s seguir los pasos que aqu\u00ed te indico para lograr tu prop\u00f3sito. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo a\u00f1adir audio HTML?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para a\u00f1adir audio HTML en tu p\u00e1gina web, <a href=\"https:\/\/carontestudio.com\/blog\/listado-de-etiquetas-html\/\">necesitar\u00e1s tener algo de conocimientos HTML y sus etiquetas<\/a>. La etiqueta necesaria para que se reproduzca audio en la web es <strong>&lt;audio&gt;&lt;\/audio&gt;<\/strong>. Dentro de la etiqueta de apertura, es decir, de la etiqueta &lt;audio&gt;, ir\u00e1n una serie de <a href=\"https:\/\/carontestudio.com\/blog\/atributos-html\/\">atributos<\/a> que veremos m\u00e1s adelante. En tu c\u00f3digo deber\u00edas ver algo similar a esto:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;audio src=\"\/music\/caronte.mp3\" type=\"audio\/mpeg\"&gt;\n&lt;\/audio&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En el ejemplo vemos como dentro de la etiqueta &lt;audio&gt; hemos a\u00f1adido dos atributos. E<strong>l primero se\u00f1ala la ruta del recurso a reproducir<\/strong>. Con ello, el navegador web encontrar\u00e1 el fichero, y entonces ya podr\u00e1 reproducirlo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El segundo de los atributos indica el tipo de recurso que es en lo referente al tipo de fichero. E<strong>n el caso del ejemplo, el atributo type est\u00e1 indicando que el fichero es de audio y del tipo mpeg.<\/strong> Veamos que m\u00e1s atributos podemos aplicar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/audio-html-en-tu-web-1024x612.jpg\" alt=\"Agregar audio HTML a una p\u00e1gina web\" class=\"wp-image-6225\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/audio-html-en-tu-web-1024x612.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/audio-html-en-tu-web-300x179.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/audio-html-en-tu-web-768x459.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/audio-html-en-tu-web-1536x918.jpg 1536w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/audio-html-en-tu-web.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Atributos para la etiqueta &lt;audio&gt; HTML<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando a\u00f1ades audio a tu web con lenguaje de programaci\u00f3n HTML, podr\u00e1s marcar el comportamiento del reproductor integrado en el navegador con algunos atributos. Los m\u00e1s usados son los siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>autoplay<\/strong>: el audio empezar\u00e1 a reproducirse nada m\u00e1s cargar la p\u00e1gina web. <\/li>\n\n\n\n<li><strong>preload<\/strong>: te permite definir un buffer para que se cargue antes de que empiece a reproducirse el fichero. Este atributo puede ser recomendable si los ficheros que van a reproducirse tienen un peso alto, como por ejemplo los .wav. Con ello evitar\u00e1s cortes indeseados en la reproducci\u00f3n. <\/li>\n\n\n\n<li><strong>src<\/strong>: atributo b\u00e1sico y esencial de la etiqueta &lt;audio&gt;. Con \u00e9l se define la ruta de origen del recurso a reproducir.<\/li>\n\n\n\n<li><strong>controls<\/strong>: a\u00f1adiendo este atributo har\u00e1s que los controles del reproductor se muestren. <\/li>\n\n\n\n<li><strong>loop<\/strong>: Con este atributo implementado en tu etiqueta &lt;audio&gt;, sus audios no parar\u00e1n de reproducirse en ning\u00fan momento. Muy \u00fatil para poner una m\u00fasica de fondo en tu sitio web.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Diferente reproductor dependiendo del navegador<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blogs.masterhacks.net\/wp-content\/uploads\/2017\/05\/masterhacks_reproductor_audio_html5.png\" alt=\"A\u00f1adir reproductor de audio a web\" style=\"width:503px;height:301px\" width=\"503\" height=\"301\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Seguro que habr\u00e1s notado que, dependiendo del navegador que uses, el reproductor de audio que se muestra en pantalla var\u00eda de un navegador a otro. <strong>Esto es debido a que el reproductor de audio es parte del propio navegador y no de la web<\/strong>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aun as\u00ed, si tienes conocimientos de programaci\u00f3n, podr\u00e1s crear tu propio reproductor de audio para tu web, prescindiendo as\u00ed del estilo visual del reproductor del navegador. En otra ocasi\u00f3n te ense\u00f1ar\u00e9 como puedes crear un reproductor de audio personalizado en tu web.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">C\u00f3mo has podido comprobar, <strong>a\u00f1adir un reproductor de audio a tu web<\/strong> es realmente sencillo. Con tan solo un poco de experiencia programando en HTML, lograr\u00e1s introducirlo en tu web. Sin embargo, si necesitas realizar un trabajo m\u00e1s complicado en el <a href=\"https:\/\/carontestudio.com\/diseno-web\/diseno-web-vitoria\/\">dise\u00f1o de tu web<\/a> desde Caronte podemos ayudarte. \u00a1Contacta con nosotros!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esperamos que este art\u00edculo os haya resultado de inter\u00e9s. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a1Hasta la pr\u00f3xima!<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/como-poner-un-video-de-fondo-en-html\/\"><img decoding=\"async\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2022\/03\/como-anadir-video-html-de-fondo-en-una-pagina-web.jpg\" alt=\"Como poner un video de fondo HTML en tu web\" class=\"wp-image-5300\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/\"><img decoding=\"async\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/poner-audio-html.jpg\" alt=\"Como a\u00f1adir un reproductor de audio HTML en tu web\" class=\"wp-image-5300\"\/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfTienes una p\u00e1gina web y quieres a\u00f1adir un archivo de audio para que se reproduzca de fondo? Bien, en la entrada de hoy te ense\u00f1ar\u00e9 a poner un reproductor de audio por HTML de una forma muy f\u00e1cil. \u00a1Empezamos!<\/p>\n","protected":false},"author":4,"featured_media":6223,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[],"class_list":["post-6215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo a\u00f1adir un reproductor de audio HTML - Caronte Web Studio<\/title>\n<meta name=\"description\" content=\"Si quieres saber como a\u00f1adir un reproductor de audio en tu p\u00e1gina web con HTML, no puedes perderte este art\u00edculo. \u00a1En 5 minutos lo lograr\u00e1s!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo a\u00f1adir un reproductor de audio HTML - Caronte Web Studio\" \/>\n<meta property=\"og:description\" content=\"Si quieres saber como a\u00f1adir un reproductor de audio en tu p\u00e1gina web con HTML, no puedes perderte este art\u00edculo. \u00a1En 5 minutos lo lograr\u00e1s!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-01T09:17:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-29T07:37:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/poner-audio-html.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"V\u00edctor S\u00e1nchez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"V\u00edctor S\u00e1nchez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-anadir-un-reproductor-de-audio-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-anadir-un-reproductor-de-audio-html\\\/\"},\"author\":{\"name\":\"V\u00edctor S\u00e1nchez\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/86dbac78fed697f8df2289e9242c97e9\"},\"headline\":\"C\u00f3mo a\u00f1adir un reproductor de audio HTML\",\"datePublished\":\"2021-10-01T09:17:52+00:00\",\"dateModified\":\"2023-08-29T07:37:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-anadir-un-reproductor-de-audio-html\\\/\"},\"wordCount\":642,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-anadir-un-reproductor-de-audio-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/poner-audio-html.jpg\",\"articleSection\":[\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-anadir-un-reproductor-de-audio-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-anadir-un-reproductor-de-audio-html\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-anadir-un-reproductor-de-audio-html\\\/\",\"name\":\"C\u00f3mo a\u00f1adir un reproductor de audio HTML - Caronte Web Studio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-anadir-un-reproductor-de-audio-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-anadir-un-reproductor-de-audio-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/poner-audio-html.jpg\",\"datePublished\":\"2021-10-01T09:17:52+00:00\",\"dateModified\":\"2023-08-29T07:37:07+00:00\",\"description\":\"Si quieres saber como a\u00f1adir un reproductor de audio en tu p\u00e1gina web con HTML, no puedes perderte este art\u00edculo. \u00a1En 5 minutos lo lograr\u00e1s!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-anadir-un-reproductor-de-audio-html\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-anadir-un-reproductor-de-audio-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-anadir-un-reproductor-de-audio-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/poner-audio-html.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/poner-audio-html.jpg\",\"width\":1250,\"height\":737,\"caption\":\"A\u00f1adir audio HTML a tu web\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/como-anadir-un-reproductor-de-audio-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo a\u00f1adir un reproductor de audio HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/86dbac78fed697f8df2289e9242c97e9\",\"name\":\"V\u00edctor S\u00e1nchez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g\",\"caption\":\"V\u00edctor S\u00e1nchez\"},\"description\":\"\u00bfDudas con tu hosting? \u00bfNo sabes como extremar la precauci\u00f3n de tu hosting? Est\u00e1s en el lugar adecuado. Despeja cualquier duda con los art\u00edculos de V\u00edctor S\u00e1nchez.\",\"sameAs\":[\"https:\\\/\\\/www.carontestudio.com\\\/\"],\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/victor\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo a\u00f1adir un reproductor de audio HTML - Caronte Web Studio","description":"Si quieres saber como a\u00f1adir un reproductor de audio en tu p\u00e1gina web con HTML, no puedes perderte este art\u00edculo. \u00a1En 5 minutos lo lograr\u00e1s!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo a\u00f1adir un reproductor de audio HTML - Caronte Web Studio","og_description":"Si quieres saber como a\u00f1adir un reproductor de audio en tu p\u00e1gina web con HTML, no puedes perderte este art\u00edculo. \u00a1En 5 minutos lo lograr\u00e1s!","og_url":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2021-10-01T09:17:52+00:00","article_modified_time":"2023-08-29T07:37:07+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/poner-audio-html.jpg","type":"image\/jpeg"}],"author":"V\u00edctor S\u00e1nchez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"V\u00edctor S\u00e1nchez","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/"},"author":{"name":"V\u00edctor S\u00e1nchez","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/86dbac78fed697f8df2289e9242c97e9"},"headline":"C\u00f3mo a\u00f1adir un reproductor de audio HTML","datePublished":"2021-10-01T09:17:52+00:00","dateModified":"2023-08-29T07:37:07+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/"},"wordCount":642,"commentCount":4,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/poner-audio-html.jpg","articleSection":["Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/","url":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/","name":"C\u00f3mo a\u00f1adir un reproductor de audio HTML - Caronte Web Studio","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/poner-audio-html.jpg","datePublished":"2021-10-01T09:17:52+00:00","dateModified":"2023-08-29T07:37:07+00:00","description":"Si quieres saber como a\u00f1adir un reproductor de audio en tu p\u00e1gina web con HTML, no puedes perderte este art\u00edculo. \u00a1En 5 minutos lo lograr\u00e1s!","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/poner-audio-html.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2021\/09\/poner-audio-html.jpg","width":1250,"height":737,"caption":"A\u00f1adir audio HTML a tu web"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/como-anadir-un-reproductor-de-audio-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo a\u00f1adir un reproductor de audio HTML"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/86dbac78fed697f8df2289e9242c97e9","name":"V\u00edctor S\u00e1nchez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c9f72a995ccc47af434f97fc9ca165f16a8ad9a5cdd99b4ac0def4f00778fe8c?s=96&d=mm&r=g","caption":"V\u00edctor S\u00e1nchez"},"description":"\u00bfDudas con tu hosting? \u00bfNo sabes como extremar la precauci\u00f3n de tu hosting? Est\u00e1s en el lugar adecuado. Despeja cualquier duda con los art\u00edculos de V\u00edctor S\u00e1nchez.","sameAs":["https:\/\/www.carontestudio.com\/"],"url":"https:\/\/carontestudio.com\/blog\/author\/victor\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/6215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=6215"}],"version-history":[{"count":10,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/6215\/revisions"}],"predecessor-version":[{"id":16196,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/6215\/revisions\/16196"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/6223"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=6215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=6215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=6215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}