Lably
Skip to content

HTML audio

HTML element

  • 4 min read
  • 4 chapters

Related on Lably

Through Open-source software, Google and WAV

<audio> element

The <audio> element represents a sound, or an audio stream. It is commonly used to play back a single audio file within a web page, showing a GUI widget with play/pause/volume controls.

The <audio> element has these attributes: the music

  • global attributes (accesskey; class; contenteditable; contextmenu; dir; draggable; dropzone; hidden; id; lang; spellcheck; style; tabindex; title; translate)
  • autoplay = "autoplay" or "" (empty string) or empty
    Instructs the User-Agent to automatically begin playback of the audio stream as soon as it can do so without stopping.
  • preload = "none" or "metadata" or "auto" or "" (empty string) or empty
    Represents a hint to the User-Agent about whether optimistic downloading of the audio stream itself or its metadata is considered worthwhile.
    • "none": Hints to the User-Agent that the user is not expected to need the audio stream, or that minimizing unnecessary traffic is desirable.
    • "metadata": Hints to the User-Agent that the user is not expected to need the audio stream, but that fetching its metadata (duration and so on) is desirable.
    • "auto": Hints to the User-Agent that optimistically downloading the entire audio stream is considered desirable.
  • controls = "controls" or "" (empty string) or empty
    Instructs the User-Agent to expose a user interface for controlling playback of the audio stream.
  • loop = "loop" or "" (empty string) or empty
    Instructs the User-Agent to seek back to the start of the audio stream upon reaching the end.
  • mediagroup = string
    Instructs the User-Agent to link multiple videos and/or audio streams together.
  • muted = "muted" or "" (empty string) or empty
    Represents the default state of the audio stream, potentially overriding user preferences.
  • src = non-empty [URL] potentially surrounded by spaces
    The URL for the audio stream.

Example:

<span id="mwLA"></span><span class="p" id="mwLQ"><</span><span class="nt" id="mwLg">audio</span> <span class="na" id="mwLw">controls</span><span class="p" id="mwMA">></span> <span class="p" id="mwMQ"><</span><span class="nt" id="mwMg">source</span> <span class="na" id="mwMw">src</span><span class="o" id="mwNA">=</span><span class="s" id="mwNQ">"https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"</span> <span class="na" id="mwNg">type</span><span class="o" id="mwNw">=</span><span class="s" id="mwOA">"audio/mp4"</span> <span class="p" id="mwOQ">/></span> <span class="p" id="mwOg"><</span><span class="nt" id="mwOw">source</span> <span class="na" id="mwPA">src</span><span class="o" id="mwPQ">=</span><span class="s" id="mwPg">"https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"</span> <span class="na" id="mwPw">type</span><span class="o" id="mwQA">=</span><span class="s" id="mwQQ">"audio/ogg; codecs=vorbis"</span> <span class="p" id="mwQg">/></span> <span class="p" id="mwQw"><</span><span class="nt" id="mwRA">p</span><span class="p" id="mwRQ">></span>Your user agent does not support the HTML5 Audio element.<span class="p" id="mwRg"></</span><span class="nt" id="mwRw">p</span><span class="p" id="mwSA">></span> <span class="p" id="mwSQ"></</span><span class="nt" id="mwSg">audio</span><span class="p" id="mwSw">></span>

Sign in to keep reading

3 more chapters are free with a Lably account.

More in Computing and communication