如何使用香草javascript制作音频播放器

我试图使一个音频播放器，显示的歌曲标题，艺术家姓名和歌曲封面。 我有32首歌曲要添加到该音乐播放器中，因此我还尝试添加“下一个/上一个”按钮，并在播放歌曲时将“播放”按钮切换到“暂停”按钮

我是javascript新手，所以我不知道如何在不使用Jquery或库的情况下做到这一点。 谢谢你的帮助

这是我代码的链接

*{
填充：0；
保证金：0；
框大小：边框框；
}
身体{
宽度：100vw；
高度：100vh；
背景图像：线性梯度（至顶部，#a18cd18a 0%，#fbc2eb88 100%）；
背景重复：无重复；
背景尺寸：包含；
}
.顶{
宽度：100%；
高度：3em；
边缘底部：5em；
显示：网格；
网格模板列：1fr自动；
}
.玩家{
显示：网格；
网格模板列：自动1fr；
网格间距：0.75em；
}
.player>div{
自对准：居中；
}
.songCover{
自我辩护：正确；
高度：50px；
宽度：50px；
/*转换：翻译（-50%，-50%）*/
}
.songCover>img{
宽度：50px；
高度：自动；
}
.关于{
高度：50px；
显示：网格；
网格模板列：1fr；
网格模板行：1fr 1fr；
}
.歌曲名称{
宽度：125px；
字体系列：无衬线；
字体大小：正常；
字体大小：20px；
字母间距：0.02em；
颜色：#c80028；
/*转换：翻译（-50%，-50%）*/
}
.艺术家{
宽度：125px；
字体系列：无衬线；
字体大小：正常；
字体大小：14px；
字母间距：0.025em；
颜色：#c80028；
自我对齐：结束；
/*转换：翻译（-50%，-50%）*/
}
.playerButtons{
显示：网格；
网格模板列：重复（3，1fr）；
对齐项目：居中；
证明项目：中心；
最大宽度：275px；
/*转换：翻译（-50%，-50%）*/
}
钮扣{
背景：无；
颜色：继承；
边界：无；
填充：0；
字体：继承；
光标：指针；
大纲：继承；
全部：未设置；
}
玩
宋先生，
下松先生，
.暂停{
光标：指针；
}
.暂停{
显示：无；
光标：指针；
}

歌名
这里是艺术家的名字

您有一个完整的设计任务来决定您的方法。本网站针对特定问题，而非一般问题，因此您需要先进行初始阶段的工作。@RegEdit您能推荐我可以查看的资源吗，在codeopen、YouTube和此处都没有运气。