A simple hugo module to help you add Aplayer in your hugo site with shortcodes.
Metingjs is also supported.
Init your project as a hugo module if not already.
hugo mod init <your_repo_url>
Add this module to site config. The following is an example of yaml, and the same is true for toml and json.
module:
imports:
- path: github.com/Runzelee/aplayer-hugo-module
Set unsafe to true in site config to render the html code.
markup:
goldmark:
renderer:
unsafe: true
{{ < aplayer name="<name>" url="<url>" cover="<cover>" [...] > }}
Loading multiple audios to a playlist is also allowed.
{{ < aplayer name="<name>,[name],[...]" url="<url>,[url],[...]" cover="<cover>,[cover],[...]" [...] > }}
Or use Metingjs to fetch music from server.
{{ < meting server="<server>" id="<id>" type="<type>" [...] > }}
See APlayer or Metingjs full option docs to use more properties.
Enjoy it!
Notice: Regardless of Metingjs or native Aplayer, all properties with capital letters should be replaced in shortcodes with lowercase and hyphenated. For example, lrcType should be replaced with lrc-type.
You can use Aplayer official apis to change properties, monitor player events, etc. to implememt advanced functions.
Aplayer instance is ready for you, you don't need to create a new one. Just use the object ap directly.
{{ < aplayer name="<name>" ... > }}
ap.on('pause', function () {
console.log('player paused');
});
//ap....
{{ < /aplayer > }}
also works with Metingjs
{{ < meting server="<server>" ... > }}
// Your code here.
{{ < /meting > }}
You can use a custom CDN or self-hosted API to improve loading speed in your region. Simply add external urls in the site config.
aplayer:
cdn: xxx/aplayer.min.js
style_cdn: xxx/aplayer.min.css
meting_cdn: xxx/Meing.min.js
WTFPL
This module is very simple. There are only two html files with go template syntax, so you can do whatever you want. :D