LoveIt/exampleSite/content/posts/theme-documentation-music-shortcode/index.en.md
2022-05-13 03:41:37 +08:00

4.2 KiB

weight title date lastmod draft author authorLink description images resources tags categories hiddenFromHomePage
8 Theme Documentation - music Shortcode 2020-03-03T12:29:41+08:00 2020-03-03T12:29:41+08:00 false Dillon https://dillonzq.com The music shortcode embeds a responsive music player based on APlayer and MetingJS library.
name src
featured-image featured-image.png
shortcodes
documentation
true

The music shortcode embeds a responsive music player based on APlayer and MetingJS.

There are three ways to use it the music shortcode.

1 Custom Music URL

{{< version 0.2.10 >}} The complete usage of local resource references is supported.

The music shortcode has the following named parameters by custom music URL:

  • server [required]

    URL of the custom music.

  • name [optional]

    Name of the custom music.

  • artist [optional]

    Artist of the custom music.

  • cover [required]

    URL of the custom music cover.

Example music input by custom music URL:

{{</* music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" */>}}

The rendered output looks like this:

{{< music url="/music/Wavelength.mp3" name=Wavelength artist=oldmanyoung cover="/images/Wavelength.jpg" >}}

2 Music Platform URL Automatic Identification

The music shortcode has one named parameter by music platform URL automatic identification:

  • auto [required] (first positional parameter)

    URL of the music platform URL for automatic identification, which supports netease, tencent and xiami music platform.

Example music input by music platform URL automatic identification:

{{</* music auto="https://music.163.com/#/playlist?id=60198" */>}}
Or
{{</* music "https://music.163.com/#/playlist?id=60198" */>}}

The rendered output looks like this:

{{< music auto="https://music.163.com/#/playlist?id=60198" >}}

3 Custom Server, Type and ID

The music shortcode has the following named parameters by custom music platform:

  • server [required] (first positional parameter)

    [netease, tencent, kugou, xiami, baidu]

    Music platform.

  • type [required] (second positional parameter)

    [song, playlist, album, search, artist]

    Type of the music.

  • id [required] (third positional parameter)

    Song ID, or playlist ID, or album ID, or search keyword, or artist ID.

Example music input by custom music platform:

{{</* music server="netease" type="song" id="1868553" */>}}
Or
{{</* music netease song 1868553 */>}}

The rendered output looks like this:

{{< music netease song 1868553 >}}

4 Other Parameters

The music shortcode has other named parameters applying to the above three ways:

  • theme [optional]

    {{< version 0.2.0 changed >}} Main color of the music player, default value is #448aff.

  • fixed [optional]

    Whether to enable fixed mode, default value is false.

  • mini [optional]

    Whether to enable mini mode, default value is false.

  • autoplay [optional]

    Whether to autoplay music, default value is false.

  • volume [optional]

    Default volume when the player is first opened, which will be remembered in the browser, default value is 0.7.

  • mutex [optional]

    Whether to pause other players when this player starts playing, default value is true.

The music shortcode has the following named parameters only applying to the type of music list:

  • loop [optional]

    [all, one, none]

    Loop mode of the music list, default value is none.

  • order [optional]

    [list, random]

    Play order of the music list, default value is list.

  • list-folded [optional]

    Whether the music list should be folded at first, default value is false.

  • list-max-height [optional]

    Max height of the music list, default value is 340px.