Build a youtube music player application with JavaScript

Saturday, 03/06/2023

Tram Ho

I. About Music Player

Music application – which will lead you into a wonderful and diverse world of music. With the continuous development of technology, listening to music has become easier and more convenient than ever. Here are some popular and great music player apps.

Spotify : With over a million songs and a wide variety of music genres, Spotify is one of the top music apps on the market. You can search, listen and share your favorite music easily.
Apple Music : For users of the Apple ecosystem, Apple Music is the perfect choice. With a rich music store, the latest songs and albums, you can access and listen to music on a variety of Apple devices.
YouTube Music : With YouTube Music, you can experience music from millions of songs and music videos on YouTube. This app provides personalized playlists, recommendations based on your preferences and listening needs.
SoundCloud : SoundCloud is an online music platform that allows users to search and play songs from indie artists and emerging musicians. You can find remixes, unreleased songs, and more unique content on SoundCloud.
Deezer : Deezer offers an extensive music library with millions of songs from many different genres. You can create personal playlists, discover high-quality (lossless) copies, and enjoy an unlimited listening experience.

So why don’t we create our own online music application. Today, let’s create a music player application with JavaScript. The source of the music will be taken from the youtube page.

II. Source code structure

css: Folder to save css files to align and beautify the interface.
js: Directory containing JavaScript files to handle game functions.
home.html: Music player application interface.

III. Build apps

1. Interface

home.html: Music player application interface.

<span class="token doctype"><span class="token punctuation">&lt;!</span> <span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> html</span> <span class="token attr-name">lang</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> en <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> head</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> meta</span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> viewport <span class="token punctuation">"</span></span> <span class="token attr-name">content</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> width=device-width, initial-scale=1.0 <span class="token punctuation">"</span></span> <span class="token attr-name">charset</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> UTF-8 <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> title</span> <span class="token punctuation">&gt;</span></span> Music Player Manager By Tuan Nguyen <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> title</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css <span class="token punctuation">"</span></span> <span class="token attr-name">integrity</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w== <span class="token punctuation">"</span></span> <span class="token attr-name">crossorigin</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> anonymous <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> link</span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> preconnect <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> https://fonts.gstatic.com <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> link</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&amp;display=swap <span class="token punctuation">"</span></span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> link</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> css/music.css <span class="token punctuation">"</span></span> <span class="token attr-name">rel</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> stylesheet <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> script</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> https://cdn.jsdelivr.net/npm/sweetalert2@11 <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> script</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> head</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> body</span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> wrapper <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> player__container <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> player__body <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> body__cover <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> ul</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> list list--cover <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> li</span> <span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> a</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> list__link <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> i</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> fa fa-navicon <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> i</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> a</span> <span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> li</span> <span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> li</span> <span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> a</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> list__link <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> a</span> <span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> li</span> <span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> li</span> <span class="token punctuation">&gt;</span></span>
                                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> a</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> btn-search <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> button <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> list__link <span class="token punctuation">"</span></span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> i</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> fa fa-search <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> i</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> a</span> <span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> li</span> <span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> ul</span> <span class="token punctuation">&gt;</span></span>

                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> img</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> album-cover <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> http://ecx.images-amazon.com/images/I/51XSHShbPiL.jpg <span class="token punctuation">"</span></span> <span class="token attr-name">alt</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> Album cover <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> range <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>

                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> body__info <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> song-name <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> info__song <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> song-artist <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> info__artist <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>

                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> body__buttons <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> ul</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> list list--buttons <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> li</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> a</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> btn-backward <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> button <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> list__link <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> i</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> fa fa-step-backward <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> i</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> a</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> li</span> <span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> li</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> a</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> btn-play-song <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> button <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> list__link <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> i</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> icon-play-pause <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> fa fa-play <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> i</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> a</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> li</span> <span class="token punctuation">&gt;</span></span>
                            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> li</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> a</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> btn-forward <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> button <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> list__link <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> i</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> fa fa-step-forward <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> i</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> a</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> li</span> <span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> ul</span> <span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>

                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> player__footer <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> ul</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> list list--footer <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> li</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> a</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> # <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> list__link <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> i</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> fa fa-heart <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> i</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> a</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> li</span> <span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> li</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> a</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> # <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> list__link <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> i</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> fa fa-random <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> i</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> a</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> li</span> <span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> li</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> a</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> # <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> list__link <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> i</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> fa fa-undo <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> i</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> a</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> li</span> <span class="token punctuation">&gt;</span></span>
                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> li</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> a</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> # <span class="token punctuation">"</span></span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> list__link <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> i</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> fa fa-ellipsis-h <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> i</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> a</span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> li</span> <span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> ul</span> <span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> iframe</span> <span class="token attr-name">hidden</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> song <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> <span class="token punctuation">"</span></span> <span class="token attr-name">frameborder</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> 0 <span class="token punctuation">"</span></span> <span class="token attr-name">allowfullscreen</span> <span class="token attr-name">playsinline</span> <span class="token attr-name">allow</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> autoplay; encrypted-media <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> iframe</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> body</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> html</span> <span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> script</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> text/javascript <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> js/constants.js <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> script</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> script</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> text/javascript <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> js/music.js <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> script</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> script</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> text/javascript <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> js/utils.js <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> script</span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> script</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> text/javascript <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> js/youtubeAPI.js <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> script</span> <span class="token punctuation">&gt;</span></span>

<! DOCTYPE html >

< html lang = " en " >

< head >

< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " charset = " UTF-8 " >

< title > Music Player Manager By Tuan Nguyen </ title >

< link rel = " stylesheet " href = " https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css " integrity = " sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w== " crossorigin = " anonymous " />

< link href = " https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap " rel = " stylesheet " >

< link href = " css/music.css " rel = " stylesheet " >

< script src = " https://cdn.jsdelivr.net/npm/sweetalert2@11 " > </ script >

</ head >

< body >

< div class = " wrapper " >

< div class = " player__container " >

< div class = " player__body " >

< div class = " body__cover " >

< ul class = " list list--cover " >

< li >

< a class = " list__link " href = " " > < i class = " fa fa-navicon " > </ i > </ a >

</ li >

< li >

</ li >

< li >

