arrow_back
View code

<div class="cdt-container cdt-margin-top-xxlg">
        <div class="player">
          <div class="control">
            <svg class="icon icon-play" viewBox="0 0 24 24"><polygon points="0 0 24 12 0 24 0 0" fill="currentColor"/></svg>
            <svg class="icon icon-pause hidden" xmlns="http://www.w3.org/2000/svg" width="13.47" height="23.25" viewBox="0 0 13.47 23.25"><line x1="2" x2="2" y2="23.25" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="4"/><line x1="11.47" x2="11.47" y2="23.25" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="4"/></svg>
          </div>
          <div class="progress">
            <div class="progress-indicator"></div>
            <div class="title">Some cool title</div>
            <div class="overlay-title">
              <div class="title">
                Some cool title
              </div>
            </div>
          </div>
          <div class="control-right">
            <div class="duration"></div>
            <div class="reload">
              <svg xmlns="http://www.w3.org/2000/svg" width="19.26" height="21.05" viewBox="0 0 19.26 21.05"><path d="M3.37,12.93A8.63,8.63,0,1,0,12,4.3" transform="translate(-2.37 -1.51)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="2"/><polygon points="10.45 0 5.61 2.79 10.45 5.58 10.45 0" fill="currentColor"/></svg>
            </div>
          </div>
        </div>
      </div>
                        
Copy HTML

/*
 * File: _music-player.scss
 * Location /src/scss/components
 * Music player component
 */

:root {
    --player-color: var(--primary-color);
    --player-height: 50px;
}

.player {
    height: var(--player-height);
    border: 2px solid var(--player-color);
    width: 100%;
    display: flex;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    color: var(--player-color);

    .icon {
        width: 14px;
        height: 17px;
        transition: transform 0.2s;

        &:hover {
            transform: scale(1.1);
        }

        &.hidden {
            display: none;
        }
    }

    .control,
    .control-right {
        color: #fff;
        width: var(--player-height);
        padding: 10px;
        background: var(--player-color);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .control-right {
        background: transparent;

        .reload {
            display: none;
            color: var(--player-color);

            &.visible {
                display: flex;
                color: var(--player-color);
            }
        }
    }

    .duration {
        background: transparent;
        color: var(--player-color);
        font-size: 12px;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        &.hidden {
            display: none;
        }
    }

    .progress {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        >.title {
            position: relative;
            display: flex;
            align-items: center;
            left: 0;
            top: 0;
            width: 200%;
            height: 100%;
            justify-content: center;
            pointer-events: none;
        }

        .overlay-title {
            position: absolute;
            overflow: hidden;
            left: 0;
            top: 0;
            width: 0;
            height: 100%;

            .title {
                position: relative;
                display: flex;
                align-items: center;
                left: 0;
                top: 0;
                width: 200%;
                height: 100%;
                color: #fff;
                justify-content: center;
                pointer-events: none;
            }
        }

        .progress-indicator {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            transform-origin: 0 50%;
            transform: scaleX(0);
            height: 100%;
            background: var(--player-color);
        }
    }
}
                        
Copy SCSS

/*
 * File: music-player.js
 * Location /src/js/components
 * Music player component
*/

class AudioPlayer {
    constructor(selector = '.player', url, title) {
        this.player = document.querySelector('.player');
        this.player.querySelectorAll('.title').forEach(t => t.innerHTML = title);
        this.control = this.player.querySelector('.control');
        this.duration = this.player.querySelector('.duration');
        this.reload = this.player.querySelector('.reload');
        this.progress = this.player.querySelector('.progress');
        this.controlRight = this.player.querySelector('.control-right');
        this.progressIndicator = this.player.querySelector('.progress-indicator');
        this.titleHighlightProgressInd = this.player.querySelector('.overlay-title');
        this.durationValue = null;
        this.audioObj = null;
        this.playing = false;

        this.initialize(url);

    }
    initialize(url) {
        this.audioObj = new Audio(url);
        this.player.appendChild(this.audioObj);
        this.titleHighlightProgressInd.querySelector('.title').style.width = `${this.progress.offsetWidth}px`;
        this.initializeEventListeners();

    }
    initializeEventListeners() {
        window.addEventListener('resize', () => {
            this.titleHighlightProgressInd.querySelector('.title').style.width = `${this.progress.offsetWidth}px`;
        });
        this.reload.addEventListener('click', e => {
            this.audioObj.currentTime = 0;
            this.audioObj.play();
        });
        this.controlRight.addEventListener('mouseover', e => {
            this.reload.classList.add('visible');
            this.duration.classList.add('hidden');
        });
        this.controlRight.addEventListener('mouseout', e => {
            this.reload.classList.remove('visible');
            this.duration.classList.remove('hidden');
        });
        this.progress.addEventListener('click', (e) => {
            const progress = (e.pageX - this.progress.getBoundingClientRect().x) / this.progress.getBoundingClientRect().width;
            this.audioObj.currentTime = progress * this.durationValue;
            this.control.querySelectorAll('.icon').forEach(icon => icon.classList.add('hidden'));
            this.control.querySelector('.icon-pause').classList.remove('hidden');
          this.playing = true;
            this.audioObj.play();
        });
        this.audioObj.addEventListener("timeupdate", () => {
            this.durationValue = parseInt(this.audioObj.duration);
            var currentTime = parseInt(this.audioObj.currentTime),
                timeLeft = this.durationValue - currentTime,
                s, m;
            this.progressIndicator.style.transform = `scaleX(${currentTime/this.durationValue})`;
            this.titleHighlightProgressInd.style.width = ((currentTime / this.durationValue) * 100) + '%';


            s = timeLeft % 60;
            m = Math.floor(timeLeft / 60) % 60;

            s = s < 10 ? "0" + s : s;
            m = m < 10 ? "0" + m : m;

            this.duration.innerHTML = m + ":" + s;

        }, false);
        this.audioObj.addEventListener('loadedmetadata', () => {
            this.durationValue = parseInt(this.audioObj.duration);
            var s = this.durationValue % 60;
            var m = Math.floor(this.durationValue / 60) % 60;

            s = s < 10 ? "0" + s : s;
            m = m < 10 ? "0" + m : m;

            this.duration.innerHTML = m + ":" + s;
        }, false);
        this.control.addEventListener('click', e => {
            this.control.querySelectorAll('.icon').forEach(icon => icon.classList.add('hidden'));
            if (!this.playing) {
                this.play();
                this.control.querySelector('.icon-pause').classList.remove('hidden');

            } else {
                this.pause();
                this.control.querySelector('.icon-play').classList.remove('hidden');
            }
            this.playing = !this.playing;
        })
    }
    play() {
        this.audioObj.play();
    }
    pause() {
        this.audioObj.pause();
    }
}

const player = new AudioPlayer('.player', 'https://kodhus.com/bensound-energy.mp3', 'amazing song is playing now');
Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.