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

Question

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

我现在的玩家

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

<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，所以样式应该很容易。

Answer 2

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