How to make a custom music player based on an audio tag with HTML, CSS, and JS

Question

I am trying to make a custom music player without using the "controls" tag inside the audio tag. First of all, I want to create something similar to the SCM Music Player. I won't use the one provided by SCM, because it somehow uses a large amount of space when added to my website, I haven't figured out how to hide/show it since it is all within a script tag, and it really has an impact on the Y-Slow speed.

Here is an image of what I would like to create:

And this is what I have so far: https://jsfiddle.net/e13gs8qg/6/ (Updated)

HTML: (Updated)

<audio id="player"  class="mediaplayerclass">
   <source title="Fruity Loops Own Track Copy" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3" />
   <source title="Fruity Loops Own Track Copy 2" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3" />
</audio>

<div class="playermenuwrapper">
    <button id="previoussong" class="previoussongclass">
        Previous
    </button>
    <button id="playpause" class="playpauseclass">
        play
    </button>
    <button id="nextsong" class="nextsongclass">
        Next
    </button>
    <div id="songtitle" class="titleclass"></div>
</div>

CSS:

.playermenuwrapper {
  text-align:center;
  margin: 0px auto;
  max-width:100%;
}
.previoussongclass {
  display:inline-block;
  width:80px;
}

.playpauseclass {
  display:inline-block;
  width:80px;
}

.nextsongclass {
  display:inline-block;
  width:80px;
}

.mediaplayerclass {
  display:block;
  width:150px;
  height:50px;
  margin: 0px auto;
}
.titleclass {
  display:inline-block;
  text-align:center;
  margin: 0px auto;
  width:250px;
}

JS: (Updated)

window.player = document.getElementById('player');
var playpause = document.getElementById('playpause');
var songtitle = document.getElementById('songtitle');
changesongtitle();
player.volume = 0.3;

playpause.onclick = function () {

    if (player.paused) {
        changesongtitle();
        player.play();
        playpause.innerHTML = 'pause';

    } else {
        player.pause();
        playpause.innerHTML = 'play';
        changesongtitle();
    }
}

function changesongtitle() {

    var songtitle = document.getElementById('songtitle');

    if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3") {
    songtitle.innerHTML = "Fruity Loops Own Track Copy";
    }

    if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3") {
    songtitle.innerHTML = "Fruity Loops Own Track Copy 2";
    }

}

I have looked at many questions on stackoverflow on this, but I still haven't found answers to what I'm trying to do.

• How can I retrieve the title of the playing source file? (Updated)

• How can I code the "left" and "right" buttons to change the source files?

• How can I create a volume slider?

• How can I create a timeline of the current duration of the audio being played?

• And lastly, how can I display current time and the full duration of the audio being played?

How to use currentTime and duration properties in this.

Answer 1

What I understand is you want to build a custom library for your specific use case. I would suggest you to try out Mediaelement.js. It has a lot of features and also it works on almost all browsers. Also, few things like changing songs based on next and prev can be added on top of this library as this library is open source.

Even I have used it and created some custom features on top of it. https://github.com/hkasera/mediaelement-markers

But before all this you need to understand how HTML5 audio or video works. For that I would suggest you to read the following articles :

1. http://html5doctor.com/html5-audio-the-state-of-play/
2. http://www.html5rocks.com/en/tutorials/webaudio/intro/
3. https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Cross-browser_audio_basics