Using audio-tag for files in the posts folder

Kirby 2 Solved ✅
1

Hello!

I’m new to Kirby and can’t figure out how to do this:
With my post, I’ll upload an audio file to the same folder. Using the audio tag (or a plugin), this file should be shown inside a player without specifying the file name or type (can be both .mp3 or .ogg).

I’ve tried using Kirbys own audio-tag and the audioext plugin, but both seem to use an URL instead of the local file and/or want me to write the file name and extension.

Jannik Beyerstedt’s kirbytag: download plugin works pretty much how I would like the audio player on my site to work. I don’t have to specify file name, file type or location and can just hardcode this into my template: (download: last type: audio text: Download). Any suggestions?

Thanks in advance!

2

You could create a custom audio tag that works similar to the download tag.

1 Like
3

Thanks. I have no php experience, but finding the relevant code snippets from the download Plugin shouldn’t be that hard. I’ll try to figure it out when I get home. Just thought I missed some feature of the audio or audioext tags that would just work.

4

Don’t hesitate to ask in case you get stuck :slightly_smiling_face:

1 Like
5

Well, I’m stuck :slight_smile:
I’ve managed to extract the parts I need and ended up with this:
<?php
kirbytext::$tags[‘audiow’] = array(
$types = ‘audio’,
$files = $files->first);
?>

Problem is, I have no idea how to use it.
From what I understand, this filters the files in the same directory for types Kirby associates with audio and chooses the first file in there. So far, so good. But even if that code is correct (at least it doesn’t throw errors ;)), I don’t know how to make the player appear and use its resulting file.

6

I’ve been trying getting this to work using plyrtag, but I can’t figure out how to include the file path generated by the above php code to plyrtag. Hell, I’m not even sure this code does anything at all :sweat_smile:
Any help would be much appreciated.

7

I have a question: Do you plan to just upload a single audio type for each audio? Or can there also be two types for the same audio?

8

It’s going to be just a single audio file with each post.
Thanks for trying to help.

9

A very simple version of such a tag could look like this:

<?php

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


    // fetch all audio files
    $files = $tag->page()->files()->filterBy('type', 'audio');

    // create the html for an audio file
    function createTag($file){
      $typeMap = [
        'mp3' => 'audio/mpeg',
        'ogg' => 'audio/ogg',
        'wav' => 'audio/wav'
        ];

      $audio = brick('audio',false, ['controls'=>' ']);
      $source = brick('source', false, ['src' => $file->url(), 'type'=> $typeMap[$file->extension()]]);
      $audio->append($source);
      return $audio;
    }

    if ($tag->attr('ext') != "") {
      $files = $files->filterBy('extension', $tag->attr('ext'));
    }

    if($tag->attr('audio') == 'first') {
      $files = $files->first();
    } else if ($tag->attr('audio') == 'last') {
      $files = $files->last();
    } else if ($tag->attr('audio') == 'all') {
      $files = $files;
    } else{
      $files = $files->find($tag->attr('audio'));
    }

    if($tag->attr('audio') == 'all') {
      $html = '<ul>';
      foreach ($files as $file) {
        $html .= '<li>' . createTag($file) . '</li>';
      }
      $html .= '</ul>';
      return $html;
    } else {
       $html = createTag($files);
       return $html;
    }
  }
);

I haven’t added any checks if files exist etc. nor any classes for styling. Feel free to adapt as needed.

Usage:

(audio: first)

Allowed attribute keywords: first, last, all, filename

1 Like
10

Works like a charm!
That code got a lot more complex than I imagined it would be.
But I guess it usually does…

Thank you so much!

11

If you want this to work without passing a keyword, you can add these lines before checking if the keyword is first:

  if($tag->attr('audio') == '') {
      $files = $files->first();
    }

and then just use:

(audio:)

in your content file.

12

You are awesome!
If I sent a donation to the Kirby project, will they buy you a coffee or something?

13

Well, you have to define what you want to build and what you want to do with the different options. You can make it much simpler, if you don’t want to define anything and just fetch the first audio file no matter what:

<?php

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

    $typeMap = [
      'mp3' => 'audio/mpeg',
      'ogg' => 'audio/ogg',
      'wav' => 'audio/wav'
      ];
    if($file = $tag->page()->files()->filterBy('type', 'audio')->first()) {
      $audio = brick('audio',false, ['controls'=>' ']);
      $source = brick('source', false, ['src' => $file->url(), 'type'=> $typeMap[$file->extension()]]);
      $audio->append($source);
      return $audio;
    }

  }
);
1 Like