cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="player">
    <div class="current-track clearfix">
        <div class="track-meta">
            <h3 class="track-artist"></h3>
            <h2 class="track-name"></h2>
        </div>
		<div class="canvas clearfix">
			<audio crossorigin="anonymous" id="mp3" src=""></audio>
			<canvas id="canvas" width="256" height="256"></canvas>
			<div class="overlay" id="play"></div>
			<input type="range" name="volume" id="volume" value="10">
		</div>
        <div class="controls">
            <div class="shuffle" id="shuffle"><i class="material-icons">shuffle</i></div>
            <div class="previous" id="previous"><i class="material-icons">skip_previous</i></div>
            <div class="next" id="next"><i class="material-icons">skip_next</i></div>
            <div class="repeat" id="repeat"><i class="material-icons">repeat</i></div>
        </div>
    </div>
    <div class="track-list clearfix" id="tracklist">
        <h2 class="track-list-title">
            <div class="closer" id="tracklist-control"></div>
            Tracklist
        </h2>
    </div>
</div>
            
          
!
            
              body {
    margin: 0;
    background: #e3e3e3;
    font-family: 'Raleway', sans-serif;
}

*, *:before, *:after {
    box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
    clear: both;
    content: '';
    display: table;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

        
$pixel: 3px;
$colour: #333;
.player {
    position: relative;
    width: 320px;
    background: #fff;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    min-height: 100px;
    margin: 16px auto;
    overflow: hidden;
    padding-bottom: 60px;
    
    .current-track {
        text-align: center;
        padding: 32px 0 16px 0;
    }
    
    .track-list {
        position: absolute;
        top: calc(100% - 60px);
        padding: 16px;
        background: #f3f3f3;
        width: 100%;
        height: 100%;
        box-shadow: 0 -2px 3px rgba(0,0,0,0.15);
        overflow-y: visible;
        transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        
        &.active {
            top: 0;
            overflow: auto;
            
            .closer:before {
                box-shadow: // Top row
                            ($pixel * -3) ($pixel * -3) 0 0 $colour,
                            ($pixel * -2) ($pixel * -3) 0 0 transparent,
                            ($pixel * 2) ($pixel * -2) 0 0 $colour,
                            ($pixel * 0) ($pixel * -3) 0 0 transparent,
                            ($pixel * 1) ($pixel * -1) 0 0 $colour,
                            ($pixel * 2) ($pixel * -3) 0 0 transparent,
                            ($pixel * 3) ($pixel * -3) 0 0 $colour,

                            // Middle row
                            ($pixel * 2) ($pixel * 2) 0 0 $colour,
                            ($pixel * -2) ($pixel * 0) 0 0 transparent,
                            ($pixel * 1) ($pixel * 1) 0 0 $colour,
                            // ($pixel * 0) ($pixel * 0) 0 0 $colour,
                            ($pixel * -1) ($pixel * 1) 0 0 $colour,
                            ($pixel * 2) ($pixel * 0) 0 0 transparent,
                            ($pixel * -2) ($pixel * 2) 0 0 $colour,

                            // Bottom row
                            ($pixel * -3) ($pixel * 3) 0 0 $colour,
                            ($pixel * -2) ($pixel * 3) 0 0 transparent,
                            ($pixel * -1) ($pixel * -1) 0 0 $colour,
                            ($pixel * 0) ($pixel * 3) 0 0 transparent,
                            ($pixel * -2) ($pixel * -2) 0 0 $colour,
                            ($pixel * 2) ($pixel * 3) 0 0 transparent,
                            ($pixel * 3) ($pixel * 3) 0 0 $colour;
            }
        }
        
        .closer {
            position: absolute;
            top: 10px;
            right: 10px;
            height: 40px;
            width: 40px;
            cursor: pointer;
            transition: background 0.3s;
            
            &:hover {
                background: rgba(0,0,0,0.1);
            }

            &:before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate3d(-50%, -50%, 0px);
                height: $pixel;
                width: $pixel;
                transition: box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                            width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
                            height 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
                background: $colour;
                border: none;
                margin: 0;
                border-radius: 0;
                box-shadow: // Top row
                            ($pixel * -3) ($pixel * -2) 0 0 $colour,
                            // ($pixel * -2) ($pixel * -2) 0 0 $colour,
                            ($pixel * -1) ($pixel * -2) 0 0 $colour,
                            ($pixel * 0) ($pixel * -2) 0 0 $colour,
                            ($pixel * 1) ($pixel * -2) 0 0 $colour,
                            ($pixel * 2) ($pixel * -2) 0 0 $colour,
                            ($pixel * 3) ($pixel * -2) 0 0 $colour,

                            // Middle row
                            ($pixel * -3) ($pixel * 0) 0 0 $colour,
                            // ($pixel * -2) ($pixel * 0) 0 0 $colour,
                            ($pixel * -1) ($pixel * 0) 0 0 $colour,
                            // ($pixel * 0) ($pixel * 0) 0 0 $colour,
                            ($pixel * 1) ($pixel * 0) 0 0 $colour,
                            ($pixel * 2) ($pixel * 0) 0 0 $colour,
                            ($pixel * 3) ($pixel * 0) 0 0 $colour,

                            // Bottom row
                            ($pixel * -3) ($pixel * 2) 0 0 $colour,
                            // ($pixel * -2) ($pixel * 2) 0 0 $colour,
                            ($pixel * -1) ($pixel * 2) 0 0 $colour,
                            ($pixel * 0) ($pixel * 2) 0 0 $colour,
                            ($pixel * 1) ($pixel * 2) 0 0 $colour,
                            ($pixel * 2) ($pixel * 2) 0 0 $colour,
                            ($pixel * 3) ($pixel * 2) 0 0 $colour
            }
        }
        
        .track-list-title {
            margin: 0 0 16px 0;
        }
        
        .track {
            position: relative;
            float: left;
            width: 100%;
            padding: 0 16px 0 48px;
            box-shadow: 0 2px 3px rgba(0,0,0,0.3);
            background: #fff;
            height: 48px;
            line-height: 48px;
            cursor: pointer;
            transition: background 0.3s, box-shadow 0.3s;
            
            &:not(:last-child) {
                margin-bottom: 8px;
            }
            
            i {
                color: #000;
                line-height: 48px;
                position: absolute;
                left: 12px;
                pointer-events: none;
            }
            
            span {
                position: relative;
                pointer-events: none;
            }
            
            &:hover {
                background: rgba(0,0,0,0.05);
            }
            
            &.active,
            &:active {
                background: rgba(0,0,0,0.025);
                box-shadow: 0 3px 5px rgba(0, 204, 136, 1);
            }
        }
    }
    
    h2, h3 {
        font-weight: 400;
    }
    
    .track-meta {
        padding: 0 0 32px 0;
        
        .track-artist {
            margin: 0;
            font-size: 16px;
        }
        
        .track-name {
            margin: 0;
            font-size: 26px;
        }
    }
    
    .controls {
        position: relative;
        width: 100%;
        text-align: center;
        padding-top: 16px;
        
        > div {
            display: inline-block;
            margin: 0 8px;
            cursor: pointer;
            transition: background 0.3s;
            
            i {
                font-size: 32px;
                padding: 8px;
                transition: color 0.3s;
                pointer-events: none;
            }
            
            &:hover {
                background: rgba(0,0,0,0.2);
            }
            
            &.active,
            &:active {
                background: rgba(0,0,0,0.1);
            
                i {
                    color: #0c8;
                }
            }
        }
    }

    .canvas,
    canvas {
        position: relative;
        margin: 0 auto;
        height: 256px;
        width: 256px;
    }

    .canvas {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        
        .overlay {
            background: rgba(0, 0, 0, 0.2);
            cursor: pointer;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            width: 100%;

            &:after,
            &:before {
                content: '';
                left: 50%;
                position: absolute;
                top: 50%;
            }

            &:after {
                border: 50px solid transparent;
                border-left-color: rgba(0, 0, 0, 0.2);
                border-left-width: 75px;
                box-sizing: content-box;
                height: 0;
                -webkit-transform: translate(-25px, -50px);
                transform: translate(-25px, -50px);
                -webkit-transition: border-left-color 0.3s;
                transition: border-left-color 0.3s;
                width: 0;
            }

            &:before {
                border: 10px solid rgba(0, 0, 0, 0.2);
                border-radius: 100%;
                height: 140px;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
                width: 140px;
            }

            &[playing='playing']:after,
            &:hover:after {
                border-left-color: rgba(0, 0, 0, 0.1);
            }

            &[playing='playing']:before,
            &:hover:before {
                border-color: rgba(0, 0, 0, 0.1);
            }

            &[playing='playing'] {
                opacity: 0;
            }

            &[playing='playing']:hover {
                opacity: 1;
            }

            &[playing='playing']:after {
                border-right-color: rgba(0, 0, 0, 0.1);
                border-width: 10px;
                height: 80px;
                width: 30px;
            }
        }

        input[type=range] {
            -webkit-appearance: none;
            margin: 0;
            opacity: 0;
            padding: 10px 0;
            position: absolute;
            -webkit-transform-origin: 0 0 0;
            transform-origin: 0 0 0;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            width: 100%;

            &#volume {
                right: 0;
                top: 0;
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
            }

            &#buffer {
                left: 0;
                bottom: calc(100% + 10px);
            }

            &:focus {
                outline: none;
            }

            &::-webkit-slider-runnable-track {
                animation: 0.3s;
                background: rgba(0, 0, 0, 0.2);
                border-radius: 1em;
                cursor: pointer;
                height: 10px;
                width: 100%;
            }

            &::-webkit-slider-thumb {
                -webkit-appearance: none;
                background: #999;
                box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
                border-radius: 100%;
                cursor: pointer;
                height: 16px;
                margin-top: -3px;
                width: 16px;
            }

            &::-moz-range-track {
                animation: 0.3s;
                background: rgba(0, 0, 0, 0.2);
                border-radius: 1em;
                cursor: pointer;
                height: 10px;
                width: 100%;
            }

            &::-moz-range-thumb {
                background: #999;
                box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
                border-radius: 100%;
                cursor: pointer;
                height: 16px;
                width: 16px;
            }
        }

        input[type=range]:focus,
        .overlay:hover ~ input[type=range],
        input[type=range]:hover {
            opacity: 1;
        }
    }
}
            
          
!
            
              class Helper {
    static get click(){
        return (navigator.userAgent.match(/iPad/i)) ? 'touchstart' : 'click';
    }
    
    static objectToMatrix(obj, cols) {
        let matrix = [],
            i = 0,
            len = obj.length,
            k = -1;
        while (i < len) {
            if (i % cols === 0) {
                k++;
                matrix[k] = [];
            }
            matrix[k].push(obj[i]);
            i++;
        }
        return matrix;
    }

    static render(fps, render) {
        let fpsInterval, startTime, now, then, elapsed;

        fpsInterval = 1000 / fps;
        then = Date.now();
        startTime = then;

        (function animate() {
            requestAnimationFrame(animate);
            now = Date.now();
            elapsed = now - then;
            if (elapsed > fpsInterval) {
                then = now - (elapsed % fpsInterval);
                render();
            }
        })();
    }
    
    static hasClass(element, cls){
		return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }
    
    static addClass(el, className) {
        if(el instanceof HTMLElement){
            if (el.classList) {
                el.classList.add(className);
            } else {
                el.className += ' ' + className;
            }
        } else {
            for(let i = 0, len = el.length; i < len; i++){
                if (el[i].classList) {
                    el[i].classList.add(className);
                } else {
                    el[i].className += ' ' + className;
                }
            }
        }
    }

    static removeClass (el, className) {
        if(el instanceof HTMLElement){
            if (el.classList) {
                el.classList.remove(className);
            } else {
                el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
            }
        } else {
            for(let i = 0, len = el.length; i < len; i++){
                if (el[i].classList) {
                    el[i].classList.remove(className);
                } else {
                    el[i].className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
                }
            }
        }
    }
    
    static closest(el, selector) {
        let matchesFn; 
        [
            'matches',
            'webkitMatchesSelector',
            'mozMatchesSelector',
            'msMatchesSelector',
            'oMatchesSelector'
        ].some(function(fn) {
            if (typeof document.body[fn] == 'function') {
                matchesFn = fn;
                return true;
            }
            return false;
        })

        let parent;
        while (el) {
            parent = el.parentElement;
            if (parent && parent[matchesFn](selector)) {
                return parent;
            }
            el = parent;
        }

        return null;
    }
}

