kirby3 audiotag

此KirbyTag使用任何给定的音频文件创建HTML5 元素。

它可以支持多个 ，可以设置有许多属性，并提供一个可翻译的句子，以显示不支持HTML5音频元素的浏览器。

该插件是使用Kirby 3构建的。它将在早期版本上使用。

下载文件并将它们放入site/plugins/kirby3-audiotag中。

您可以将插件添加为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 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内部使用。

您可以为source:属性。

它将用元素替换元素的src=""属性。通过调用KirbyTag指定的音频文件也将作为来源实现。

另外，使用 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 >

对于使用不支持元素的浏览器的观众，音频元素中包含一些内容。

它由句子和直接下载链接组成，指向音频文件。

 < 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()助手的翻译来提供句子，构建如下：

 
tt ( ' no_support ' , [
  ' link ' => Html:: a ( $ filePath , t ( ' no_support_link ' ))
]);

您可以通过更改no_support和no_support_link的值和插件中的no_support_link的值来过度。

 
' translations ' => [
  ' en ' => [
    ' no_support ' => ' Your browser does not support the audio element. Here is a { link } to download it. ' ,
    ' no_support_link ' => ' link to the audio file '
  ]
]

目前，插件中包含英语和法语翻译，将来将添加更多翻译。

如果您在使用插件时遇到任何困难，请创建问题。

任何贡献都将受到欢迎！

• 实现crossorigin作为属性。
• 实现currentTime作为属性。
• 为后备内容添加更多tranlsation。

此插件是“原样”提供的，无法保证。在您自己的风险中使用它，并始终在生产环境中使用它之前对其进行测试。如果遇到任何问题，请创建一个问题。

该项目已根据MIT许可获得许可。

有关HTML 5 元素的更多信息：

• 视频和音频内容