javascript - 如何使用 javascript 设置 <audio> 标签的样式？

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

You can not style the audio tag directly.

当我看到你的代码时，我很清楚你已经知道了。但问题是您需要对 JavaScript 部分进行编码才能使其正常工作。

了解音频标签的 JavaScript。

当你有一个 HTML audio tag像这样:

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

您可以像这样在您的代码中引用它:

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

有了这个，在您的 audio 变量中，您几乎可以访问 audio 标签中的每个控件。其中一些我认为您可能需要的是:

方法:

• play() 播放加载的音频。
• pause() 暂停加载的音频。

属性:

• currentTime 播放媒体的时间值(介于 0 和 1 之间)。
• volume 音频的实际音量。 (值介于 0 和 1 之间)
• duration 音频的持续时间。

使用事件监听器。

JavaScript 最常见的用途之一就是，event listeners .这有助于您的应用程序处理浏览器上发生的事情(按钮点击、鼠标移动、窗口大小调整等)，因此这对于创建您自己的播放器和处理此事件以更新真实音频标签非常有用。

根据你这个播放器的例子:

您可以看到一个与您期望的风格相似的播放器的工作示例。希望对您有所帮助。

玩家:

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>