class MusicPlayer {
    constructor(ctx, opts) {
        this.ctx = ctx;
        this.divider = this.constructor.DEFAULTDIVIDER
        this.filter = this.constructor.DEFAULTFILTER;
        
        if(typeof opts.tracks === 'object'){
            this.makeTracks(opts.tracks);
        }
        this.track = document.querySelector('.track');
        
        this.audioSetup()
            .tracklistControls()
            .loadTrack()
            .render()
            .playCurrentTrack()
            .changeVolume()
            .changeTrack()
            .events();
        if(typeof opts.autoplay === 'boolean' && opts.autoplay){
            this.playTrack();
        }
    }
    
    static get DEFAULTDIVIDER() {
        return 32;
    }
    
    static get DEFAULTFILTER() {
        return 0;
    }
    
    get ctx() {
        return this._ctx;
    }
    
    set ctx(val) {
        this._ctx = val;
    }
    
    get divider() {
        return this._divider;
    }
    
    set divider(val) {
        this._divider = val;
    }
    
    get filter() {
        return this._filter;
    }
    
    set filter(val) {
        this._filter = val;
    }
    
    get w(){
        return this.ctx.canvas.width / this.divider;
    }
    
    get h(){
        return this.ctx.canvas.height / this.divider;
    }
    
    get audio() {
        return this._audio;
    }
    
