无法使用HTML5音频元素在Grav中找到媒体文件

Question

在使用Twig的Grav模板中，我有

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

什么都没有呈现，当我查看源代码时，我看到的是

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

我知道page.header.samplename包含MP3文件的有效名称。如果我将{{ page.header.samplename }}替换为MP3文件的显式名称，则代码可以正常工作。所以我必须有一个语法错误。我尝试过各种perms，并且还搜索了Stack Overflow。

代码应该是什么？

Answer 1

DarkBee提供了这个答案

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

（并且工作正常）

Answer 2

DarkBee提供了一个有效的答案，但请注意您也可以使用以下方法输出标记：

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

这将输出：

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

如果您希望用户能够从管理员中选择音频文件，您可以使用：

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

这假设您在管理员中有匹配的filepicker字段，例如：

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