All Docs
Effective Online Presence
Hugo Blox Example Markdown Extensions and Capabilities
Embedding Audio and Audio Platforms in Hugo Blox

Embedding Audio and Audio Platforms in Hugo Blox

In addition to videos and GIFs, Hugo Blox allows you to embed audio and link to previously published audio on platforms like SoundCloud. This capability is especially useful for creating comprehensive and engaging content, such as podcasts, lectures, and interviews, directly within your website. When combined with the presentation and multimedia features discussed earlier, embedding audio further enhances the interactivity and appeal of your Hugo Blox site.

Embedding Audio in Hugo Blox

Embedding audio files directly into your Hugo Blox pages is straightforward and allows you to share various audio content, including podcasts, music, and recorded lectures. This is particularly valuable for educators and content creators looking to provide auditory learning resources or supplementary content.

  1. Markdown Syntax for Embedding Audio: Hugo Blox provides a simple way to embed audio using Markdown. According to the Hugo Blox Docs, you can embed audio files hosted on your site or from external sources.

    Example:

    {{< audio src="/path/to/your-audio-file.mp3" >}}

    This shortcode will embed an audio player directly in your page, allowing visitors to listen to the file without leaving the site.

  2. Use Cases for Audio Embedding:

    • Podcast Episodes: Embed podcast episodes directly into your blog posts or pages, making it easy for your audience to listen while engaging with your written content.
    • Lectures and Tutorials: Provide recorded lectures or tutorials as audio files, enabling students to review material at their own pace.
    • Supplementary Content: Enhance articles with supplementary audio content, such as interviews or commentary, to provide a richer, multi-modal experience.

Linking to Audio on External Platforms

Hugo Blox also makes it easy to link to audio content hosted on external platforms like Spotify, Apple Podcasts, and SoundCloud. Although other platforms such as YouTube and Vimeo have become equally popular in recent years, some creators may still prefer an audio-only format. This is particularly useful if you already have an established presence on those platforms and want to integrate that content into your website seamlessly.

  1. Markdown Syntax for Embedding Spotify: You can embed a Spotify track, album, playlist, and artist player directly in your Hugo Blox pages. Create or update the spotify.html file in your layouts/shortcodes folder:

    {{ if .IsNamedParams }}
<iframe src="https://open.spotify.com/embed/{{ .Get "type" }}/{{ .Get "id" }}"
   width="{{ default "100%" (.Get "width") }}"
   height="{{ default "380" (.Get "height") }}"
   frameborder="0"
   allowtransparency="true"
   allow="encrypted-media"></iframe>
{{ else }}
<iframe src="https://open.spotify.com/embed/{{ .Get 0 }}/{{ .Get 1 }}"
   width="{{ default "100%" (.Get 2) }}"
   height="{{ default "380" (.Get 3) }}"
   frameborder="0"
   allowtransparency="true"
   allow="encrypted-media"></iframe>
{{ end }}

    and, then, using the following Markdown syntax:

    Example:

    {{< spotify type="album" id="5vqILcEeCT0N1DeJBsLrGE" width="100%" height="250" >}}

    Replace 5vqILcEeCT0N1DeJBsLrGE with the Spotify track target ID. This creates a frame with access to the desired content and content controls. Do similarly for other Spotify content types.

  2. Markdown Syntax for Linking to Apple Podcasts: Similarly, you can embed Apple Podcasts episodes or shows directly in your Hugo Blox pages. Create or update the applepodcast.html file in your layouts/shortcodes folder:

    {{ if .IsNamedParams }}
<iframe allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write" frameborder="0"
   height="{{ .Get "height" | default "450" }}"
   width="{{ .Get "width" | default "100%" }}"
   style="max-width:660px;overflow:hidden;border-radius:10px;"
   sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
   src="https://embed.podcasts.apple.com/us/podcast/{{ .Get "id" }}"></iframe>
{{ end }}

    and, then, using the following Markdown syntax:

    Example:

    {{< applepodcast id="1234567890" height="450" width="100%" >}}

    Replace podcast-name and 123456789 with the appropriate podcast name and episode ID. This link will direct visitors to the Apple Podcasts platform to access the content.

  3. Markdown Syntax for Linking to SoundCloud: You can embed SoundCloud tracks or playlists directly into your Hugo Blox pages by placing the three available scripts available in hugo-shortcodes-soundcloud repo in your layouts/shortcodes folder and, then, using the appropriate shortcode for your purpose of the three available options listed on the repo (profile, playlist, or track). For example:

    Example:

    {{< soundcloud-track 1548901276 >}}

    Replace 1548901276 with the SoundCloud track ID. This embeds the SoundCloud player in your page, allowing visitors to stream the content without leaving your site.

  4. Use Cases for Audio Platform Integration:

    • Podcast Integration: If you host a podcast, you can easily integrate episodes into your Hugo Blox site, providing a unified experience for your audience.
    • Music and Audio Art: Musicians and audio artists can showcase their work by embedding uploaded audio tracks, offering visitors a way to listen and explore more of their content.
    • Educational Content: Educators can link to curated playlists or specific tracks that complement their course materials, making it easier for students to access all relevant resources in one place.

Enhancing Engagement with Audio Content

Daniel Quintana’s work on science communication through podcasting highlights the importance of audio content in reaching and engaging a broader audience. Podcasts are particularly effective for conveying complex information in an accessible format, allowing listeners to consume content on the go or while multitasking. By embedding or linking to podcasts and other audio content, you can expand the reach and impact of your work (Daniel Quintana, 2020).

  • Podcasting Integration: Integrating podcasts into your Hugo Blox site can enhance your blog posts, research articles, and educational materials. This multi-modal approach not only caters to different learning styles but also makes your content more versatile and engaging.

  • Social Media Engagement: By embedding or linking to audio content, you can create shareable media that drives traffic back to your website. Audio content is often highly shareable on social media platforms, making it a valuable tool for growing your audience.