Skip to content

Commit

Permalink
* Changed the used the default kirbytext tag from audio to audioext.
Browse files Browse the repository at this point in the history
It's is possible to reactivate the `audio` tag support.
* Changed the name of theis extension from "Audio" to "AudioExt".
"AudioExt" stands for "Video Extended".
* Changed the used custom config variable for a better usage with other
extension and kirby.
* Moved the used code into a custom class for better reusage in themes
and other extension.
* Some Options and there values are changed.
* Add to the figcaption a  CSS class to realize if the tag is at the top
or bottom.
* Clean up
  • Loading branch information
fanningert committed Apr 12, 2015
1 parent 34b23ae commit 300337f
Show file tree
Hide file tree
Showing 8 changed files with 388 additions and 99 deletions.
1 change: 0 additions & 1 deletion .buildpath
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,4 @@
<buildpath>
<buildpathentry kind="con" path="org.eclipse.php.core.LANGUAGE"/>
<buildpathentry kind="src" path=""/>
<buildpathentry combineaccessrules="false" kind="prj" path="/kirby"/>
</buildpath>
2 changes: 1 addition & 1 deletion .settings/org.eclipse.php.core.prefs
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
eclipse.preferences.version=1
include_path=2;/kirby
include_path=
73 changes: 52 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,44 @@
# KirbyCMS Extension - Audio
# Kirby Extension - AudioExt

Display a audio via the HTML5 audio tag.
This plugin adds a new `audio` and `audioext` Kirbytext tag which enables you to embed your music and sounds easily and HTML5 compatible.

## Options
**Attention:** In this version I changed the used custom config variable for a better usage with other extension and kirby. Also the default kirbytext tag is now `audioext` but you can reactivate the `audio` tag support via config variables.

* *mp3*: Name of a page file or absolute URL of a external file
* *ogg*: Name of a page file or absolute URL of a external file
* *wav*: Name of a page file or absolute URL of a external file
* *preload*: (optional, Values: none/metadata/auto) The preload attribute specifies if and how the author thinks that the audio file should be loaded when the page loads.
* *controls*: (optional, Values: true/false, Default: true) Specifies that video controls should be displayed (such as a play/pause button etc).
* *loop*: (optional, Values: true/false, Default: false) Specifies that the video will start over again, every time it is finished
* *muted*: (optional, Values: true/false, Default: false) Specifies that the audio output of the video should be muted
* *autoplay*: (optional, Values: true/false, Default: false) Specifies that the video will start playing as soon as it is ready.
* *caption*: (optional) Create a figure with a caption element over the video tag
* *caption_top*: (optional, Values: true/false, Default: false) Place the caption at the top of the audio player
* *class*: (optional) Class string for the figure element
**Info:** When you don't use the snipped, you get a wrong HTML code. This is a existend bug of kirby in version 2.0.6. In the current develop version is this bug corrected. https://github.com/getkirby/kirby/issues/226

## KirbyText options

| Option | Optional | Description |
| ------ | -------- | ----------- |
| `mp3` | X | Name of a page file or absolute URL of a external file |
| `ogg` | X | Name of a page file or absolute URL of a external file |
| `wav` | X | Name of a page file or absolute URL of a external file |
| `class` | X | see config variable `kirby.extension.audioext.class` |
| `preload` | X | see config variable `kirby.extension.audioext.preload` |
| `controls` | X | see config variable `kirby.extension.audioext.controls` |
| `loop` | X | see config variable `kirby.extension.audioext.loop` |
| `muted` | X | see config variable `kirby.extension.audioext.muted` |
| `autoplay` | X | see config variable `kirby.extension.audioext.autoplay` |
| `caption` | X | see config variable `kirby.extension.audioext.caption` |
| `caption_top` | X | see config variable `kirby.extension.audioext.caption_top` |
| `caption_class` | X | see config variable `kirby.extension.audioext.caption_class` |
| `snippet_name` | X | see config variable `kirby.extension.audioext.snippet_name` |

## Config variables

| Kirby option | Default | Values | Description |
| ------------ | ------- | ------ | ----------- |
| `kirby.extension.audioext.snippet_name` | null | null/{string} | Set the name of the snippet (example `audioext`), or false. With the false false, the script generate via Brick class the HTML code. |
| `kirby.extension.audioext.class` | `audio` | false/{string} | Define a class string for the audio element. |
| `kirby.extension.audioext.preload` | false | false/none/metadata/auto | Specifies if and how the author thinks the audio should be loaded when the page loads. |
| `kirby.extension.audioext.controls` | true | true/false | Specifies that audio controls should be displayed (such as a play/pause button etc). |
| `kirby.extension.audioext.loop` | false | true/false | Specifies that the audio will start over again, every time it is finished. |
| `kirby.extension.audioext.muted` | false | true/false | Specifies that the audio output should be muted. |
| `kirby.extension.audioext.autoplay` | false | true/false | Specifies that the audio will start playing as soon as it is ready. |
| `kirby.extension.audioext.caption` | null | null/{string} | Create a figure with a caption element over the video tag. |
| `kirby.extension.audioext.caption_top` | false | true/false | Place the caption at the top of the video player. |
| `kirby.extension.audioext.caption_class` | `audio` | {string} | Class string for the figure element. |
| `kirby.extension.audioext.audio_tag` | false | true/false | Overwrite the default `audio` kirbytext tag |

## Examples

Expand All @@ -30,11 +54,18 @@ Display a audio via the HTML5 audio tag.
(audio ogg: http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/demo-audio.ogg mp3: http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/demo-audio.mp3)
```

### Extended version
## Changelog

```
(audio muted: true)
(audio_source: demo-audio.ogg [type: audio/ogg] [media: screen and (min-width:320px)])
(audio_source: demo-audio.mp3 [type: audio/mpeg] [media: screen])
(/audio)
```
### v1.1

* Changed the used the default kirbytext tag from `audio` to `audioext`. It's is possible to reactivate the `audio` tag support.
* Changed the name of theis extension from "Audio" to "AudioExt". "AudioExt" stands for "Video Extended".
* Changed the used custom config variable for a better usage with other extension and kirby.
* Moved the used code into a custom class for better reusage in themes and other extension.
* Some Options and there values are changed.
* Add to the figcaption a CSS class to realize if the tag is at the top or bottom.
* Clean up

### v1.0

* init version
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "audio",
"readable": "HTML5 Audio",
"version": "1.0",
"stable": false,
"name": "audioext",
"readable": "HTML5-Audio extended",
"version": "1.1",
"stable": true,
"description": "Display a audio via the HTML5 audio tag.",
"author": "Thomas Fanninger",
"url": "http://thomas.fanninger.at"
Expand Down
Loading

0 comments on commit 300337f

Please sign in to comment.