Блог

Я создал аудиотег с плейлистом песен, но мне трудно понять, как оформить аудиотег. У кого-нибудь из вас есть готовые стили, которые я могу включить или прикрепить, мне нужен какой-нибудь обычный белый 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 ljubavi.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 telefon.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>
 

Другой ответ технически верен, но немного не хватает деталей. Вам нужно использовать JS для просмотра некоторых действий с кнопками и создания собственного интерфейса проигрывателя / управления, к которому будут привязаны ваши действия. Это <audio> проигрыватель по умолчанию, который у вас есть, который не будет стилизован как таковой, за исключением диктовки элементов управления.

Однако вам не обязательно делать это самому. Вы можете начать с чего-то вроде AmplitudeJS, что поможет вам пройти большую часть пути. В основном это HTML5, поэтому стилизация должна быть достаточно простой.

Вот полезный учебник для достижения того, что вы пытаетесь сделать.

Вам придется создать свой собственный интерфейс музыкального проигрывателя и элементы управления. Для этого вам нужно будет сделать так, чтобы кнопки (или любой другой элемент) имели звуковые функции.