    set audio(val) {
        this._audio = val;
    }
    
    get track() {
        return this._track;
    }
    
    set track(val) {
        this._track = val;
    }
    
    get tracks(){
        return this._tracks = document.querySelectorAll('.track');
    }
    
    set tracks(val){
        this._tracks = val;
    }
    
    get shuffling() {
        return this._shuffling;
    }
    
    set shuffling(val) {
        this._shuffling = val;
    }
    
    get repeating() {
        return this._repeating;
    }
    
    set repeating(val) {
        this._repeating = val;
    }
    
    audioSetup(){
        let audioCtx = new(window.AudioContext || window.webkitAudioContext)();
        let audio = document.getElementById('mp3');
        let src = audioCtx.createMediaElementSource(audio);
        let analyser = audioCtx.createAnalyser();
        let data = new Uint8Array(analyser.frequencyBinCount);
        
        src.crossOrigin = 'anonymous';
		src.connect(analyser);
		analyser.connect(audioCtx.destination);
        
        this.audio = {
            ctx: audioCtx,
            el: audio,
            src: src,
            analyser: analyser,
            data: data
        };
        
        return this;
    }
    
    render(){
        let Player = this;
        Helper.render(60, function(){
            if(!Player.audio.el.paused){
                Player.audio.analyser.getByteFrequencyData(Player.audio.data);
                let data = Helper.objectToMatrix(Player.audio.data, Player.divider);
                let y = data.length, x = Player.divider;
                while (y--) {
                    while (x--) {
                        let alpha = data[y][x];
                        if ((alpha - Player.filter) > 0) {
                            alpha = (alpha - Player.filter) / 255;
                        } else {
                            alpha = 0;
                        }
                        Player.ctx.clearRect(x * Player.w, y * Player.h, Player.w, Player.h);
                        Player.ctx.fillStyle = 'rgba(0,136,204,' + alpha + ')';
                        Player.ctx.fillRect(x * Player.w, y * Player.h, Player.w, Player.h);
                    }
                    x = Player.divider;
                }
            }
        });
        return this;
    }
    
