Как я могу стилизовать тег <audio>с помощью JavaScript?

Question

Я настраиваю собственный аудиоплеер для своего сайта, но не могу заставить его работать, как мне оформить тег?

Привет всем, первый вопрос, который я буду задавать на этом сайте, потому что эта проблема сводит меня с ума. Так что я пытался сделать этот пользовательский аудиоплеер для своего сайта, но я полный нуб, когда дело доходит до javascript, но мне удалось найти способ создать аудио-плейлист для тега по умолчанию, однако после многих, МНОГО Попытки, после просмотра некоторых учебных пособий, я не могу получить тот же код, который должен работать при создании собственного аудиоплеера, поскольку большинство учебных пособий, которые я видел, имеют дело только с одной музыкальной дорожкой.

Вот код, который я сейчас использую

HTML5:

    <div id="playerbg">
    <style>
        #playlist{
            list-style: none;
        }
        #playlist li a{
            color: black;
            text decoration:none;
        }
        #playlist .current-song a{
            color: blue;
        }
    </style>
        <audio src="" controls id="audioPlayer">
        </audio>
        <ul id="playlist">
            <li class="current-song">01. <a href="/music/supersonic/01-Supersonic.mp3">Supersonic</a></li>
            <li>02. <a href="/music/supersonic/02-Supersonic%20(Instrumental).mp3">Supersonic (Instrumental)</a></li>
            </ul>
            <script src="https://code.jquery.com/jquery-2.2.0.js">
            </script>
            <script src="/audioPlayer.js">
            </script>
            <script>
                audioPlayer()
            </script>
    </div><!-- playerbg ends here -->

Javascript:

        function audioPlayer(){
            var currentSong = 0;
            $("#audioPlayer")[0].src = $("#playlist li a")[0];
            $("#playlist li a").click(function(e){
               e.preventDefault(); 
               $("#audioPlayer")[0].src = this;
               $("#audioPlayer")[0].play();
               $("#playlist li").removeClass("current-song");
                currentSong = $(this).parent().index();
                $(this).parent().addClass("current-song");
            });

            $("#audioPlayer")[0].addEventListener("ended", function(){
               currentSong++;
                if(currentSong == $("#playlist li a").length)
                    currentSong = 0;
                $("#playlist li").removeClass("current-song");
                $("#playlist li:eq("+currentSong+")").addClass("current-song");
                $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
                $("#audioPlayer")[0].play();
            });
        }

Вот текущий игрок: https://imgur.com/BTAYBrk

Вот что я примерно надеюсь достичь (с неповрежденным списком воспроизведения из первого изображения): https://imgur.com/e7Xyt3N

Answer 1

Нельзя напрямую назначить звуковую метку.

Когда я увидел твой код, я понял, что ты его уже знаешь. Но проблема в том, что вам нужно кодировать часть JavaScript, чтобы она заработала.

Понимание JavaScript для аудио тега.

Если у вас есть аудио тег HTML , например:

<audio src="your_audio.mp3"></audio>

Вы можете сослаться на это в своем коде так:

let audio = document.querySelector("audio");

И с помощью этой переменной audio вы можете получить доступ практически ко всем элементам управления в аудиотэге. Вот некоторые из них, которые, я думаю, вам могут понадобиться:

Методы:

• play() Для воспроизведения загруженного аудио.
• pause() Чтобы приостановить загруженный звук.

Свойства:

• currentTime Значение времени (от 0 до 1) воспроизводимого мультимедиа.
• volume Фактическая громкость звука. (Значение между 0 и 1)
• duration Продолжительность аудио.

Использование прослушивателей событий.

Одним из наиболее распространенных применений JavaScript является именно то, слушатели событий . Это помогает вашему приложению обрабатывать то, что происходит в браузере (нажатия кнопок, перемещение мыши, изменение размера окна и т. Д.), Поэтому это будет очень полезно для создания собственного проигрывателя и обработки этих событий для обновления реального тега аудио.

На основании вашего примера этого игрока:

Вы можете увидеть рабочий пример игрока с похожим стилем по вашему желанию. Надеюсь, это поможет.

