hugo文章中添加MP3播放

在Hugo文章中添加音乐播放是可行的，有几种实现方式：

1. 使用HTML5 <audio> 标签

最简单的方式是在Markdown内容中直接使用HTML5的<audio>标签：

<audio controls>
  <source src="/path/to/your/music.mp3" type="audio/mpeg">
  您的浏览器不支持音频播放。
</audio>

2. 创建自定义Shortcode

在layouts/shortcodes目录下创建一个音乐播放器shortcode：

文件路径： layouts/shortcodes/music-player.html

<div class="music-player">
  <audio controls {{ if .Get "autoplay" }}autoplay{{ end }} {{ if .Get "loop" }}loop{{ end }}>
    <source src="{{ .Get "src" }}" type="audio/{{ .Get "type" | default "mp3" }}">
    您的浏览器不支持音频播放。
  </audio>
  {{ if .Get "title" }}
    <div class="music-title">{{ .Get "title" }}</div>
  {{ end }}
</div>

然后在文章中使用：

{{< music-player src="/music/example.mp3" title="示例音乐" autoplay="false" >}}

打赏

支付宝微信扫一扫，打赏作者吧～

本文链接：https://www.kinber.cn/post/6483.html 转载需授权！

推荐本站淘宝优惠价购买喜欢的宝贝:

 您阅读本篇文章共花了：