    playCurrentTrack(){
		let playing = false,
            playel = document.getElementById('play'),
            Player = this;
        
		playel.addEventListener(Helper.click, function(e) {
            if(Helper.hasClass(Player.track, 'active')){
                Player.pauseTrack();
            } else {
                Player.playTrack();
            }
		});
        
        return Player;
    }
    
    changeVolume() {
        let volume = document.getElementById('volume'), Player = this;
		volume.addEventListener('input', function() {
		    Player.audio.el.volume = this.value / 100;
		});
		volume.addEventListener('change', function() {
		    Player.audio.el.volume = this.value / 100;
		});
        
        return this;
    }
    
    tracklistControls(){
        let control = document.getElementById('tracklist-control');
        let tracklist = document.getElementById('tracklist');
        control.addEventListener(Helper.click, function(e){
            let parent = Helper.closest(e.target, '.track-list');
            if(Helper.hasClass(parent, 'active')){
                Helper.removeClass(parent, 'active');
            } else {
                Helper.addClass(parent, 'active');
            }
        });
        return this;
    }
    
    makeTrack(track, i){
        let t = document.createElement('div');
        t.setAttribute('track-number', i);
        t.setAttribute('audio-src', track.src);
        t.setAttribute('artist', track.artist);
        Helper.addClass(t, 'track');
        
        let icon = document.createElement('i');
        Helper.addClass(icon, 'material-icons');
        icon.appendChild(document.createTextNode('play_circle_outline'));
        
        let name = document.createElement('span');
        name.appendChild(document.createTextNode(track.name));
        
        t.appendChild(icon);
        t.appendChild(name);
        
        return t;
    }
    
