Kirbytext audio tag plugin

Kirby 3 Questions 🤔
1

I am trying to add a tag to Kirbytext that allows me to show an HTML audio player in a blog post that would play a sound file from the same folder as the text article, but I am not very familiar with PHP.

In the blog post I would like to write …

(sound: song.mp3)

I put this together, which does show a player, but I need to figure out how to reference the audio file I am passing to the plugin. Would appreciate any ideas.

<?php

Kirby::plugin('johan/sound', [
    'tags' => [
        'sound' => [
            'html' => function($tag) {
                return '<audio src="song.mp3" controls></audio>';
            }
        ]
    ]
]);

Thanks

2

Hi,
I have written it so:

<?php
Kirby::plugin('janstieler/audio-kirbytag', [
  'tags' => [
    'audio' => [
      'html' => function ($tag) {
        if ($audioFile = $tag->file($tag->value())) {
          return '<audio controls><source src="' . $audioFile->url()  . '" type="audio/mpeg"></source></audio>';
        }
      }
    ]
  ]
]);

Cheers

1 Like
3

This is great, thank you!

Works in Chrome but not Safari though, any ideas what might be wrong?

4

Hi,
what does not work?
The kirbytag or the generated audio-element?

5

The generated player in Safari does not seem to work. When I hit play nothing happens. It works great in Chrome.

6

You could try to add a fallback info, if safari doesn’t support your audio-tag at least that info should be shown and you can see if the audio-tag itself doesn’t work. I did this in the podcaster plugin, here’s the snippet: https://github.com/mauricerenck/kirby-podcaster/blob/master/snippets/html5-player.php

It may also be, that there is something with the encoding of your file, so safari cannot play it. You may see an error when opening the browser console and loading the page/hitting play.

7

Hi,
safari understand the Audio element. So the problem should be on something other.
What is if you separate the audiofile from the audio-element to his own source element?
Have you checked the audiofile if it works in Safari?

Cheers