如何使用HTML,CSS和JS制作基于音频标签的自定义音乐播放器

我正在尝试制作自定义音乐播放器而不使用音频标签内的"controls"标签.首先,我想创建类似于SCM音乐播放器的东西.我不会使用SCM提供的那个,因为它在添加到我的网站时以某种方式使用了大量的空间,我还没想出如何隐藏/显示它,因为它都在一个脚本标签内,它真的对Y-Slow速度有影响.

这是我想要创建的图像:

这是我到目前为止:https ://jsfiddle.net/e13gs8qg/6/ (更新)

HTML :(已更新)

    
        Previous
    
    
        play
    
    
        Next
    
    

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 :( 更新)

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";
    }

}

我已经在stackoverflow上查看了很多关于此问题的问题,但我仍然没有找到我想要做的答案.

如何检索播放源文件的标题？ (更新)

如何编写"左"和"右"按钮来更改源文件？

如何创建音量滑块？

如何创建正在播放的音频当前持续时间的时间轴？

最后,我如何显示当前时间和正在播放的音频的整个持续时间？

如何在此使用currentTime和duration属性.