{"id":23116,"date":"2024-04-05T14:44:08","date_gmt":"2024-04-05T13:44:08","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/multimedia-etiqueta-html-audio-reproducir-y-anadir-audio-en-html\/"},"modified":"2024-06-03T17:31:26","modified_gmt":"2024-06-03T16:31:26","slug":"multimedia-etiqueta-html-audio-reproducir-y-anadir-audio-en-html","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/multimedia-tag-html-audio-play-and-add-audio-in-html\/","title":{"rendered":"Multimedia HTML audio tag: Play and add audio in HTML"},"content":{"rendered":"<p>As a web developer, it is important to have a thorough knowledge of the different HTML tags and how to use them on our site. One of those tags is <strong><audio><\/strong>, which allows us to play and add audio to our website. In this article, we&#039;ll explore how to use the HTML audio tag to add sound to your website.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/multimedia-tag-html-audio-play-and-add-audio-in-html\/#Reproducir_audio_en_formato_MP3\" >Play audio in MP3 format<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/multimedia-tag-html-audio-play-and-add-audio-in-html\/#Anadir_audio_a_un_video\" >Add audio to a video<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/multimedia-tag-html-audio-play-and-add-audio-in-html\/#Otras_caracteristicas_y_formatos_de_audio_HTML\" >Other HTML Audio Features and Formats<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/multimedia-tag-html-audio-play-and-add-audio-in-html\/#Preguntas_frecuentes_sobre_la_etiqueta_HTML_audio\" >HTML Audio Tag FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/multimedia-tag-html-audio-play-and-add-audio-in-html\/#%C2%BFComo_puedo_cambiar_el_color_de_fondo_del_reproductor_de_audio\" >How can I change the background color of the audio player?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/multimedia-tag-html-audio-play-and-add-audio-in-html\/#%C2%BFComo_puedo_descargar_el_archivo_de_audio_usando_HTML\" >How can I download the audio file using HTML?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/multimedia-tag-html-audio-play-and-add-audio-in-html\/#%C2%BFComo_puedo_agregar_un_enlace_a_un_archivo_de_audio_en_mi_pagina_HTML\" >How can I add a link to an audio file in my HTML page?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Reproducir_audio_en_formato_MP3\"><\/span>Play audio in MP3 format<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The most common audio format on the web is MP3. The label <strong><audio><\/strong> It allows us to play audio files in MP3 format easily. You just need to add the following code:<\/p>\n<pre>\n<audio controls>\n  \n<\/audio>\n<\/pre>\n<p>In this example, we use the attribute <strong>controls<\/strong> to display the audio playback controls, such as the play, pause and volume buttons. The attribute <strong>src<\/strong> specifies the location of the MP3 file we want to play. Make sure you replace &quot;song.mp3&quot; with the correct path to your MP3 file.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Anadir_audio_a_un_video\"><\/span>Add audio to a video<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In addition to playing audio, you can also add audio to a video element in HTML. To do this, you simply need to add the tag <strong><audio><\/strong> inside the label <strong><video><\/strong> as follows:<\/p>\n<pre>\n<video controls>\n  \n  <audio src=\"audio.mp3\"><\/audio>\n<\/video>\n<\/pre>\n<p>In this example, the label <strong>&lt;source&gt;<\/strong> specifies the location of the video file, while the tag <strong><audio><\/strong> specifies the location of the audio file to play along with the video.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Otras_caracteristicas_y_formatos_de_audio_HTML\"><\/span>Other HTML Audio Features and Formats<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The label <strong><audio><\/strong> in HTML has several additional features and formats that you can use to customize the audio experience on your website. Some of these features include:<\/p>\n<ul>\n<li>The attribute <strong>autoplay<\/strong>, which allows audio to play automatically when the page loads.<\/li>\n<li>The attribute <strong>loop<\/strong>, which allows the audio to loop continuously.<\/li>\n<li>The attribute <strong>preload<\/strong>, which indicates whether the audio should be fully loaded before playback begins.<\/li>\n<li>The attribute <strong>controlslist<\/strong>, which determines which controls to display in the audio player.<\/li>\n<\/ul>\n<p>Regarding the supported audio formats, the tag <strong><audio><\/strong> It supports several formats including MP3, Ogg Vorbis and WAV. You can provide multiple audio sources using multiple tags <strong>&lt;source&gt;<\/strong> inside the label <strong><audio><\/strong>, allowing the browser to use the most appropriate compatible format.<\/p>\n<p>Remember that it is important to ensure that audio files are properly optimized and have an appropriate file size to ensure fast page loading and a good user experience.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes_sobre_la_etiqueta_HTML_audio\"><\/span>HTML Audio Tag FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_cambiar_el_color_de_fondo_del_reproductor_de_audio\"><\/span>How can I change the background color of the audio player?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The tag-generated audio player <strong><audio><\/strong> inherits the style of the surrounding container. You can change the background color of the player by applying CSS styles to the containing element.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_descargar_el_archivo_de_audio_usando_HTML\"><\/span>How can I download the audio file using HTML?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To allow users to download the audio file, simply add a link to your audio file using the tag <strong>&lt;a&gt;<\/strong>. For example:<\/p>\n<pre>\n&lt;a href=&quot;\/en\/cancion.mp3\/&quot; download&gt;Download audio&lt;\/a&gt;\n<\/pre>\n<p>In this case, the attribute <strong>download<\/strong> tells the browser that the file should be downloaded rather than played.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_puedo_agregar_un_enlace_a_un_archivo_de_audio_en_mi_pagina_HTML\"><\/span>How can I add a link to an audio file in my HTML page?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To add a link to an audio file on your HTML page, simply use the tag <strong>&lt;a&gt;<\/strong> and specify the file path in the attribute <strong>href<\/strong>. For example:<\/p>\n<pre>\n&lt;a href=&quot;\/en\/cancion.mp3\/&quot;&gt;Play audio&lt;\/a&gt;\n<\/pre>\n<p>Clicking this link will open the audio file and play it in the user&#039;s browser.<\/p>\n<p>I hope this article was helpful to you in understanding how to use the HTML audio tag and add sound to your website. If you have any additional questions or need help, please feel free to contact me through my website <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>As a web developer, it is important to have a thorough understanding of the different HTML tags and how to use them on our site. One such tag is<audio> , which allows us to play and add audio to our website. In this article, we will explore how to use the HTML audio tag to add sound to your website. Play [\u2026]<\/p>","protected":false},"author":1,"featured_media":23117,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1124],"tags":[686,775,205,606,475,609,776],"class_list":["post-23116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-html","tag-anadir","tag-audio","tag-blog","tag-etiqueta","tag-html","tag-multimedia","tag-reproducir"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=23116"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23116\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/23117"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=23116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=23116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=23116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}