Kirby3音频标签插件
介绍
此KirbyTag使用任何给定的音频文件创建HTML5 <audio>元素。
它可以支持多个<source> ，可以设置有许多属性，并提供一个可翻译的句子，以显示不支持HTML5音频元素的浏览器。
安装
该插件是使用Kirby 3构建的。它将在早期版本上使用。
下载
下载文件并将它们放入site/plugins/kirby3-audiotag中。
git子模块
您可以将插件添加为git子模块。
cd your/project/root git submodule add https://gi*thub.**com/wizhou/kirby3-audiotag.git site/plugins/kirby3-audiotag git submodule update --init --recursive git commit -am \" Add Kirby Audiotag plugin \"
运行这些命令以更新插件：
cd your/project/root git submodule foreach git checkout master git submodule foreach git pull git commit -am \" Update submodules \" git submodule update --init --recursive
作曲家
您可以使用作曲家安装插件。
composer require wizhou/kirby3-audiotag
用法
最小用法
对于最小使用情况，类似于(image:) kirbytag ，请将音频文件上传到您的页面中，并以其扩展名给Kirbytag 。
(audio : audiofile .mp3)
将生成以下<audio>元素：
< audio controls =\" true \" src =\" audiofile.mp3 \" > < p > Your browser does not support the < code > audio </ code > element. Here is a < a href =\" audiofile.mp3 \" > link to the audio file </ a > to download it. </ p > </ audio >
默认设置controls属性。要删除它，请使用以下属性：
(audio : audiofile .mp3 controls: false)
如果您不想使用control属性，则音频播放器将不包括浏览器的默认控件。但是，您可以使用JavaScript和HTMLMediaElement API创建自己的自定义控件。
高级用法
许多属性可以在KirbyTag内部使用。
| 属性 | 价值 | 描述 |
|---|---|---|
autoplay |
true
|
设置为true to自动播放音频。任何其他值都不会呈现属性，因为音频即使将其设置为false也将自动播放。 |
controls
|
true ， false
|
允许浏览器提供控件，以允许用户控制音频播放，包括音量，寻求和暂停/简历播放。默认设置为true 。 |
class
|
细绳 | 将任何类添加到<audio>元素中。 |
id
|
细绳 | 将任何ID添加到<audio>元素中。 |
loop
|
true ， false
|
如果指定，音频播放器将在音频末尾重新启动。 |
muted
|
true ， false
|
如果指定，音频播放器最初将被沉默。 |
preload
|
none ， metadata ， auto
|
向浏览器提供有关文件加载的提示。 none表明音频不应预加载， metadata表明仅获取音频元数据， auto表示可以下载整个音频文件。 |
sources
|
audiofile.mp3, audiofile.ogg, audiofile.vorbis … |
您可以为音频元素提供mutliple源。然后，浏览器将使用第一个IT下达和浏览器。您必须用每个文件名与, |
来源
您可以为source:属性。
它将用<source>元素替换<audio>元素的src=\"\"属性。通过调用KirbyTag指定的音频文件也将作为来源实现。
另外，使用<source> Mime::type()类将每个源的MIME类型添加为type=\"\"属性。
(audio: audiofile.mp3 sources: audiofile.vorbis, audiofile.ogg, audiofile.waw)
会变成
< audio controls =\" true \" > < source src =\" audiofile.mp3 \" type =\" audio/mpeg \" > < source src =\" audiofile.vorbis \" type =\" audio/vorbis \" > < source src =\" audiofile.ogg \" type =\" audio/ogg \" > < source src =\" audiofile.waw \" type =\" audio/waw \" > < p > Your browser does not support the < code > audio </ code > element. Here is a < a href =\" audiofile.mp3 \" > link to the audio file </ a > to download it. </ p > </ audio >
倒退
对于使用不支持<audio>元素的浏览器的观众，音频元素中包含一些内容。
它由句子和直接下载链接组成，指向音频文件。
< p > Your browser does not support the < code > audio </ code > element. Here is a < a href =\" audiofile.mp3 \" > link to the audio file </ a > to download it. </ p >
插件使用键tt()助手的翻译来提供句子，构建如下：
<?php tt ( \' no_support \' , [ \' link \' => Html:: a ( $ filePath , t ( \' no_support_link \' )) ]);
您可以通过更改no_support和no_support_link的值和插件中的no_support_link的值来过度。
<?php \' translations \' => [ \' en \' => [ \' no_support \' => \' Your browser does not support the <code>audio</code> element. Here is a { link } to download it. \' , \' no_support_link \' => \' link to the audio file \' ] ]
目前，插件中包含英语和法语翻译，将来将添加更多翻译。
帮助
如果您在使用插件时遇到任何困难，请创建问题。
贡献和路线图
任何贡献都将受到欢迎！
-
实现
crossorigin作为属性。 -
实现
currentTime作为属性。 - 为后备内容添加更多tranlsation。
免责声明
此插件是“原样”提供的，无法保证。在您自己的风险中使用它，并始终在生产环境中使用它之前对其进行测试。如果遇到任何问题，请创建一个问题。
执照
该项目已根据MIT许可获得许可。
有关HTML 5 <audio>元素的更多信息：
- <Audio>：嵌入音频元素
- 视频和音频内容
