CODEWITHSUNDEEP
javascripthtmlcssaudio
Sonic Media
Sonic Media

Reputation: 43

How can I style the <audio> tag with javascript?

I'm setting up a custom audio player for my website, but I can't get it to work, how do I style the tag?

Hello all, first question I'll be asking on this website because this issue is driving me nuts. So I've been trying to make this custom audio player for my website but I'm a complete noob when it comes to javascript, but I managed to fumble my way to create an audio playlist for the default tag, however after many, MANY attempts, after looking up some tutorials, I can't seem to get this same code I have to work when I create a custom audio player as most of the tutorials I've seen only deal with a single music track.

Here's the code I'm using at the moment

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();
            });
        }

Here's the current player: https://i.sstatic.net/o0eXg.jpg

Here's what I roughly hope to achieve (with the playlist from the first image intact): https://i.sstatic.net/fphwQ.jpg

Upvotes: 3

Views: 1754

Answers (1)

qelli
qelli

Reputation: 2077

You can not style the audio tag directly.

As I saw your code, I have it clear that you know it already. But the issue is that you need to code the JavaScript part to make it work.

Understanding JavaScript for audio tag.

When you have an HTML audio tag like this:

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

You can reference it in your code like this:

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

And with this, in your audio variable, you can access pretty much to every control in the audio tag. Some of them and that I think you may need are:

Methods:

  • play() To play the loaded audio.
  • pause() To pause the loaded audio.

Properties:

  • currentTime The time value (between 0 and 1) of the playing media.
  • volume The actual volume of the audio. (Value between 0 and 1)
  • duration The duration of the audio.

Using event listeners.

One of the most common uses of JavaScript is exactly that, event listeners. This helps your application with handling what happens on the browser (button clicks, mouse move, window resize, etc), so this will be a lot useful to create your own player and handle this events to update the real audio tag.

Based on your example of this player:

Player example

You can see a working example of a player with a similar style of your desire. Hope it helps.

Player:

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>

Upvotes: 2

Related Questions