带有播放列表的<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

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