    makeTracks(tracks){
        let tracklist = document.querySelector('.track-list');
        for(let i = 0, len = tracks.length; i < len; i++){
            tracklist.appendChild(this.makeTrack(tracks[i], i));
        }
        this.tracks = tracks;
    }
    
    changeTrack(){
		let Player = this;
        for(let i = 0, len = Player.tracks.length; i < len; i++){
            Player.tracks[i].addEventListener(Helper.click, function(e) {
                if(Helper.hasClass(e.target, 'track')){
                    if(Player.track != e.target){
                        Player.track = e.target;
                    }

                    if(Helper.hasClass(e.target, 'active')){
                        Player.pauseTrack();
                    } else {
                        Player.loadTrack(true);
                        Helper.removeClass(Helper.closest(e.target, '.track-list'), 'active');
                    }
                }
                e.stopPropagation();
                return false;
            });
        }
        
        return this;
    }
    
    playPreviousTrack(){
        let current = parseInt(this.track.getAttribute('track-number'));
        let previous = (current <= 0) ? this.tracks.length - 1 : current - 1;
        this.track = this.tracks[previous];
        this.loadTrack(true);
        
        return this;
    }
    
    playNextTrack(){
        let current = parseInt(this.track.getAttribute('track-number'));
        let next = (current > this.tracks.length) ? 0 : current + 1;
        this.track = this.tracks[next];
        this.loadTrack(true);
        
        return this;
    }
    
    shuffle(){
		let tracknumber = Math.floor((Math.random() * this.tracks.length));
        while(tracknumber == parseInt(this.track.getAttribute('track-number'))){
            tracknumber = Math.floor((Math.random() * this.tracks.length));
        }
        this.track = this.tracks[tracknumber];
        this.loadTrack(true);
        
        return this;
    }
    
    loadTrack(autoplay){
        this.audio.el.removeAttribute('src');
        this.audio.el.setAttribute('src', this.track.getAttribute('audio-src'));
        // this.audioSetup();
        
        let artist = document.querySelector('.track-artist');
        let name = document.querySelector('.track-name');
        
        artist.innerText = this.track.getAttribute('artist');
        name.innerText = this.track.querySelector('span').innerText;
        
        if(typeof autoplay === 'boolean' && autoplay){
            this.playTrack();
        }
        
        return this;
    }
    
    playTrack(){
        Helper.removeClass(this.tracks, 'active');
        let icons = document.getElementById('tracklist').querySelectorAll('.material-icons');
        for(let j = 0, jlen = icons.length; j < jlen; j++){
            icons[j].innerHTML = 'play_circle_outline';
        }
        
        Helper.addClass(this.track, 'active');
        this.track.querySelector('.material-icons').innerHTML = 'pause_circle_outline';
        this.audio.el.play();
        this.audio.el.crossOrigin = 'anonymous';
        this.audio.el.volume = volume.value / 100;
        document.getElementById('play').setAttribute('playing', 'playing');
        
        let Player = this;
        this.audio.el.addEventListener('ended', function(){
            Player.audio.el.currentTime = 0;
            Player.audio.el.pause();
            if(Player.shuffling){
                Player.shuffle();
            } else {
                if(parseInt(Player.audio.el.getAttribute('track-number')) < Player.tracks.length){
                    Player.playNextTrack();
                } else {
                    if(Player.repeating){
                        Player.playNextTrack();
                    }
                }
            }
        });
    }
    
