can't get twig to find media file in Grav usingHTML5 audio element

Question

In a Grav template, which uses Twig, I have

<audio controls>
    <source src="{{ page.find('/mp3s').media['{{ page.header.samplename }}.mp3'] }}">
</audio>

Nothing is rendered and when I do View Source, what I see is

<audio controls>
   <source src="">
</audio>

I know that page.header.samplename contains a valid name of an MP3 file. And if I replace {{ page.header.samplename }} with the explicit name of an MP3 file, the code works. So I must have a syntax error. I have tried various perms and have also searched Stack Overflow.

What should the code be?

Answer 1

DarkBee supplied this answer

<source src="{{ page.find('/mp3s').media[page.header.samplename~'.mp3'] }}"> – DarkBee yesterday 

(and it worked fine)

Answer 2

DarkBee provided a working answer, but note that you can also output the tags by using:

{{ page.media['myaudiofile.mp3'].html() }}

This will output:

<audio controls>
   <source src="http://example.com/youraudiofile.mp3">
</audio>

If you want your user to be able to pick an audio file from the admin, you can use:

{{ page.media[header.yourfilepicker].html() }}

This suppose you have a matching filepicker field in the admin such as:

yourfilepicker:
  type: filepicker
  folder: 'page@:/mp3s'
  label: Select an audio file
  preview_images: true
  accept:
    - .mp3