Installation

Usage

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

必需参数

• data-file — 文件的完整 URL。对于本地托管的文件，例如 "File:Audio.ogg"，应使用 “https://static.wikia.nocookie.../Audio.ogg/revision/latest"。你也可以使用重定向路径 "/Special:FilePath/Audio.ogg"、"Special:Redirect/file/Audio.ogg"，或者最好使用魔术字{{filepath:Audio.ogg}}。

可以设置的值

• data-file-type — 可选参数，指定此文件的 MIME 类型。默认情况下，若不提供此参数，则根据文件扩展名确定 MIME 类型。当文件没有扩展名，或文件扩展名与实际 MIME 类型不符时，应使用此参数。
• data-file-n — 用于提供备选文件，当浏览器无法播放 data-file 中的文件时使用。n 必须为大于 0 的数字。你可以通过指定多个 data-file-n 属性，并递增 n 值，来提供多个备选文件。
• data-file-type-n — 与 data-file-type 相同，但用于对应 data-file-n 中提供的文件。
• data-volume — 介于0.0到1.0之间的数，控制音量大小。
• data-download — 是否显示下载按钮，正常的时候为 false不显示，不过也可以设置为true允许。
• data-preload — 要不要在页面加载时预加载音频，允许的值为 auto, metadata 还有none. 预设为 none.
• data-start 音频开始播放的时间（单位：秒）。用户仍可手动拖动到该时间点之前的位置。
• data-end 音频自动暂停的时间（单位：秒）。此操作仅会触发一次，用户仍可手动拖动到该时间点之后的位置。
• data-repeat-start 重复播放的起始时间（单位：秒）。当播放到 repeat-end 时，将跳转至此时间点。默认值为 0.0，但仅在设置了 repeat-end 值时生效。
• data-repeat-end 重复播放的结束时间（单位：秒）。到达该时间点时，播放将跳转至 repeat-start。如果该时间点早于 repeat-start，则重复功能将表现为跳过功能。用户仍可手动拖动到此时间点之后，不会触发重复。默认值为音频总时长，但仅在设置了 repeat-start 值时生效。循环与重复可同时使用，但请注意两者的精度都不高，不适合用于无缝播放。
• 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">You need to enable JavaScript to play this audio</div>

Results in the following:

不同浏览器支持的格式

来自W3Schools

See also

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