CODEWITHSUNDEEP
javascripthtmlcss
harunB10
harunB10

Reputation: 5207

JS - Audio player with progress bar and tags on it

I need to make an audio player using HTML/CSS and JS. The player should be simple, with play button and progress bar. However I need to implement a way that users can add tags on the audio file (on progress bar). Something like a player from SoundCloud. Where there is a tiny line on bar at specified time, and when you hover that, a popup window comes out with some message.

Is it possible with HTML5's <audio></audio> tags to get millisecond representation using JavaScript?

Or the best idea is to create a custom audio player?

EDIT

I am following this example -> http://alexkatz.me/posts/building-a-custom-html5-audio-player-with-javascript/

And there is a function which I am trying to edit. So when I do:

function moveplayhead(event)
{
    var newMargLeft = event.clientX - getPosition(timeline);
    console.log(newMargLeft);
    if (newMargLeft >= 0 && newMargLeft <= timelineWidth)
    {
        playhead.style.marginLeft = newMargLeft + "px";
    }
    if (newMargLeft < 0)
    {
        playhead.style.marginLeft = "0px";
    }
    if (newMargLeft > timelineWidth)
    {
        playhead.style.marginLeft = timelineWidth + "px";
    }
}

I get in console number of seconds. How can I place small red label (for example) to mark this area. And then add a popup..

Upvotes: 0

Views: 1184

Answers (1)

Toolbox
Toolbox

Reputation: 2491

You should be able to add a progressing line on your developed audio player with below logic steps:

  • Create an audio player function (javascript)
  • Create a timer function (javascript)
  • Specify an intervall where you want to "tap-out" the trigger that will indicate to move the progress line. (javascript)
  • Create the transition sliding. (Javascript or CSS)
  • Create stacking layer using z-index (so you can have your audio player on one layer, and the progressing line on a layer ontop the audio player.) - (CSS)

Since the interaction between each step will probably be needed to work relatively fast, you should stay in javascript as much as possible, without to many interaction with CSS and HTML.

Upvotes: 1

Related Questions