README

简介

此 kirbytag 可创建一个带有任何指定音频文件的 HTML5 <audio> 元素。

它支持多个 <source>，可以设置许多属性，并为不支持 HTML5 音频元素的浏览器提供可翻译的句子。

安装

此插件使用 Kirby 3 构建。它将无法在早期版本上工作。

下载

下载文件并将其放置在 site/plugins/kirby3-audiotag 内。

Git 子模块

您可以将插件作为 Git 子模块添加。

cd your/project/root
git submodule add https://github.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

您可以使用 composer 安装插件。

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 中使用许多属性。

源代码

您可以使用 source: 属性提供任意数量的源音频文件。

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

此外，每个源的类型都将作为 type="" 属性添加到 <source> 元素中，该属性使用 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 的值来覆盖它。

<?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 作为属性。
为后备内容添加更多翻译。

免责声明

此插件按“原样”提供，不提供任何保证。自行承担风险，并在将其用于生产环境之前自行测试。

许可

本项目受 MIT 许可证许可。

关于HTML 5 <audio> 元素的更多信息

wizhou / kirby3-audiotag

维护者

详细信息