Игрок:

var audio = document.querySelector("audio"),
    playButton = document.querySelector("#audio-play"),
    progress = document.querySelector("#audio-playbar"),
    volumeRange = document.querySelector("#volume-range");

const play = () =>{
  if(audio.paused){
    console.log("play");
    playButton.classList.add("paused");
    audio.play();
  }else{
    console.log("pause");
    playButton.classList.remove("paused");
    audio.pause();
  }
};

const bwd = () =>{
  console.log("bwd");
  audio.currentTime = 0;
};

const fwd = () =>{
  console.log("fwd");
  audio.currentTime += 5;
};


volumeRange.addEventListener("change",(event)=>{
  audio.volume = event.target.value / 100;
});

audio.addEventListener("timeupdate",(e)=>{
progress.value = (e.target.currentTime / e.target.duration) * 100;
if(e.target.currentTime/e.target.duration === 1){
  play();
  audio.currentTime = 0;
}
});

document.querySelector("#audio-mute").addEventListener("mouseenter",(event)=>{
  document.querySelector("#volume-control")
    .style = "display: block;";
});

document.querySelector("#volume-control").addEventListener("mouseleave",(event)=>{
  document.querySelector("#volume-control")
    .style = "display: none;";
});


playButton.addEventListener("click",play);

document.querySelector("#audio-fwd")
  .addEventListener("click",fwd);

document.querySelector("#audio-bwd")
  .addEventListener("click",bwd);

#audio-player{
  background: #005bab;
  width: 300px;
  height: 40px;
  border-radius: 15px;
  position: relative;
}

#audio-player::after{
  content: "";
  background: url('https://i.imgur.com/aDz7QOn.png') no-repeat;
  display: block;
  position: absolute;
  width: 100vw;
  height: 100vh;
  margin-top: -8px;
  margin-left: 270px;
}


#audio-play{
  width: 20px;
  height: 20px;
  background: url('https://i.imgur.com/pOdMApr.png') no-repeat;
  background-size: cover;
  position: absolute;
  margin: 10px;
  margin-left: 15px;
  cursor: pointer !important;
}



#audio-bwd{
  width: 25px;
  height: 15px;
  background: url('https://i.imgur.com/z4j9Qp9.png') no-repeat;
  background-size: cover;
  position: absolute;
  margin: 12px;
  margin-left: 45px;
  cursor: pointer !important;
}

#audio-fwd{
  width: 25px;
  height: 15px;
  background: url('https://i.imgur.com/E7X60LH.png') no-repeat;
  background-size: cover;
  position: absolute;
  margin: 12px;
  margin-left: 75px;
  cursor: pointer !important;
}




#progress{
  position: absolute;
  margin: 8px;
  margin-left: 105px;
}


#audio-playbar{
  border-radius: 0;
  background: black;
  height: 10px;
}

progress[value]::-webkit-progress-bar {
  background-color: #000;
  border-radius: 0;
}

progress[value]::-webkit-progress-value{
  background: #c0c0c0;
}


.paused{
  background: url('https://i.imgur.com/EwMhtwR.png') no-repeat !important;
  background-size: cover;
}

#audio-mute{
  width: 26px;
  height: 26px;
  position: absolute;
  margin: 11px;
  z-index: 11;
  margin-left: 278px;
  background: url('https://i.imgur.com/g3W1tUI.png') no-repeat;
}


#volume-control{
  position: absolute;
  margin-left: 230px;
  display: none;
  z-index: 12;
}

<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg">
  Your browser does not support the <code>audio</code> element.
</audio>

<div id="audio-player">
  <div id="controls">
    <span id="audio-play"></span>
    <span id="audio-bwd"></span>
    <span id="audio-fwd"></span>
  </div>
  <div id="progress">
    <progress id="audio-playbar" max="100" value="60"></progress>
  </div>
  <div id="mute">
    <span id="audio-mute"></span>
    <span id="volume-control">
    <input id="volume-range" type="range" min="0" max="100">
    </span>
  </div>
</div>