    pauseTrack(){
        Helper.removeClass(this.track, 'active');
        this.track.querySelector('.material-icons').innerHTML = 'play_circle_outline';
        this.audio.el.pause();
        document.getElementById('play').removeAttribute('playing');
        
        return this;
    }
    
    events(){
        let Player = this;
        document.querySelector('.shuffle').addEventListener(Helper.click, function(e){
            Helper.removeClass(document.querySelectorAll('.controls div'), 'active');
            Player.repeating = false;
            if(Player.shuffling){
                Player.shuffling = false;
            } else {
                Player.shuffling = true;
                Helper.addClass(e.target, 'active');
            }
        });
        document.querySelector('.repeat').addEventListener(Helper.click, function(e){
            Helper.removeClass(document.querySelectorAll('.controls div'), 'active');
            Player.shuffling = false;
            if(Player.repeating){
                Player.repeating = false;
            } else {
                Player.repeating = true;
                Helper.addClass(e.target, 'active');
            }
        });
        document.querySelector('.next').addEventListener(Helper.click, function(){
            Player.shuffling = false;
            Player.playNextTrack();
        });
        document.querySelector('.previous').addEventListener(Helper.click, function(){
            Player.shuffling = false;
            Player.playPreviousTrack();
        });
    }
}

window.onload = function(){
    let tracklist = [
        {
            src: 'https://ia801703.us.archive.org/1/items/Jerryc-CanonRock/01-CanonRock.mp3',
            name: 'Canon Rock',
            artist: 'JerryC'
        },
        {
            src: 'https://ia801703.us.archive.org/0/items/Acdc-Thunderstruck/A1-Thunderstruck_01.mp3',
            name: 'Thunderstruck',
            artist: 'AC/DC'
        },
        {
            src: 'https://ia700408.us.archive.org/29/items/ToZanarkand/FinalFantasyX-ToZanarkandpianoVersion.mp3',
            name: 'To Zanarkand',
            artist: 'Nobuo Uematsu'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/nobuo-uematsu-the-promise.mp3',
            name: 'The Promise',
            artist: 'Nobuo Uematsu'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/dunderpatrullen-singularity.mp3',
            name: 'Singularity',
            artist: 'Dunderpatrullen'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/lol-bit-rush.mp3',
            name: 'Bit Rush',
            artist: 'League Of Legends'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/lol-worlds-collide.mp3',
            name: 'World\'s Collide',
            artist: 'League Of Legends'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/hatsune-miku-secret-police.mp3',
            name: 'Secret Police',
            artist: 'Hatsune Miku'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/hatsune-miku-senbonzakura.mp3',
            name: 'Senbonzakura',
            artist: 'Hatsune Miku'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/hatsune-miku-talent-shredder.mp3',
            name: 'Talent Shredder',
            artist: 'Hatsune Miku'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/one-punch-man-opening-1.mp3',
            name: 'Hero',
            artist: 'One Punch Man'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/planet-ruler/44k_dainanaiseki.mp3',
            name: 'Intro Sequence',
            artist: 'Planet Ruler'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/planet-ruler/44k_boss.mp3',
            name: 'Boss Fight',
            artist: 'Planet Ruler'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/planet-ruler/battle_lastboss1st.mp3',
            name: 'Last Boss Fight 1',
            artist: 'Planet Ruler'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/planet-ruler/battle_lastboss2nd.mp3',
            name: 'Last Boss Fight 2',
            artist: 'Planet Ruler'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/planet-ruler/battle_zombieboss.mp3',
            name: 'Zombie Boss Fight',
            artist: 'Planet Ruler'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/planet-ruler/Battle3.mp3',
            name: 'Battle 3',
            artist: 'Planet Ruler'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/planet-ruler/Battle8.mp3',
            name: 'Battle 8',
            artist: 'Planet Ruler'
        },
        {
            src: 'https://cdn.zekken.rocks/mp3/planet-ruler/uta96_final_loud_3.mp3',
            name: 'Outro',
            artist: 'Planet Ruler'
        }
    ];
    let ctx = document.getElementById('canvas').getContext('2d');
    let player = new MusicPlayer(ctx, {
        tracks: tracklist
    });
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console