< a id = " btn-search " type = " button " class = " list__link " href = " " > < i class = " fa fa-search " > </ i > </ a >

</ li >

</ ul >

< img id = " album-cover " src = " http://ecx.images-amazon.com/images/I/51XSHShbPiL.jpg " alt = " Album cover " />

< div class = " range " > </ div >

</ div >

< div class = " body__info " >

< div id = " song-name " class = " info__song " > </ div >

< div id = " song-artist " class = " info__artist " > </ div >

</ div >

< div class = " body__buttons " >

< ul class = " list list--buttons " >

< li > < a id = " btn-backward " type = " button " class = " list__link " > < i class = " fa fa-step-backward " > </ i > </ a > </ li >

< li > < a id = " btn-play-song " type = " button " class = " list__link " > < i id = " icon-play-pause " class = " fa fa-play " > </ i > </ a > </ li >

< li > < a id = " btn-forward " type = " button " class = " list__link " > < i class = " fa fa-step-forward " > </ i > </ a > </ li >

</ ul >

</ div >

< div class = " player__footer " >

< ul class = " list list--footer " >

< li > < a href = " # " class = " list__link " > < i class = " fa fa-heart " > </ i > </ a > </ li >

< li > < a href = " # " class = " list__link " > < i class = " fa fa-random " > </ i > </ a > </ li >

< li > < a href = " # " class = " list__link " > < i class = " fa fa-undo " > </ i > </ a > </ li >

< li > < a href = " # " class = " list__link " > < i class = " fa fa-ellipsis-h " > </ i > </ a > </ li >

</ ul >

</ div >

< iframe hidden id = " song " src = " " frameborder = " 0 " allowfullscreen playsinline allow = " autoplay; encrypted-media " > </ iframe >

</ body >

</ html >

< script type = " text/javascript " src = " js/constants.js " > </ script >

< script type = " text/javascript " src = " js/music.js " > </ script >

< script type = " text/javascript " src = " js/utils.js " > </ script >

< script type = " text/javascript " src = " js/youtubeAPI.js " > </ script >

music.css: Add styles to those HTML elements such as changing the layout, page color, text color for the application interface.

