Custom Audio Tag

The CMS Questions
1

Hi,

I am surprised: is there no audio tag in kirby? I can’t find it.

I try to make my own – but I have problems with it.

My Kirbytext should be:
(audio: firstsong.mp3 audiocaption: This is my first song)

I ve tried to change the kirby vimeo tag to:

kirbytext::$tags['audio'] = array(
  'attr' => array(
    'caption'
  ),
  'html' => function($tag) {

    $caption = $tag->attr('caption');

    if(!empty($caption)) {
      $audiocaption = '<p class="audio-caption">' . escape::html($caption) . '</p>';
    } else {
      $audiocaption = null;
    }

    return '<audio controls><source src="<?php echo $audio->url() ?>" type="<?php echo $audio->mime() ?>">' . '</audio>' . $audiocaption;

  }
);

… but this didn’t work. My php skills are toooooo bad as designer :frowning:

Perhaps somebody can help me. Thank you.

2

I don’t know if this is the issue here but you use the attribute audiocaption in kirbytext, but caption in your tag, that will not work. What exactly does not work?

There is also this audio tag extension, but don’t know if this is still working: https://github.com/fanningert/kirbycms-extension-audio

3

Hi Texnixe,
the Kirby CMS Debugger displays:

kirbytext::$tags['audio'] = array( 'attr' => array( 'caption' ), 'html' => function($tag) { $caption = $tag->attr('caption'); if(!empty($caption)) { $audiocaption = '

' . escape::html($caption) . '
'; } return '

And the complete site is crashed …

4

Update:

I try


kirbytext::$tags['audio'] = array(
  'html' => function($tag) {
    return '<audio controls><source src="<?php echo $audio->url() ?>" type="<?php echo $audio->mime() ?>">' . '</audio>';
  }
);

first I delete my captions to make the mp3 file to work. But there is no sound. How do I get the url from my file?

5

Yes https://github.com/fanningert/kirbycms-extension-audio still working.

(audioext: mp3:my.mp3 caption:my mp3)

6

Thanks for this reply. But I want an independent (lightweight) solution. Perhaps without captions. This will be ok.

My solution above works almost. The $audio->url() is my problem.

7

try toUrl
https://getkirby.com/docs/cheatsheet/field-methods/toURL

8

One problem with your code above is that your are not getting the file, the second is that your are trying to echo the variables within quotes, which is not likely to work.

<?php
kirbytext::$tags['audio'] = array(
  'attr' => array(
    'caption'
  ),
  'html' => function($tag) {

    $caption = $tag->attr('caption');
    $url     = $tag->attr('audio');
    $file    = $tag->file($url);
    $url = $file ? $file->url() : url($url);
    if(!empty($caption)) {
      $audiocaption = '<p class="audio-caption">' . escape::html($caption) . '</p>';
    } else {
      $audiocaption = null;
    }
    return '<audio controls><source src="'. $url .'"'. ' type="' . $file->mime() . '"></audio>' . $audiocaption;

  }
);

For some reason, that does not work in Safari.

9

Hmm in my Safari Version 9.1.3 it is working! Which Version do you have?

And THANK YOU … I have to look at it later. My children are waiting for me at the kindergarten.

10

I’m on 10.1, but for some reason, the source tag is not displayed once I add “controls” to the audio tag, very weird. Works in other browsers, though.

Let me know if it works for you (when the kids are asleep)

11

Hi,

I can’t replicate the Safari error. Btw what is the error? No sound?

But I have an other strange problem.

My panel entry:

## Subhead
My Introduction …

(audio: mysound.mp3 caption: This is my caption)

### Headline
This is my first line of letters …

and my browser displays:

Subhead
My Introduction …

„Audioplayer”

### Headline
This is my first line of letters …

After the audioplayer all styling characters are visible!?!
Whitout caption everything is fine.

12

Well, thing is, I was mistaken, it all works in Safari but for some reason the source tag is not visible in dev tools.

Anyway, I think the problem is the caption. If you wrap everything within a div tag, it should work:

return '<div><audio controls><source src="'. $url .'"'. ' type="' . $file->mime() . '"></audio>' . $audiocaption . '</div>';
13

Oh crap. I forgot to thank you.
Everything runs.

Thanks for help Perry and texnixe!