PHPackages                             wizhou/kirby3-audiotag - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. wizhou/kirby3-audiotag

ActiveKirby-plugin

wizhou/kirby3-audiotag
======================

Kirbytag to create an HTML5 <audio> tag with audio files.

43PHP

Since Jul 25Pushed 5y ago1 watchersCompare

[ Source](https://github.com/wizhou/kirby3-audiotag)[ Packagist](https://packagist.org/packages/wizhou/kirby3-audiotag)[ RSS](/packages/wizhou-kirby3-audiotag/feed)WikiDiscussions master Synced 2d ago

READMEChangelog (1)DependenciesVersions (1)Used By (0)

Kirby3 Audio tag plugin
=======================

[](#kirby3-audio-tag-plugin)

Introduction
------------

[](#introduction)

This *kirbytag* creates an HTML5 `` element with any given audio file.

It can support multiple ``, can be set with many attributes and provide a translatable sentence to show on browsers that [doesn't support HTML5 audio element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Browser_compatibility).

Installation
------------

[](#installation)

This plugin was built using Kirby 3. It will not work on earlier versions.

### Download

[](#download)

[Download the files](https://github.com/wizhou/kirby3-audiotag/archive/master.zip) and place them inside `site/plugins/kirby3-audiotag`.

### Git Submodule

[](#git-submodule)

You can add the plugin as a Git submodule.

```
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"
```

Run these commands to update the 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)

You can install the plugin with composer.

```
composer require wizhou/kirby3-audiotag
```

Usage
-----

[](#usage)

### Minimal usage

[](#minimal-usage)

For a minimal usage, and similar to an `(image:)` *kirbytag*, upload an audio file into your page and give it to the *kirbytag* with its extension.

```
(audio:audiofile.mp3)
```

The following `` element will be generated :

```

  Your browser does not support the audio element. Here is a link to the audio file  to download it.

```

The `controls` attribute is set by default. To remove it, use the following attribute :

```
(audio:audiofile.mp3 controls: false)
```

If you don't want to use the `control` attribute, thus the audio player won't include the browser's default controls. You can, however, create your own custom controls using JavaScript and the [HTMLMediaElement API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement).

### Advanced usage

[](#advanced-usage)

Many attributes can be used inside the *kirbytag*.

Attribute ValueDescription`autoplay``true`Set to `true` to autoplay the audio. Any other value will not render the attribute, as the audio will autoplay even if it's set to false.`controls``true`, `false`Allow the browser to offer controls to allow the user to conrol audio playback, including volume, seeking, and pause/resume playback. Set to `true` by default.`class`StringAdd any class to the `` element.`id`StringAdd any id to the `` element.`loop``true`, `false`If specified, the audio player will restart upon the end of the audio.`muted``true`, `false`If specified, the audio player will be initially silenced.`preload``none`, `metadata`, `auto`Provide a hint to the browser about the file loading. `none` indicates that the audio should not be preloaded, `metadata` indicates that only audio metadata is fetched, `auto` indicates that the whole audio file can be downloaded.`sources``audiofile.mp3, audiofile.ogg, audiofile.vorbis` …You can provide mutliple source for the audio element. Then the browser will use the first one it undersand. You have to spearate eache filename with `,`.### Source

[](#source)

You can provide any amount of source audio files with the `source:` attribute.

It will replace the `src=""` attribute of the `` element with `` elements. The audio file specified by calling the *kirbytag* will also be implemented as a source.

Also, the MIME type of each source will be added as a `type=""` attribute to the `` element with the `Mime::type()` [class](https://getkirby.com/docs/reference/tools/mime/type).

```
(audio: audiofile.mp3 sources: audiofile.vorbis, audiofile.ogg, audiofile.waw)

```

Will turn into

```

  Your browser does not support the audio element. Here is a link to the audio file  to download it.

```

### Fallback

[](#fallback)

For viewers who use a browser in which the `` element is not supported, there is some content included inside the audio element.

It is composed of a sentence and a direct download link to the audio file.

```
Your browser does not support the audio element. Here is a link to the audio file  to download it.
```

The plugin use the translate by key `tt()` [helper](https://getkirby.com/docs/reference/templates/helpers/tt) to provide the sentence, it is builded as follow :

```