Hugo: SoundCloud Shortcode

I’ve just swept through and updated the version of Hugo used to build this blog. With that update, I revisited how external content is embedded. YouTube videos, GitHub gists, and SoundCloud songs are no longer raw code in the Markdown files, but are generated by Hugo shortcodes.

YouTube and GitHub embeds are part of the default Hugo installation, but SoundCloud not not included.

Here is my Hugo shortcode that inserts an embedded SoundCloud player for a single song.

You can add a player with the numeric identifier for the song:

{{< soundcloud-song 182189210 >}}

You can also add a player that is accompanied by links to the song on SoundCloud. These links appear outside the player iframe. You’ll need the numeric identifier, your username, the song title, and the URL path slug used by SoundCloud.

{{< soundcloud-song 182189210 aronatkins "Growing Up" "growing-up" >}}
SoundCloud: aronatkins ≫ Growing Up

Here is the code defining my soundcloud-song shortcode, which lives within the file layouts/shortcodes/soundcloud-song.html.

<div class="embed soundcloud-player">
    {{- $id := index .Params 0 }}
    <iframe
        title="SoundCloud song"
        width="100%"
        height="166"
        scrolling="no"
        frameborder="no"
        allow="autoplay"
        src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/{{ index .Params 0 }}&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
    {{- if gt (len .Params) 1 }}
    {{- $username := index .Params 1 }}
    {{- $title := index .Params 2 }}
    {{- $slug := index .Params 3 }}
    <div style="font-size: 0.75em; color: #666666;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-weight: 100;">
        SoundCloud:
        <a href="https://soundcloud.com/{{ $username }}" title="{{ $username }}" target="_blank" style="color: #666666; text-decoration: none;">{{ $username }}</a>
        &#x226B;
        <a href="https://soundcloud.com/{{ $username }}/{{ $slug }}" title="{{ $title }}" target="_blank" style="color: #666666; text-decoration: none;">{{ $title }}</a>
    </div>
    {{- end }}
</div>
More: hugo