{"id":22873,"date":"2024-04-02T09:55:24","date_gmt":"2024-04-02T08:55:24","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/como-utilizar-la-etiqueta-html-para-reproducir-audio-en-tus-paginas-web\/"},"modified":"2024-06-03T17:29:39","modified_gmt":"2024-06-03T16:29:39","slug":"como-utilizar-la-etiqueta-html-para-reproducir-audio-en-tus-paginas-web","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/how-to-use-the-html-tag-to-play-audio-on-your-web-pages\/","title":{"rendered":"How to use the HTML tag to play audio on your web pages"},"content":{"rendered":"<p>In the world of web development, one of the most important things is to offer a complete multimedia experience to users. One way to achieve this is through the HTML audio tag, which allows us to add sound files to our pages. In this article, we will learn how to use the HTML audio tag to play audio files in our projects.<\/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\/how-to-use-the-html-tag-to-play-audio-on-your-web-pages\/#%C2%BFComo_reproducir_archivos_de_sonido_en_formato_MP3\" >How to play sound files 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\/how-to-use-the-html-tag-to-play-audio-on-your-web-pages\/#Anadir_audio_a_un_video_con_la_etiqueta_HTML\" >Add audio to a video with the HTML tag<\/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\/how-to-use-the-html-tag-to-play-audio-on-your-web-pages\/#Otros_formatos_compatibles_con_la_etiqueta_HTML_audio\" >Other formats supported by the HTML audio tag<\/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\/how-to-use-the-html-tag-to-play-audio-on-your-web-pages\/#Conclusiones\" >Conclusions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-use-the-html-tag-to-play-audio-on-your-web-pages\/#Preguntas_frecuentes\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-use-the-html-tag-to-play-audio-on-your-web-pages\/#%C2%BFPuedo_reproducir_archivos_de_audio_en_otros_formatos_ademas_de_MP3\" >Can I play audio files in formats other than MP3?<\/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\/how-to-use-the-html-tag-to-play-audio-on-your-web-pages\/#%C2%BFEs_posible_personalizar_el_reproductor_de_audio\" >Is it possible to customize the audio player?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-use-the-html-tag-to-play-audio-on-your-web-pages\/#%C2%BFEs_necesario_especificar_diferentes_formatos_de_audio_para_la_etiqueta_de_video\" >Do I need to specify different audio formats for the video tag?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-use-the-html-tag-to-play-audio-on-your-web-pages\/#%C2%BFDonde_puedo_obtener_archivos_de_audio_en_diferentes_formatos\" >Where can I get audio files in different formats?<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-use-the-html-tag-to-play-audio-on-your-web-pages\/#Fuente\" >Fountain:<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFComo_reproducir_archivos_de_sonido_en_formato_MP3\"><\/span>How to play sound files in MP3 format?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The MP3 format is one of the most popular and widely used formats for sound files. Fortunately, the HTML audio tag allows us to play MP3 files without problems. To do this, we simply add the following line of code where we want the audio player to appear:<\/p>\n<pre><code><audio src=\"ruta_del_archivo.mp3\" controls><\/audio><\/code><\/pre>\n<p>Make sure to replace &quot;file_path.mp3&quot; with the location of the MP3 file you want to play. The &quot;controls&quot; attribute will give the user the ability to pause, play, and adjust the volume of the audio.<\/p>\n<p>It is also possible to customize the audio player using other attributes of the HTML audio tag. For example, the &quot;autoplay&quot; attribute allows the audio to play automatically when the page loads, while the &quot;loop&quot; attribute causes the audio to play in a loop.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Anadir_audio_a_un_video_con_la_etiqueta_HTML\"><\/span>Add audio to a video with the HTML tag<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In addition to playing audio files, we can also use the HTML audio tag to add audio to a video. To do this, we simply add the following code in the place where we want the video to appear:<\/p>\n<pre><code><video controls>Your browser does not support the <code>video<\/code> element.<\/video><\/code><\/pre>\n<p>In this case, you must replace &quot;video_path.mp4&quot; with the location of the video file and &quot;audio_path.mp3&quot; with the location of the audio file you want to add. The source tag allows us to specify different video and audio formats so that the browser chooses the one that is compatible. If the browser does not support the video tag, an error message will be displayed.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Otros_formatos_compatibles_con_la_etiqueta_HTML_audio\"><\/span>Other formats supported by the HTML audio tag<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Apart from the MP3 format, the HTML audio tag also supports other audio formats such as WAV, OGG, and AAC. To play files in these formats, you simply use the same code structure as shown above, but change the file extension in the src attribute.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusiones\"><\/span>Conclusions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The HTML audio tag is a powerful tool that allows us to add audio files to our web pages. Whether playing MP3 sound files or adding audio to a video, this tag offers a complete multimedia experience for users. Take full advantage of this functionality and deliver sound-rich user experiences in your web projects.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFPuedo_reproducir_archivos_de_audio_en_otros_formatos_ademas_de_MP3\"><\/span>Can I play audio files in formats other than MP3?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, the HTML audio tag supports various audio formats such as WAV, OGG and AAC. You can use the same code structure, just change the file extension in the src attribute.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs_posible_personalizar_el_reproductor_de_audio\"><\/span>Is it possible to customize the audio player?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, the HTML audio tag offers several attributes that allow you to customize the player, such as autoplay, loop and controls. You can adjust these attributes according to your needs.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFEs_necesario_especificar_diferentes_formatos_de_audio_para_la_etiqueta_de_video\"><\/span>Do I need to specify different audio formats for the video tag?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes, when adding audio to a video using the HTML video tag, you must provide different video and audio formats using the source tag. This ensures that the browser can choose the correct supported format.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFDonde_puedo_obtener_archivos_de_audio_en_diferentes_formatos\"><\/span>Where can I get audio files in different formats?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>There are numerous websites that offer audio files in different formats. Some popular options include SoundCloud, Bandcamp, and Freesound. Be sure to check file licenses before using them in your projects.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Fuente\"><\/span>Fountain:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Article made by NelkoDev, you can find more information on their website <a href=\"https:\/\/nelkodev.com\/en\/\">https:\/\/nelkodev.com<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>In the world of web development, one of the most important things is to offer a rich multimedia experience to users. One way to achieve this is through the HTML audio tag, which allows us to add sound files to our pages. In this article, we will learn how to use the HTML audio tag to [\u2026]<\/p>","protected":false},"author":1,"featured_media":22874,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1124],"tags":[38,775,205,606,475,45,60,776,122,179,47],"class_list":["post-22873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-html","tag-como","tag-audio","tag-blog","tag-etiqueta","tag-html","tag-paginas","tag-para","tag-reproducir","tag-tus","tag-utilizar","tag-web"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22873","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=22873"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/22873\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/22874"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=22873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=22873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=22873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}