<span class="token selector">html</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span> <span class="token punctuation">:</span> 16px <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body</span> <span class="token punctuation">{</span>
    <span class="token property">font-family</span> <span class="token punctuation">:</span> <span class="token string">'Roboto'</span> <span class="token punctuation">,</span> Arial <span class="token punctuation">,</span> Verdana <span class="token punctuation">,</span> sans-serif <span class="token punctuation">;</span>
    <span class="token property">background</span> <span class="token punctuation">:</span> #e4f2fb <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">a</span> <span class="token punctuation">{</span>
    <span class="token property">text-decoration</span> <span class="token punctuation">:</span> none <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.player__container</span> <span class="token punctuation">{</span>
    <span class="token property">margin-top</span> <span class="token punctuation">:</span> 2rem <span class="token punctuation">;</span>
    <span class="token property">margin-right</span> <span class="token punctuation">:</span> auto <span class="token punctuation">;</span>
    <span class="token property">margin-left</span> <span class="token punctuation">:</span> auto <span class="token punctuation">;</span>
    <span class="token property">max-width</span> <span class="token punctuation">:</span> 30rem <span class="token punctuation">;</span>
    <span class="token property">height</span> <span class="token punctuation">:</span> 50rem <span class="token punctuation">;</span>
    <span class="token property">background</span> <span class="token punctuation">:</span> #fff <span class="token punctuation">;</span>
    <span class="token property">border-radius</span> <span class="token punctuation">:</span> 0.25rem <span class="token punctuation">;</span>
    <span class="token property">box-shadow</span> <span class="token punctuation">:</span> 0 10px 20px -5px <span class="token function">rgba</span> <span class="token punctuation">(</span> 0 <span class="token punctuation">,</span> 0 <span class="token punctuation">,</span> 0 <span class="token punctuation">,</span> .19 <span class="token punctuation">)</span> <span class="token punctuation">,</span> 0 6px 6px -10px <span class="token function">rgba</span> <span class="token punctuation">(</span> 0 <span class="token punctuation">,</span> 0 <span class="token punctuation">,</span> 0 <span class="token punctuation">,</span> .23 <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.body__cover</span> <span class="token punctuation">{</span>
    <span class="token property">position</span> <span class="token punctuation">:</span> relative <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.body__cover img</span> <span class="token punctuation">{</span>
    <span class="token property">max-width</span> <span class="token punctuation">:</span> 100% <span class="token punctuation">;</span>
    <span class="token property">border-radius</span> <span class="token punctuation">:</span> 0.25rem <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list</span> <span class="token punctuation">{</span>
    <span class="token property">display</span> <span class="token punctuation">:</span> flex <span class="token punctuation">;</span>
    <span class="token property">margin</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span>
    <span class="token property">padding</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span>
    <span class="token property">list-style-type</span> <span class="token punctuation">:</span> none <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.body__buttons, .body__info, .player__footer</span> <span class="token punctuation">{</span>
    <span class="token property">padding-right</span> <span class="token punctuation">:</span> 2rem <span class="token punctuation">;</span>
    <span class="token property">padding-left</span> <span class="token punctuation">:</span> 2rem <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--cover, .list--footer</span> <span class="token punctuation">{</span>
    <span class="token property">justify-content</span> <span class="token punctuation">:</span> space-between <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--header .list__link, .list--footer .list__link</span> <span class="token punctuation">{</span>
    <span class="token property">color</span> <span class="token punctuation">:</span> #888 <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--cover</span> <span class="token punctuation">{</span>
    <span class="token property">position</span> <span class="token punctuation">:</span> absolute <span class="token punctuation">;</span>
    <span class="token property">top</span> <span class="token punctuation">:</span> 0.5rem <span class="token punctuation">;</span>
    <span class="token property">width</span> <span class="token punctuation">:</span> 100% <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--cover li:first-of-type</span> <span class="token punctuation">{</span>
    <span class="token property">margin-left</span> <span class="token punctuation">:</span> 0.75rem <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--cover li:last-of-type</span> <span class="token punctuation">{</span>
    <span class="token property">margin-right</span> <span class="token punctuation">:</span> 0.75rem <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--cover a</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span> <span class="token punctuation">:</span> 1.15rem <span class="token punctuation">;</span>
    <span class="token property">color</span> <span class="token punctuation">:</span> #fff <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.range</span> <span class="token punctuation">{</span>
    <span class="token property">position</span> <span class="token punctuation">:</span> relative <span class="token punctuation">;</span>
    <span class="token property">top</span> <span class="token punctuation">:</span> -1.5rem <span class="token punctuation">;</span>
    <span class="token property">right</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span>
    <span class="token property">left</span> <span class="token punctuation">:</span> 0 <span class="token punctuation">;</span>
    <span class="token property">margin</span> <span class="token punctuation">:</span> auto <span class="token punctuation">;</span>
    <span class="token property">background</span> <span class="token punctuation">:</span> <span class="token function">rgba</span> <span class="token punctuation">(</span> 255 <span class="token punctuation">,</span> 255 <span class="token punctuation">,</span> 255 <span class="token punctuation">,</span> .95 <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token property">width</span> <span class="token punctuation">:</span> 80% <span class="token punctuation">;</span>
    <span class="token property">height</span> <span class="token punctuation">:</span> 0.125rem <span class="token punctuation">;</span>
    <span class="token property">border-radius</span> <span class="token punctuation">:</span> 0.25rem <span class="token punctuation">;</span>
    <span class="token property">cursor</span> <span class="token punctuation">:</span> pointer <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.range:before, .range:after</span> <span class="token punctuation">{</span>
    <span class="token property">content</span> <span class="token punctuation">:</span> <span class="token string">""</span> <span class="token punctuation">;</span>
    <span class="token property">position</span> <span class="token punctuation">:</span> absolute <span class="token punctuation">;</span>
    <span class="token property">cursor</span> <span class="token punctuation">:</span> pointer <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.range:before</span> <span class="token punctuation">{</span>
    <span class="token property">width</span> <span class="token punctuation">:</span> 3rem <span class="token punctuation">;</span>
    <span class="token property">height</span> <span class="token punctuation">:</span> 100% <span class="token punctuation">;</span>
    <span class="token property">background</span> <span class="token punctuation">:</span> <span class="token function">linear-gradient</span> <span class="token punctuation">(</span> to right <span class="token punctuation">,</span> <span class="token function">rgba</span> <span class="token punctuation">(</span> 211 <span class="token punctuation">,</span> 3 <span class="token punctuation">,</span> 32 <span class="token punctuation">,</span> .5 <span class="token punctuation">)</span> <span class="token punctuation">,</span> <span class="token function">rgba</span> <span class="token punctuation">(</span> 211 <span class="token punctuation">,</span> 3 <span class="token punctuation">,</span> 32 <span class="token punctuation">,</span> .85 <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token property">border-radius</span> <span class="token punctuation">:</span> 0.25rem <span class="token punctuation">;</span>
    <span class="token property">overflow</span> <span class="token punctuation">:</span> hidden <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.range:after</span> <span class="token punctuation">{</span>
    <span class="token property">top</span> <span class="token punctuation">:</span> -0.375rem <span class="token punctuation">;</span>
    <span class="token property">left</span> <span class="token punctuation">:</span> 3rem <span class="token punctuation">;</span>
    <span class="token property">z-index</span> <span class="token punctuation">:</span> 3 <span class="token punctuation">;</span>
    <span class="token property">width</span> <span class="token punctuation">:</span> 0.875rem <span class="token punctuation">;</span>
    <span class="token property">height</span> <span class="token punctuation">:</span> 0.875rem <span class="token punctuation">;</span>
    <span class="token property">background</span> <span class="token punctuation">:</span> #fff <span class="token punctuation">;</span>
    <span class="token property">border-radius</span> <span class="token punctuation">:</span> 50% <span class="token punctuation">;</span>
    <span class="token property">box-shadow</span> <span class="token punctuation">:</span> 0 0 3px <span class="token function">rgba</span> <span class="token punctuation">(</span> 0 <span class="token punctuation">,</span> 0 <span class="token punctuation">,</span> 0 <span class="token punctuation">,</span> .15 <span class="token punctuation">)</span> <span class="token punctuation">,</span> 0 2px 4px <span class="token function">rgba</span> <span class="token punctuation">(</span> 0 <span class="token punctuation">,</span> 0 <span class="token punctuation">,</span> 0 <span class="token punctuation">,</span> .15 <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token property">transition</span> <span class="token punctuation">:</span> all 0.25s <span class="token function">cubic-bezier</span> <span class="token punctuation">(</span> 0.4 <span class="token punctuation">,</span> 0 <span class="token punctuation">,</span> 1 <span class="token punctuation">,</span> 1 <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.range:focus:after, .range:hover:after</span> <span class="token punctuation">{</span>
    <span class="token property">background</span> <span class="token punctuation">:</span> <span class="token function">rgba</span> <span class="token punctuation">(</span> 211 <span class="token punctuation">,</span> 3 <span class="token punctuation">,</span> 32 <span class="token punctuation">,</span> .95 <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.body__info</span> <span class="token punctuation">{</span>
    <span class="token property">padding-top</span> <span class="token punctuation">:</span> 1.5rem <span class="token punctuation">;</span>
    <span class="token property">padding-bottom</span> <span class="token punctuation">:</span> 1.25rem <span class="token punctuation">;</span>
    <span class="token property">text-align</span> <span class="token punctuation">:</span> center <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.info__album, .info__song</span> <span class="token punctuation">{</span>
    <span class="token property">margin-bottom</span> <span class="token punctuation">:</span> 0.5rem <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.info__artist, .info__album</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span> <span class="token punctuation">:</span> 0.75rem <span class="token punctuation">;</span>
    <span class="token property">font-weight</span> <span class="token punctuation">:</span> 300 <span class="token punctuation">;</span>
    <span class="token property">color</span> <span class="token punctuation">:</span> #666 <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.info__song</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span> <span class="token punctuation">:</span> 1.15rem <span class="token punctuation">;</span>
    <span class="token property">font-weight</span> <span class="token punctuation">:</span> 400 <span class="token punctuation">;</span>
    <span class="token property">color</span> <span class="token punctuation">:</span> #d30320 <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.body__buttons</span> <span class="token punctuation">{</span>
    <span class="token property">padding-bottom</span> <span class="token punctuation">:</span> 2rem <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.body__buttons</span> <span class="token punctuation">{</span>
    <span class="token property">padding-top</span> <span class="token punctuation">:</span> 1rem <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--buttons</span> <span class="token punctuation">{</span>
    <span class="token property">align-items</span> <span class="token punctuation">:</span> center <span class="token punctuation">;</span>
    <span class="token property">justify-content</span> <span class="token punctuation">:</span> center <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--buttons li:nth-of-type(n+2)</span> <span class="token punctuation">{</span>
    <span class="token property">margin-left</span> <span class="token punctuation">:</span> 1.25rem <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--buttons a</span> <span class="token punctuation">{</span>
    <span class="token property">padding</span> <span class="token punctuation">:</span> 0.45rem 0.75rem <span class="token punctuation">;</span>
    <span class="token property">font-size</span> <span class="token punctuation">:</span> 1rem <span class="token punctuation">;</span>
    <span class="token property">border-radius</span> <span class="token punctuation">:</span> 50% <span class="token punctuation">;</span>
    <span class="token property">box-shadow</span> <span class="token punctuation">:</span> 0 3px 6px <span class="token function">rgba</span> <span class="token punctuation">(</span> 33 <span class="token punctuation">,</span> 33 <span class="token punctuation">,</span> 33 <span class="token punctuation">,</span> .1 <span class="token punctuation">)</span> <span class="token punctuation">,</span> 0 3px 12px <span class="token function">rgba</span> <span class="token punctuation">(</span> 33 <span class="token punctuation">,</span> 33 <span class="token punctuation">,</span> 33 <span class="token punctuation">,</span> .15 <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--buttons a:focus, .list--buttons a:hover</span> <span class="token punctuation">{</span>
    <span class="token property">color</span> <span class="token punctuation">:</span> <span class="token function">rgba</span> <span class="token punctuation">(</span> 171 <span class="token punctuation">,</span> 2 <span class="token punctuation">,</span> 26 <span class="token punctuation">,</span> .95 <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token property">opacity</span> <span class="token punctuation">:</span> 1 <span class="token punctuation">;</span>
    <span class="token property">box-shadow</span> <span class="token punctuation">:</span> 0 6px 9px <span class="token function">rgba</span> <span class="token punctuation">(</span> 33 <span class="token punctuation">,</span> 33 <span class="token punctuation">,</span> 33 <span class="token punctuation">,</span> .1 <span class="token punctuation">)</span> <span class="token punctuation">,</span> 0 6px 16px <span class="token function">rgba</span> <span class="token punctuation">(</span> 33 <span class="token punctuation">,</span> 33 <span class="token punctuation">,</span> 33 <span class="token punctuation">,</span> .15 <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--buttons li:nth-of-type(2) a</span> <span class="token punctuation">{</span>
    <span class="token property">padding</span> <span class="token punctuation">:</span> 0.82rem 1rem 0.82rem 1.19rem <span class="token punctuation">;</span>
    <span class="token property">margin-left</span> <span class="token punctuation">:</span> 0.5rem <span class="token punctuation">;</span>
    <span class="token property">font-size</span> <span class="token punctuation">:</span> 1.25rem <span class="token punctuation">;</span>
    <span class="token property">color</span> <span class="token punctuation">:</span> <span class="token function">rgba</span> <span class="token punctuation">(</span> 211 <span class="token punctuation">,</span> 3 <span class="token punctuation">,</span> 32 <span class="token punctuation">,</span> .95 <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--buttons li:first-of-type a, .list--buttons li:last-of-type a</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span> <span class="token punctuation">:</span> 0.95rem <span class="token punctuation">;</span>
    <span class="token property">color</span> <span class="token punctuation">:</span> #212121 <span class="token punctuation">;</span>
    <span class="token property">opacity</span> <span class="token punctuation">:</span> 0.5 <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--buttons li:first-of-type a:focus, .list--buttons li:last-of-type a:focus, .list--buttons li:first-of-type a:hover, .list--buttons li:last-of-type a:hover</span> <span class="token punctuation">{</span>
    <span class="token property">color</span> <span class="token punctuation">:</span> #d30320 <span class="token punctuation">;</span>
    <span class="token property">opacity</span> <span class="token punctuation">:</span> 0.75 <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list__link</span> <span class="token punctuation">{</span>
    <span class="token property">transition</span> <span class="token punctuation">:</span> all 0.25s <span class="token function">cubic-bezier</span> <span class="token punctuation">(</span> 0.4 <span class="token punctuation">,</span> 0 <span class="token punctuation">,</span> 1 <span class="token punctuation">,</span> 1 <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list__link:focus, .list__link:hover</span> <span class="token punctuation">{</span>
    <span class="token property">color</span> <span class="token punctuation">:</span> #d30320 <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.player__footer</span> <span class="token punctuation">{</span>
    <span class="token property">padding-top</span> <span class="token punctuation">:</span> 1rem <span class="token punctuation">;</span>
    <span class="token property">padding-bottom</span> <span class="token punctuation">:</span> 2rem <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--footer a</span> <span class="token punctuation">{</span>
    <span class="token property">opacity</span> <span class="token punctuation">:</span> 0.5 <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.list--footer a:focus, .list--footer a:hover</span> <span class="token punctuation">{</span>
    <span class="token property">opacity</span> <span class="token punctuation">:</span> 0.9 <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

html {

font-size : 16px ;

}

body {

font-family : 'Roboto' , Arial , Verdana , sans-serif ;

background : #e4f2fb ;

}

a {

text-decoration : none ;

}

.player__container {

margin-top : 2rem ;

margin-right : auto ;

margin-left : auto ;

max-width : 30rem ;

height : 50rem ;

background : #fff ;

border-radius : 0.25rem ;

box-shadow : 0 10px 20px -5px rgba ( 0 , 0 , 0 , .19 ) , 0 6px 6px -10px rgba ( 0 , 0 , 0 , .23 ) ;

}

.body__cover {

position : relative ;

}

.body__cover img {

max-width : 100% ;

border-radius : 0.25rem ;

}

.list {

display : flex ;

margin : 0 ;

padding : 0 ;

list-style-type : none ;

}

.body__buttons, .body__info, .player__footer {

padding-right : 2rem ;

padding-left : 2rem ;

}

.list--cover, .list--footer {

justify-content : space-between ;

}

.list--header .list__link, .list--footer .list__link {

color : #888 ;

}

.list--cover {

position : absolute ;

top : 0.5rem ;

width : 100% ;

}

.list--cover li:first-of-type {

margin-left : 0.75rem ;

}

.list--cover li:last-of-type {

margin-right : 0.75rem ;

}

.list--cover a {

font-size : 1.15rem ;

color : #fff ;

}

.range {

position : relative ;

top : -1.5rem ;

right : 0 ;

left : 0 ;

margin : auto ;

background : rgba ( 255 , 255 , 255 , .95 ) ;

width : 80% ;

height : 0.125rem ;

border-radius : 0.25rem ;

cursor : pointer ;

}

.range:before, .range:after {

content : "" ;

position : absolute ;

cursor : pointer ;

}

.range:before {

width : 3rem ;

height : 100% ;

background : linear-gradient ( to right , rgba ( 211 , 3 , 32 , .5 ) , rgba ( 211 , 3 , 32 , .85 ) ) ;

border-radius : 0.25rem ;

overflow : hidden ;

}

.range:after {

top : -0.375rem ;

left : 3rem ;

z-index : 3 ;

width : 0.875rem ;

height : 0.875rem ;

background : #fff ;

border-radius : 50% ;

box-shadow : 0 0 3px rgba ( 0 , 0 , 0 , .15 ) , 0 2px 4px rgba ( 0 , 0 , 0 , .15 ) ;

transition : all 0.25s cubic-bezier ( 0.4 , 0 , 1 , 1 ) ;

}

.range:focus:after, .range:hover:after {

background : rgba ( 211 , 3 , 32 , .95 ) ;

}

.body__info {

padding-top : 1.5rem ;

padding-bottom : 1.25rem ;

text-align : center ;

}

.info__album, .info__song {

margin-bottom : 0.5rem ;

}

.info__artist, .info__album {

font-size : 0.75rem ;

font-weight : 300 ;

color : #666 ;

}

.info__song {

font-size : 1.15rem ;

font-weight : 400 ;

color : #d30320 ;

}

.body__buttons {

padding-bottom : 2rem ;

}

.body__buttons {

padding-top : 1rem ;

}

.list--buttons {

align-items : center ;

justify-content : center ;

}

.list--buttons li:nth-of-type(n+2) {

margin-left : 1.25rem ;

}

.list--buttons a {

padding : 0.45rem 0.75rem ;

font-size : 1rem ;

border-radius : 50% ;

box-shadow : 0 3px 6px rgba ( 33 , 33 , 33 , .1 ) , 0 3px 12px rgba ( 33 , 33 , 33 , .15 ) ;

}

.list--buttons a:focus, .list--buttons a:hover {

color : rgba ( 171 , 2 , 26 , .95 ) ;

opacity : 1 ;

box-shadow : 0 6px 9px rgba ( 33 , 33 , 33 , .1 ) , 0 6px 16px rgba ( 33 , 33 , 33 , .15 ) ;

}

.list--buttons li:nth-of-type(2) a {

padding : 0.82rem 1rem 0.82rem 1.19rem ;

margin-left : 0.5rem ;

font-size : 1.25rem ;

color : rgba ( 211 , 3 , 32 , .95 ) ;

}

.list--buttons li:first-of-type a, .list--buttons li:last-of-type a {

font-size : 0.95rem ;

color : #212121 ;

opacity : 0.5 ;

}

.list--buttons li:first-of-type a:focus, .list--buttons li:last-of-type a:focus, .list--buttons li:first-of-type a:hover, .list--buttons li:last-of-type a:hover {

color : #d30320 ;

opacity : 0.75 ;

}

.list__link {

}

.list__link:focus, .list__link:hover {

color : #d30320 ;

}

.player__footer {

padding-top : 1rem ;

padding-bottom : 2rem ;

}

.list--footer a {

opacity : 0.5 ;

}

.list--footer a:focus, .list--footer a:hover {

opacity : 0.9 ;

}

I have referenced the interface source code here. Thanks bro for sharing the source code. Music player UI design

Because the html and css interface is not too complicated, you can read and understand it yourself! After a bit of html and css we will have an interface like this.

Desktop application interface

Mobile application interface

2. Generate Youtube API key

Before entering the detailed functions. Due to the music source from youtube, everyone generates an api key to get information and play youtube music. The steps to get the api key are as follows:

Go to the Google Developers Console page.
Create a new project or select an existing project.
Enable YouTube Data API for the project.
Generate an API key for the project.

3. Handling Youtube APIs

Process to find playlists by keyword search. Here I take the 10 closest songs with keywords according to Youtube search

<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">searchKey</span> <span class="token punctuation">(</span> <span class="token parameter">keyword</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">await</span> <span class="token function">searchYouTube</span> <span class="token punctuation">(</span> keyword <span class="token punctuation">,</span> <span class="token constant">API_KEY</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">searchYouTube</span> <span class="token punctuation">(</span> <span class="token parameter">keyword <span class="token punctuation">,</span> apiKey</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// Perform keyword search using YouTube Data API v3</span>
  <span class="token keyword">const</span> searchResponse <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span> <span class="token punctuation">(</span>
    <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">https://www.googleapis.com/youtube/v3/search?part=snippet&amp;maxResults=10&amp;q=</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token function">encodeURIComponent</span> <span class="token punctuation">(</span>
      keyword
    <span class="token punctuation">)</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">&amp;key=</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> apiKey <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">const</span> searchResult <span class="token operator">=</span> <span class="token keyword">await</span> searchResponse <span class="token punctuation">.</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

  <span class="token keyword">return</span> searchResult <span class="token punctuation">.</span> items <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">item</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> item <span class="token punctuation">.</span> id <span class="token punctuation">.</span> videoId <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

async function searchKey ( keyword ) {

return await searchYouTube ( keyword , API_KEY ) ;

}

async function searchYouTube ( keyword , apiKey ) {

// Perform keyword search using YouTube Data API v3

const searchResponse = await fetch (

` https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=10&q= ${ encodeURIComponent (

keyword

) } &key= ${ apiKey } `

) ;

const searchResult = await searchResponse . json ( ) ;

return searchResult . items . map ( ( item ) => item . id . videoId ) ;

}

Get song information by id: title, video channel, video thumbnail,…

<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getInfoSong</span> <span class="token punctuation">(</span> <span class="token parameter">id</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token punctuation">{</span>
    title <span class="token operator">:</span> <span class="token constant">NOT_FOUND</span> <span class="token punctuation">,</span>
    artist <span class="token operator">:</span> <span class="token constant">NOT_FOUND</span> <span class="token punctuation">,</span>
    thumbnail <span class="token operator">:</span> <span class="token constant">NOT_FOUND</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">;</span>

  <span class="token keyword">await</span> <span class="token function">fetch</span> <span class="token punctuation">(</span>
    <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">https://www.googleapis.com/youtube/v3/videos?id=</span> <span class="token template-punctuation string">`</span></span> <span class="token operator">+</span>
      id <span class="token operator">+</span>
      <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">&amp;part=snippet&amp;key=</span> <span class="token template-punctuation string">`</span></span> <span class="token operator">+</span>
      <span class="token constant">API_KEY</span>
  <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">response</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> response <span class="token punctuation">.</span> <span class="token function">json</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">data</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> video <span class="token operator">=</span> data <span class="token punctuation">.</span> items <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
      res <span class="token punctuation">.</span> artist <span class="token operator">=</span> video <span class="token punctuation">.</span> snippet <span class="token punctuation">.</span> channelTitle <span class="token punctuation">;</span>
      res <span class="token punctuation">.</span> title <span class="token operator">=</span> video <span class="token punctuation">.</span> snippet <span class="token punctuation">.</span> title <span class="token punctuation">;</span>
      res <span class="token punctuation">.</span> thumbnail <span class="token operator">=</span> video <span class="token punctuation">.</span> snippet <span class="token punctuation">.</span> thumbnails <span class="token punctuation">.</span> standard
        <span class="token operator">?</span> video <span class="token punctuation">.</span> snippet <span class="token punctuation">.</span> thumbnails <span class="token punctuation">.</span> standard <span class="token punctuation">.</span> url
        <span class="token operator">:</span> video <span class="token punctuation">.</span> snippet <span class="token punctuation">.</span> thumbnails <span class="token punctuation">.</span> high <span class="token punctuation">.</span> url <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">catch</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">error</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> <span class="token string">"Error:"</span> <span class="token punctuation">,</span> error <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

  <span class="token keyword">return</span> res <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

async function getInfoSong ( id ) {

let res = {

title : NOT_FOUND ,

artist : NOT_FOUND ,

thumbnail : NOT_FOUND ,

} ;

await fetch (

id +

` &part=snippet&key= ` +

API_KEY

)

. then ( ( response ) => response . json ( ) )

const video = data . items [ 0 ] ;

res . artist = video . snippet . channelTitle ;

res . title = video . snippet . title ;

res . thumbnail = video . snippet . thumbnails . standard

? video . snippet . thumbnails . standard . url

: video . snippet . thumbnails . high . url ;

} )

. catch ( ( error ) => {

console . error ( "Error:" , error ) ;

} ) ;

return res ;

}

These two functions are just calling the Youtube API according to the search keyword. If you read the document of Youtube, it’s okela. No problem with this part.

4. Song search function

In this part, I used the sweet alert library to make the interface more beautiful. The steps are also simple. First we will have the function getInfoTheSong, this function has the function of calling the processing function to get the song information above and display the values on the screen interface.

<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getInfoTheSong</span> <span class="token punctuation">(</span> <span class="token parameter">id</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> songInfo <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getInfoSong</span> <span class="token punctuation">(</span> id <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"song-name"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> textContent <span class="token operator">=</span> songInfo <span class="token punctuation">.</span> title <span class="token punctuation">;</span>
  document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"song-artist"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> textContent <span class="token operator">=</span> songInfo <span class="token punctuation">.</span> artist <span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span> songInfo <span class="token punctuation">.</span> thumbnail <span class="token operator">||</span> songInfo <span class="token punctuation">.</span> thumbnail <span class="token operator">!==</span> <span class="token constant">NOT_FOUND</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"album-cover"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> src <span class="token operator">=</span> songInfo <span class="token punctuation">.</span> thumbnail <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

async function getInfoTheSong ( id ) {

const songInfo = await getInfoSong ( id ) ;

if ( songInfo . thumbnail || songInfo . thumbnail !== NOT_FOUND ) {

}

In the search processing step, we will process each step as follows:

Get the user input key search input.
Call the searchKey function above to get the song list information.
Save the playlist and default selected the first song.
Play music.

document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"btn-search"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"click"</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token parameter">event</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  event <span class="token punctuation">.</span> <span class="token function">preventDefault</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  Swal <span class="token punctuation">.</span> <span class="token function">fire</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
    title <span class="token operator">:</span> <span class="token string">"Điền tên bài hát"</span> <span class="token punctuation">,</span>
    input <span class="token operator">:</span> <span class="token string">"text"</span> <span class="token punctuation">,</span>
    inputAttributes <span class="token operator">:</span> <span class="token punctuation">{</span>
      autocapitalize <span class="token operator">:</span> <span class="token string">"off"</span> <span class="token punctuation">,</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    showCancelButton <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span>
    confirmButtonText <span class="token operator">:</span> <span class="token string">"Search"</span> <span class="token punctuation">,</span>
    showLoaderOnConfirm <span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span>
    <span class="token function-variable function">preConfirm</span> <span class="token operator">:</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token parameter">songName</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> ids <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">searchKey</span> <span class="token punctuation">(</span> songName <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span> ids <span class="token punctuation">.</span> length <span class="token operator">===</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">AlertError</span> <span class="token punctuation">(</span> <span class="token constant">NOT_FOUND_SONG</span> <span class="token punctuation">,</span> <span class="token string">""</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      localStorage <span class="token punctuation">.</span> <span class="token function">setItem</span> <span class="token punctuation">(</span> <span class="token constant">VIDEO_YOUTUBE_ID</span> <span class="token punctuation">,</span> ids <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      localStorage <span class="token punctuation">.</span> <span class="token function">setItem</span> <span class="token punctuation">(</span> <span class="token constant">SELECTED_VIDEO_ID</span> <span class="token punctuation">,</span> ids <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
      document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"song"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> src <span class="token operator">=</span>
        <span class="token string">"https://www.youtube.com/embed/"</span> <span class="token operator">+</span>
        ids <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token operator">+</span>
        <span class="token string">"?rel=0&amp;amp;controls=0&amp;amp;showinfo=0&amp;amp;autoplay=1"</span> <span class="token punctuation">;</span>
      document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"icon-play-pause"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> className <span class="token operator">=</span> <span class="token string">"fa fa-pause"</span> <span class="token punctuation">;</span>

      <span class="token comment">// get the song's information</span>
      <span class="token keyword">await</span> <span class="token function">getInfoTheSong</span> <span class="token punctuation">(</span> ids <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
    <span class="token function-variable function">allowOutsideClick</span> <span class="token operator">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">!</span> Swal <span class="token punctuation">.</span> <span class="token function">isLoading</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">result</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

document . getElementById ( "btn-search" ) . addEventListener ( "click" , ( event ) => {

event . preventDefault ( ) ;

Swal . fire ( {

title : "Điền tên bài hát" ,

input : "text" ,

inputAttributes : {

autocapitalize : "off" ,

} ,

showCancelButton : true ,

confirmButtonText : "Search" ,

showLoaderOnConfirm : true ,

preConfirm : async ( songName ) => {

const ids = await searchKey ( songName ) ;

if ( ids . length === 0 ) {

AlertError ( NOT_FOUND_SONG , "" ) ;

return ;

}

localStorage . setItem ( VIDEO_YOUTUBE_ID , ids ) ;

localStorage . setItem ( SELECTED_VIDEO_ID , ids [ 0 ] ) ;

"https://www.youtube.com/embed/" +

ids [ 0 ] +

"?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" ;

// get the song's information

await getInfoTheSong ( ids [ 0 ] ) ;

} ,

allowOutsideClick : ( ) => ! Swal . isLoading ( ) ,

} ) . then ( ( result ) => { } ) ;

} ) ;

5. Play/pause function

In this processing step, we check if the state and turn the music on and off corresponds to the current state

document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"btn-play-song"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"click"</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token parameter">event</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"icon-play-pause"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> className <span class="token operator">=</span>
    document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"icon-play-pause"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> className <span class="token operator">===</span> <span class="token string">"fa fa-play"</span>
      <span class="token operator">?</span> <span class="token string">"fa fa-pause"</span>
      <span class="token operator">:</span> <span class="token string">"fa fa-play"</span> <span class="token punctuation">;</span>
  <span class="token keyword">const</span> isAuto <span class="token operator">=</span>
    document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"icon-play-pause"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> className <span class="token operator">===</span> <span class="token string">"fa fa-play"</span>
      <span class="token operator">?</span> <span class="token string">"0"</span>
      <span class="token operator">:</span> <span class="token string">"1"</span> <span class="token punctuation">;</span>
  document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"song"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> src <span class="token operator">=</span>
    <span class="token string">"https://www.youtube.com/embed/"</span> <span class="token operator">+</span>
    localStorage <span class="token punctuation">.</span> <span class="token function">getItem</span> <span class="token punctuation">(</span> <span class="token constant">SELECTED_VIDEO_ID</span> <span class="token punctuation">)</span> <span class="token operator">+</span>
    <span class="token string">"?rel=0&amp;amp;controls=0&amp;amp;showinfo=0&amp;amp;autoplay="</span> <span class="token operator">+</span>
    isAuto <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span>

document . getElementById ( "btn-play-song" ) . addEventListener ( "click" , ( event ) => {

? "fa fa-pause"

: "fa fa-play" ;

const isAuto =

? "0"

: "1" ;

"https://www.youtube.com/embed/" +

localStorage . getItem ( SELECTED_VIDEO_ID ) +

"?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=" +

isAuto ;

} )

6. Function to select previous and next song

Before going to the details of each function. We have a function to get the new position of the song

If the user next song => next song => song position increases by 1. However, if the new position exceeds the number of songs in the list => back to the first song => the new position is 0 .
If user previous song => previous song => song position subtract 1. However, if new position is less than 0 => go back to last song => new position is list length – 1.

<span class="token keyword">function</span> <span class="token function">getNewIndex</span> <span class="token punctuation">(</span> <span class="token parameter">type</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> ids <span class="token operator">=</span> localStorage <span class="token punctuation">.</span> <span class="token function">getItem</span> <span class="token punctuation">(</span> <span class="token constant">VIDEO_YOUTUBE_ID</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">split</span> <span class="token punctuation">(</span> <span class="token string">","</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">const</span> selectedID <span class="token operator">=</span> localStorage <span class="token punctuation">.</span> <span class="token function">getItem</span> <span class="token punctuation">(</span> <span class="token constant">SELECTED_VIDEO_ID</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token keyword">let</span> newIndex <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> i <span class="token operator">&lt;</span> ids <span class="token punctuation">.</span> length <span class="token punctuation">;</span> i <span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span> ids <span class="token punctuation">[</span> i <span class="token punctuation">]</span> <span class="token operator">===</span> selectedID <span class="token operator">&amp;&amp;</span> type <span class="token operator">===</span> <span class="token string">"backward"</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      newIndex <span class="token operator">=</span> i <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">;</span>
      <span class="token keyword">return</span> newIndex <span class="token operator">&lt;</span> <span class="token number">0</span> <span class="token operator">?</span> ids <span class="token punctuation">.</span> length <span class="token operator">-</span> <span class="token number">1</span> <span class="token operator">:</span> newIndex <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span> ids <span class="token punctuation">[</span> i <span class="token punctuation">]</span> <span class="token operator">===</span> selectedID <span class="token operator">&amp;&amp;</span> type <span class="token operator">===</span> <span class="token string">"forward"</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
      newIndex <span class="token operator">=</span> i <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">;</span>
      <span class="token keyword">return</span> newIndex <span class="token operator">&gt;</span> ids <span class="token punctuation">.</span> length <span class="token operator">-</span> <span class="token number">1</span> <span class="token operator">?</span> <span class="token number">0</span> <span class="token operator">:</span> newIndex <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> newIndex <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

function getNewIndex ( type ) {

const ids = localStorage . getItem ( VIDEO_YOUTUBE_ID ) . split ( "," ) ;

const selectedID = localStorage . getItem ( SELECTED_VIDEO_ID ) ;

let newIndex = 0 ;

for ( let i = 0 ; i < ids . length ; i ++ ) {

if ( ids [ i ] === selectedID && type === "backward" ) {

newIndex = i - 1 ;

return newIndex < 0 ? ids . length - 1 : newIndex ;

}

if ( ids [ i ] === selectedID && type === "forward" ) {

newIndex = i + 1 ;

return newIndex > ids . length - 1 ? 0 : newIndex ;

}

return newIndex ;

}

Next song selection function

document
  <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"btn-forward"</span> <span class="token punctuation">)</span>
  <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"click"</span> <span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token parameter">event</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> newForwardIndex <span class="token operator">=</span> <span class="token function">getNewIndex</span> <span class="token punctuation">(</span> <span class="token string">"forward"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token keyword">const</span> ids <span class="token operator">=</span> localStorage <span class="token punctuation">.</span> <span class="token function">getItem</span> <span class="token punctuation">(</span> <span class="token constant">VIDEO_YOUTUBE_ID</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">split</span> <span class="token punctuation">(</span> <span class="token string">","</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    localStorage <span class="token punctuation">.</span> <span class="token function">setItem</span> <span class="token punctuation">(</span> <span class="token constant">SELECTED_VIDEO_ID</span> <span class="token punctuation">,</span> ids <span class="token punctuation">[</span> newForwardIndex <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

    document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"song"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> src <span class="token operator">=</span>
      <span class="token string">"https://www.youtube.com/embed/"</span> <span class="token operator">+</span>
      ids <span class="token punctuation">[</span> newForwardIndex <span class="token punctuation">]</span> <span class="token operator">+</span>
      <span class="token string">"?rel=0&amp;amp;controls=0&amp;amp;showinfo=0&amp;amp;autoplay=1"</span> <span class="token punctuation">;</span>
    <span class="token keyword">await</span> <span class="token function">getInfoTheSong</span> <span class="token punctuation">(</span> ids <span class="token punctuation">[</span> newForwardIndex <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

document

. getElementById ( "btn-forward" )

. addEventListener ( "click" , async ( event ) => {

const newForwardIndex = getNewIndex ( "forward" ) ;

localStorage . setItem ( SELECTED_VIDEO_ID , ids [ newForwardIndex ] ) ;

"https://www.youtube.com/embed/" +

ids [ newForwardIndex ] +

"?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" ;

await getInfoTheSong ( ids [ newForwardIndex ] ) ;

} ) ;

Previous song selection function

document
  <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"btn-backward"</span> <span class="token punctuation">)</span>
  <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"click"</span> <span class="token punctuation">,</span> <span class="token keyword">async</span> <span class="token punctuation">(</span> <span class="token parameter">event</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> newBackwardIndex <span class="token operator">=</span> <span class="token function">getNewIndex</span> <span class="token punctuation">(</span> <span class="token string">"backward"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token keyword">const</span> ids <span class="token operator">=</span> localStorage <span class="token punctuation">.</span> <span class="token function">getItem</span> <span class="token punctuation">(</span> <span class="token constant">VIDEO_YOUTUBE_ID</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">split</span> <span class="token punctuation">(</span> <span class="token string">","</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    localStorage <span class="token punctuation">.</span> <span class="token function">setItem</span> <span class="token punctuation">(</span> <span class="token constant">SELECTED_VIDEO_ID</span> <span class="token punctuation">,</span> ids <span class="token punctuation">[</span> newBackwardIndex <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

    document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"song"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> src <span class="token operator">=</span>
      <span class="token string">"https://www.youtube.com/embed/"</span> <span class="token operator">+</span>
      ids <span class="token punctuation">[</span> newBackwardIndex <span class="token punctuation">]</span> <span class="token operator">+</span>
      <span class="token string">"?rel=0&amp;amp;controls=0&amp;amp;showinfo=0&amp;amp;autoplay=1"</span> <span class="token punctuation">;</span>
    <span class="token keyword">await</span> <span class="token function">getInfoTheSong</span> <span class="token punctuation">(</span> ids <span class="token punctuation">[</span> newBackwardIndex <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

document

. getElementById ( "btn-backward" )

const newBackwardIndex = getNewIndex ( "backward" ) ;

localStorage . setItem ( SELECTED_VIDEO_ID , ids [ newBackwardIndex ] ) ;

"https://www.youtube.com/embed/" +

ids [ newBackwardIndex ] +

"?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" ;

await getInfoTheSong ( ids [ newBackwardIndex ] ) ;

} ) ;

IV. Conclude

Here are some pictures and video results after building the code, everyone ^^

<ul><li> Application website: <a href="https://nguyenvantuan2391996.github.io/game-development/applications/music-player/home.html" target="_blank">https://nguyenvantuan2391996.github.io/game-development/applications/music-player/home.html</a></li><li> Source code: <a href="https://github.com/nguyenvantuan2391996/game-development/tree/master/applications/music-player" target="_blank">https://github.com/nguyenvantuan2391996/game-development/tree/master/applications/music-player</a></li><li> Reference: <a href="https://careerly.vn/comments/6565?utm_campaign=self-share" target="_blank">https://careerly.vn/comments/6565?utm_campaign=self-share</a></li></ul>The article is excerpted from my blog: <a href="https://tuannguyenhust.hashnode.dev/" target="_blank">https://tuannguyenhust.hashnode.dev/</a> and careerly blog: <a href="https://careerly.vn/comments/6565?utm_campaign=self-share" target="_blank">https://careerly.vn/comments/6565?utm_campaign=self-share</a>

Share the news now

Source : Viblo

Build a youtube music player application with JavaScript

I. About Music Player

II. Source code structure

III. Build apps

1. Interface

2. Generate Youtube API key

3. Handling Youtube APIs

4. Song search function

5. Play/pause function

6. Function to select previous and next song

IV. Conclude

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers