我正在为我的网站设置自定义音频播放器,但无法正常工作,如何设置标签样式?
大家好,我会在这个网站上问的第一个问题,因为这个问题使我发疯。因此,我一直在尝试为我的网站制作此自定义音频播放器,但在使用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
答案 0 :(得分:0)
您不能直接设置音频标签的样式。
当我看到您的代码时,很清楚您已经知道它了。但是问题在于,您需要对JavaScript部分进行编码才能使其正常工作。
拥有这样的HTML audio tag时:
<audio src="your_audio.mp3"></audio>
您可以像这样在代码中引用它:
let audio = document.querySelector("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>