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

声波媒体

我正在为我的网站设置自定义音频播放器，但无法正常工作，如何设置标签样式？

大家好，我会在这个网站上问的第一个问题，因为这个问题使我发疯。因此，我一直在尝试为我的网站制作此自定义音频播放器，但是在使用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

k3llydev

您不能直接设置音频标签的样式。

当我看到您的代码时，很清楚您已经知道了。但是问题是您需要对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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-01-9

我来说两句

0 条评论

登录后参与评论

TOP 榜单

文章