带有播放列表的 <audio> 标签是否可以风格化？

Question

我制作了一个带有歌曲播放列表的音频标签，但我无法确定如何设置音频标签的样式。 你们有没有预制的样式，我可以包含或附加，我需要一些普通的白色 MP3 播放器，就像我在图片中发送的那个。
The MP3 player I want it to be

My current player

代码说明： 我制作了一个带有播放列表的播放器，我可以在其中播放我想播放的歌曲，它还会自动逐首歌播放，当所有歌曲都消失时，它会从头开始播放。 我需要设置我的代码样式。

<meta charset="UTF-8">
        <title>HTML5 Audio Player</title>
        <style>
    .audioPlayer{
      display: block;
      border-radius: 20px;
      margin:0 auto;
    }
            #playlist{
                list-style: none;
            }
            #playlist li a{
                color:black;
                text-decoration: none;
            }
            }
            #playlist li a:hover{
                color:grey;
            }
            #playlist li a:active{
                color: steelblue;
            }
            #playlist .current-song a{
                color:grey;
            }
        </style>
    
    
        <p>Muzika prosledjena preko <a href="ljubinko-stojanovic-smrtnik-privatna-baza-podataka.webnode.com">privatne baze podataka</a></p>
        <audio class="audioPlayer" src="" controls="" id="audioPlayer">
        Vaš čitač internet stranica ne podržava ovu radnju.
        </audio>
        <ul id="playlist">
            <li class="current-song"><a href="https://archive.org/download/crveni-telefon/Koktel%20ljubavi.mp3">Nedeljko Bajić Baja - Koktel Ljubavi</a></li>
            <li><a href="https://archive.org/download/radio_202012/Disco.mp3">Nedeljko Bajić Baja - Disko</a></li>
            <li><a href="https://archive.org/download/radio_202012/Radio.mp3">Nedeljko Bajić Baja - Radio</a></li>
            <li><a href="https://archive.org/download/crveni-telefon/Crveni%20telefon.mp3">Nedeljko Bajić Baja - Crveni telefon</a></li>
        </ul>
        <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
        <script src="https://ia601405.us.archive.org/16/items/audioplayer_202012/audioPlayer.js"></script>
        <script>
            // loads the audio player
            audioPlayer();
        </script>

Answer 1

另一个答案在技术上是正确的，但细节有点少。您需要使用 JS 来观看一些按钮操作并构建自己的播放器/控制界面来挂钩您的操作。那是您拥有的默认 <audio> 播放器，除了口述控件之外，它不会像这样设置样式。

不过，您不必自己动手。您可以从AmplitudeJS 之类的内容开始，这样您就可以顺利到达目的地。它主要是 HTML5，所以样式应该很容易。

Here's a useful tutorial to achieve what you are trying.

Answer 2

您必须制作自己的音乐播放器界面和控件。为此，您需要使按钮（或任何元素）具有音频功能。