Installation

Usage

<div class="html5audio" data-file="URL-to-file">You need to enable JavaScript to play this audio</div>

Required parameters

• data-file — A full URL to the file. For locally-hosted files, for example "File:Audio.ogg", this is "https://static.wikia.nocookie.../Audio.ogg/revision/latest". You can also use the redirect paths "/Special:FilePath/Audio.ogg", "Special:Redirect/file/Audio.ogg", or preferably the magic word {{filepath:Audio.ogg}}.

Optional parameters

• data-file-type — Optional MIME type for this file. By default, when this parameter is not provided, the file extension is used to determine the MIME type. This parameter should be used in cases where the file does not have an extension, or when the file extension does not accurately match the MIME type.
• data-file-n — Used to provide a file fallback, for instances where the file in data-file isn't playable by the browser. n must be a number greater than 0. You can specify multiple data-file-n attributes with incremental n values to have multiple fallbacks.
• data-file-type-n — Same as data-file-type, but for the files provided in each data-file-n.
• data-volume — Specifies the volume of the audio. Must be a number between 0.0 and 1.0, with 0.0 being muted and 1.0 being full volume. Default is 1.0.
• data-download — Specifies whether to show a download button. Available value is false. Anything else equals to true.
• data-preload — Specifies if and how the audio should be loaded when the page loads. Available values are auto, metadata and none. Default is none.
• data-start A time (in seconds) to start the audio from. The user can still manually seek to before this point.
• data-end A time (in seconds) to automatically pause the audio. This will only occur once, and users can still manually seek to after this point.
• data-repeat-start A time (in seconds) of the start of the repeat. Once repeat-end is hit, playback will jump to this time. Defaults to 0.0, but only if a repeat-end value is set.
• data-repeat-end A time (in seconds) of the end of the repeat. Once hit, the playback will jump to repeat-start. If this time is before the repeat-start time, the repeat instead behaves like a skip function. Users can still manually seek after this time without a repeat occurring. Defaults to the duration of the audio, but only if a repeat-start value is set. Loop and repeat may be used simultaneously, but note that neither have particularly high precision, and are unsuitable for seamless playback.
• data-options — Accepts any or several of the following options separated by commas:
  • autoplay — Specifies that the audio will start playing as soon as it is ready.
  • loop — Specifies that the audio will start over again, every time it is finished.
  • muted — Specifies that the audio output should be muted.

Example

Example with most parameters in use:

<div class="html5audio" data-file="https://upload.wikimedia.org/wikipedia/commons/5/50/Chopin_Cello_Sonata_Op._65_-3.ogg" data-volume="0.7" data-download="false" data-preload="metadata" data-options="loop">You need to enable JavaScript to play this audio</div>

Results in the following:

Supported formats by browser

From W3Schools and MDN

See also

• AudioIntegrator
• BandcampPlayer
• BandcampLazyloader
• DeezerWidget
• OggPlayer
• SoundcloudPlayer
• YandexPlayer