I am currently working on developing a unique music player from scratch without utilizing the "controls" tag within the audio element. My goal is to build something akin to the SCM Music Player. I've chosen not to use the SCM-provided player due to its excessive space consumption on my website, difficulty in hiding/showing elements enclosed within a script tag, and negative impact on Y-Slow speed.
Visual representation of my envisioned design:
https://i.sstatic.net/l359S.jpg
Here is what I have accomplished 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 extensively researched similar queries on stackoverflow but haven't found satisfactory solutions to my specific requirements.
How can I retrieve the title of the playing source file?(Updated)Is it possible to implement functionality for the "left" and "right" buttons to switch between sources?
How can I integrate a volume slider into the player?
Is there a method to incorporate a timeline displaying the current duration of the played audio?
Lastly, how do I showcase both the current playback time and total duration of the audio track being played?
Guidance needed on leveraging the currentTime and duration properties for this purpose.