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. |
|
|
|
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
andxiami
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
.