Why APlayer?
APlayer is a lovely HTML5 music player to help you build an audio player easily. You may find the repository here: https://github.com/DIYgod/APlayer
It’s really easy to install with literally minimal effort and only basic knowledge about HTML and programming is needed.
APlayer supports:
- Media formats – MP4 H.264 (AAC or MP3) – WAVE PCM – Ogg Theora Vorbis
- Features – Playlist – Lyrics
Let’s dig in
First thing, we create a basic HTML page:
<html>
<head>
<title>APlayer demo page</title>
</head>
<body></body>
</html>Secondly, it’s neccessary to get the source code of APlayer from CDNJS, a powerful CDN provider. You can get it from Github and upload to your hosting, but it’ll be more convenient and faster this way.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js" integrity="sha512-RWosNnDNw8FxHibJqdFRySIswOUgYhFxnmYO3fp+BgCU7gfo4z0oS7mYFBvaa8qu+axY39BmQOrhW3Tp70XbaQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Thirdly, put the following HTML between <body> tags to where the player should be located on webpage:
<div id="myplayer" class="aplayer"></div>
The id: myplayer is important, we will use it to locate the player element.
And then we will implement JavaScript code. Insert following codes between <body> tags:
<script>
const ap = new APlayer({
element: document.getElementById('myplayer'),
music: {
name: 'name',
artist: 'artist',
url: 'url',
cover: 'Cover.jpg',
}
});
</script>You only need to change values ‘name’, ‘artist’, ‘url’, and ‘cover’ to match your music files storing on your own hosting or other sources.
Tips:
- You may noticed that we use myplayer to locate the player element
- The option url is where music file placed, in this case the mp3 file, is in the same directory of this HTML file. You could use a relative url to a file in your webhost like /music_folder/a_song.mp3 and it still works.
So far, if the music file url is correct, the player will come alive with music playing. Even if you have an invalid url the player will display anyway 😀
And that’s it. The player comes alive, beautifully as you can see below:
Making a playlist
<script>
const ap1 = new APlayer({ // ap1
container: document.getElementById('playerlist'),
mini: false,
autoplay: false,
theme: '#9fc5e8', // will be overridden if music color is set
loop: 'all',
order: 'random',
preload: 'auto',
volume: 0.7,
mutex: true,
listFolded: false,
audio: [
{
name: 'name1',
artist: 'artist1',
url: 'url1',
cover: 'Cover.jpg',
theme: '#ebd0c2'
},
{
name: 'name2',
artist: 'artist2',
url: 'url2',
cover: 'Cover.jpg',
theme: '#46718b'
},
{
name: 'name3',
artist: 'artist3',
url: 'url3',
cover: 'Cover.jpg',
theme: '#ebd0c2'
}
] // remember to close the bracket
});Notice that we use a different variable like ap1 if you’re already using ap for another player in the same page. You can keep adding tracks after audio: [ ] and each track will stay between { } brackets.
Remember to call this playlist somewhere in your website:
<div id="playerlist" class="aplayer"></div>
The result should turn out like this:
For even more options, check this documentation. I’ll look more into it when I have more time, like explaining how to add lyrics and so on.
For WordPress
There is a plugin for WordPress that enables APlayer that you can find at WordPress.org. I haven’t tried it yet, but personally I prefer manual method than having one more plugin installed. There are many ways to do this, like here and here, but I think it is out of the scope of this article. But still, pick what works best for you.
And I would like to share how to add the script in my blog, currently using Genesis theme, which is really advantageous due to it allows user to add scripts to the header or body of a specific page or post on the page/post entry screen:
![[APlayer] How to make a elegant HTML5 web music player for your website 1](https://pquan.info/wp-content/uploads/2021/10/APlayer_script_location_WP-1024x317.png)
Anyway, you could insert the code like in the picture above, just looking for similar option if you use another plugin to do it.
Good luck and thanks for reading. Have fun !
You may also be interested in:
https://pquan.info/python-basic-getting-to-python-part-1/
I’m really enjoying the design and layout of your blog.
It’s a very easy on the eyes which makes it much more pleasant for me
to come here and visit more often. Did you hire out a developer to create your theme?
Excellent work!
I develop it myself and learn many thing in progress. The learning curve can be very steep, but very reward in the end.
Yes, APlayer is awesome. The WordPress plugin for APlayer is created by me to make it even easier to embed music player on WordPress sites. There’s also a documentation https://sanjeebaryal.com.np/using-aplayer-in-wordpress-site/, in case it helps.