[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:html-audio-embedding":360},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},[37],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[45,72,108,132,208,242,256,284,308,324],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":23,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",false,{"id":12,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188,192,196,200,204],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":161,"cornerstone":52,"reading_time_minutes":57},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":181,"title":182,"slug":183,"order_index":165,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":185,"title":186,"slug":187,"order_index":169,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":189,"title":190,"slug":191,"order_index":173,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":209,"slug":210,"order_index":65,"topics":211},"Forms & User Input","forms-user-input",[212,217,222,227,232,237],{"id":213,"title":214,"slug":215,"order_index":216,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":228,"title":229,"slug":230,"order_index":231,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":243,"slug":244,"order_index":69,"topics":245},"Graphics & Visuals","graphics-visuals",[246,251],{"id":247,"title":248,"slug":249,"order_index":250,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":252,"title":253,"slug":254,"order_index":255,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":257,"slug":258,"order_index":77,"topics":259},"Multimedia","multimedia",[260,265,270,275,280],{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":281,"title":282,"slug":283,"order_index":213,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":285,"slug":286,"order_index":81,"topics":287},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[288,292,296,300,304],{"id":289,"title":290,"slug":291,"order_index":218,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":293,"title":294,"slug":295,"order_index":223,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":297,"title":298,"slug":299,"order_index":228,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":301,"title":302,"slug":303,"order_index":233,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":305,"title":306,"slug":307,"order_index":238,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":309,"slug":310,"order_index":85,"topics":311},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[312,316,320],{"id":313,"title":314,"slug":315,"order_index":247,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":317,"title":318,"slug":319,"order_index":252,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":321,"title":322,"slug":323,"order_index":261,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":325,"slug":326,"order_index":89,"topics":327},"Reference & Practice","reference-practice",[328,332,336,340,344,348,352,356],{"id":329,"title":330,"slug":331,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":333,"title":334,"slug":335,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":337,"title":338,"slug":339,"order_index":57,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":341,"title":342,"slug":343,"order_index":61,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":345,"title":346,"slug":347,"order_index":65,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":349,"title":350,"slug":351,"order_index":69,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":353,"title":354,"slug":355,"order_index":77,"cornerstone":52,"reading_time_minutes":57},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":357,"title":358,"slug":359,"order_index":81,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"data":361},{"id":271,"title":272,"slug":273,"content":362,"course":363,"subcategory":364,"author":365,"reading_time_minutes":12,"cornerstone":52,"schema_type":371,"faq_json":5,"video_url":5,"canonical_url":372,"meta_title":373,"meta_description":374,"og_image":5,"toc_json":375,"code_examples":402,"quiz":5,"exercises":411,"published_at":5,"updated_at":418,"prev":419,"next":420},"\u003Ch2 id=\"html-audio-embedding\">HTML Audio Embedding\u003C\u002Fh2>\u003Cp>The \u003Cstrong>HTML audio tag\u003C\u002Fstrong> (our focus keyword) — \u003Ccode><audio>\u003C\u002Fcode> — lets you embed music, podcasts, sound effects, or voiceovers directly into a page with a native, built-in player, no plug-in required. It shares almost the exact same API and attribute set as the \u003Ccode><video>\u003C\u002Fcode> element, which makes it easy to learn once you already know one of them.\u003C\u002Fp>\u003Ch3 id=\"basic-syntax\">Basic Syntax\u003C\u002Fh3>\u003Cpre>\u003Ccode><audio src=\"song.mp3\" controls><\u002Faudio>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Just like video, the \u003Ccode>controls\u003C\u002Fcode> attribute is what makes the native play\u002Fpause\u002Fvolume\u002Fscrubber UI visible to the user.\u003C\u002Fp>\u003Ch3 id=\"key-attributes\">Key Attributes\u003C\u002Fh3>\u003Cul>\n\u003Cli>\u003Cstrong>controls\u003C\u002Fstrong> — displays the built-in audio player UI.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>autoplay\u003C\u002Fstrong> — starts playback immediately (frequently blocked by browsers unless muted, due to user-experience policies).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>loop\u003C\u002Fstrong> — repeats the track when it finishes.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>muted\u003C\u002Fstrong> — starts with the volume off.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>preload\u003C\u002Fstrong> — tells the browser whether to preload none, metadata only, or the entire audio file.\u003C\u002Fli>\n\u003C\u002Ful>\u003Ch3 id=\"supporting-multiple-audio-formats\">Supporting Multiple Audio Formats\u003C\u002Fh3>\u003Cp>Just like video, not every browser decodes every audio codec identically. MP3 has near-universal support, but adding an Ogg Vorbis fallback via nested \u003Ccode><source>\u003C\u002Fcode> tags is still considered a trending best practice for maximum compatibility, especially on older or embedded browsers.\u003C\u002Fp>\u003Ch3 id=\"autoplay-policies-important\">Autoplay Policies (Important!)\u003C\u002Fh3>\u003Cp>Modern browsers restrict autoplaying audio with sound to prevent an annoying experience for users. Autoplay with sound generally only works after the user has interacted with the page, or if the \u003Ccode>muted\u003C\u002Fcode> attribute is present. Always design audio experiences assuming autoplay may be blocked.\u003C\u002Fp>\u003Ch3 id=\"accessibility-tip\">Accessibility Tip\u003C\u002Fh3>\u003Cp>Because screen readers and search engines cannot process sound, always provide a text transcript near the audio player, especially for podcasts, interviews, or instructional narration. This also improves SEO by giving search engines indexable text content tied to your media.\u003C\u002Fp>\u003Ch3 id=\"styling-and-controlling-audio-with-javascript\">Styling and Controlling Audio with JavaScript\u003C\u002Fh3>\u003Cp>The native audio player has limited built-in styling options across browsers, so many sites hide the default \u003Ccode>controls\u003C\u002Fcode> and build a fully custom UI using the same \u003Ccode>play()\u003C\u002Fcode>, \u003Ccode>pause()\u003C\u002Fcode>, \u003Ccode>currentTime\u003C\u002Fcode>, and \u003Ccode>volume\u003C\u002Fcode> JavaScript API used for video.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><audio controls preload='metadata'>\n  <source src='podcast-episode1.mp3' type='audio\u002Fmpeg'>\n  <source src='podcast-episode1.ogg' type='audio\u002Fogg'>\n  Your browser does not support the audio element.\n<\u002Faudio>\n\n<p><a href='transcript-episode1.html'>Read the full transcript<\u002Fa><\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>\u002F\u002F Custom play\u002Fpause button + volume slider controlling a hidden <audio> element\nconst audio = document.getElementById('bgAudio');\nconst toggleBtn = document.getElementById('toggleBtn');\nconst volumeSlider = document.getElementById('volumeSlider');\n\ntoggleBtn.addEventListener('click', () => {\n  audio.paused ? audio.play() : audio.pause();\n  toggleBtn.textContent = audio.paused ? 'Play' : 'Pause';\n});\n\nvolumeSlider.addEventListener('input', (e) => {\n  audio.volume = e.target.value;\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":15,"slug":38},{"name":257,"slug":258},{"slug":366,"display_name":367,"job_title":5,"short_bio":5,"expertise_tags":368,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":369,"posts":370},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fhtml-audio-embedding","HTML Audio Tag: Embed Sound & Music in Web Pages","Learn the HTML audio tag — attributes, multiple formats, autoplay policies, accessibility and JavaScript control — with live code examples.",[376],{"id":273,"text":272,"level":12,"children":377},[378,382,386,390,394,398],{"id":379,"text":380,"level":57,"children":381},"basic-syntax","Basic Syntax",[],{"id":383,"text":384,"level":57,"children":385},"key-attributes","Key Attributes",[],{"id":387,"text":388,"level":57,"children":389},"supporting-multiple-audio-formats","Supporting Multiple Audio Formats",[],{"id":391,"text":392,"level":57,"children":393},"autoplay-policies-important","Autoplay Policies (Important!)",[],{"id":395,"text":396,"level":57,"children":397},"accessibility-tip","Accessibility Tip",[],{"id":399,"text":400,"level":57,"children":401},"styling-and-controlling-audio-with-javascript","Styling and Controlling Audio with JavaScript",[],[403,407],{"id":404,"language":16,"code":405,"is_editable":406},129,"\u003Caudio controls preload='metadata'>\n  \u003Csource src='podcast-episode1.mp3' type='audio\u002Fmpeg'>\n  \u003Csource src='podcast-episode1.ogg' type='audio\u002Fogg'>\n  Your browser does not support the audio element.\n\u003C\u002Faudio>\n\n\u003Cp>\u003Ca href='transcript-episode1.html'>Read the full transcript\u003C\u002Fa>\u003C\u002Fp>",true,{"id":408,"language":409,"code":410,"is_editable":406},130,"javascript","\u002F\u002F Custom play\u002Fpause button + volume slider controlling a hidden \u003Caudio> element\nconst audio = document.getElementById('bgAudio');\nconst toggleBtn = document.getElementById('toggleBtn');\nconst volumeSlider = document.getElementById('volumeSlider');\n\ntoggleBtn.addEventListener('click', () => {\n  audio.paused ? audio.play() : audio.pause();\n  toggleBtn.textContent = audio.paused ? 'Play' : 'Pause';\n});\n\nvolumeSlider.addEventListener('input', (e) => {\n  audio.volume = e.target.value;\n});",[412],{"id":261,"title":413,"slug":414,"prompt":415,"starter_code":416,"expected_output":417,"language":16,"order_index":23},"Add a Fallback Audio Format","add-a-fallback-audio-format","Given a single MP3 source, rewrite the \u003Caudio> tag to include a second \u003Csource> in Ogg format for browsers that cannot play MP3, plus a text fallback message for very old browsers.","\u003Caudio controls>\n  \u003Csource src='track.mp3' type='audio\u002Fmpeg'>\n\u003C\u002Faudio>","\u003Caudio controls>\u003Csource src='track.mp3' type='audio\u002Fmpeg'>\u003Csource src='track.ogg' type='audio\u002Fogg'>Your browser does not support the audio element.\u003C\u002Faudio>","2026-09-27T18:30:54+00:00",{"id":266,"slug":268,"title":267},{"id":276,"slug":278,"title":277}]