Installation

Usage

<div class="html5audio" data-file="URL-to-file">您需要啟用 JavaScript 才能播放此音頻</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}}.

可以設置的值

• 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 — 介於0.0到1.0之間的數，控制音量大小
• data-download — 是否顯示下載按鈕，正常的時候為 false不顯示，不過也可以設置為true允許
• data-preload — 要不要在頁面加載時預加載音頻，允許的值為auto, metadata 還有none. 預設為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 — 這個參數可以填以下量：
  • autoplay — 是否在頁面打開的時候自動播放
  • loop — 是否洗腦循環
  • muted — 是否靜音

Example

舉個例子:

<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">您需要啟用 JavaScript 才能播放此音頻</div>

Results in the following:

不同瀏覽器支持的格式

來自 W3Schools

See also

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