• Skip to main content
  • Skip to primary sidebar
…

...

cuộc sống là phải luôn khám phá.

  • Home
  • Music Box
  • Các trang web hay
  • Giới thiệu
  • Liên kết website
Bạn đang ở đây:Trang chủ / IT / [APlayer] How to make a elegant HTML5 web music player for your website

[APlayer] How to make a elegant HTML5 web music player for your website

24/10/2021 tác giả: Duy Nghĩa 3 Bình luận

aplayer

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

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/

Reader Interactions

Bình luận

  1. mydomdomno says

    24/10/2021 at 11:27 chiều

    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!

    Trả lời
    • foxdie says

      25/10/2021 at 10:06 sáng

      I develop it myself and learn many thing in progress. The learning curve can be very steep, but very reward in the end.

      Trả lời
  2. Sanjeev Aryal says

    28/01/2022 at 8:08 chiều

    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.

    Trả lời

Để lại bình luận: Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Primary Sidebar

Chuyên mục

  • fun
  • IT
  • News
  • testing

python

Python Basic: Getting to Python (part 4)

In short, Lists are used to store multiple items in a single variable, they are convenient data structures for representing a sequence of data. In that regard, a list is similar to a string, except a string can hold only characters, however, a list can hold any Python object.

python

Python Basic: Getting to Python (part 3)

Python Functions: (user-defined or from libraries) function is a block of code which only runs when it is called, to do a complete job (module), is named, and can be called to execute multiple times at many places in the program. What happens if you don’t use function? What I can think about is repetitive works, hard to debug, hard to expand the whole code, so usually when working on a large project you need to split your code into many small modules.

Tạo một website dễ dàng với Hugo

Hôm nay chúng ta cùng thử generate 1 website với Hugo, theo như lời giới thiệu ở trang chủ “The world’s fastest framework for building websites.”

Steam_logo

DMCA.com Protection Status

Copyright ©2022 · pquan.info - All Rights Reserved ·