Clash Royale CLAN TAG#URR8PPP

Add a mobile friendly “dot grabb” at the end of a progress bar (seek bar) to custom htm5 audio player

I found a custom html5 audio player and successfully redesigned it, now I want to add a "grabber" to be able to grab and move the seek bar progress line at specific time (mobile friendly). I want something like a "dot" in iOS to be able to grab (with a touch) and move progress bar (seek bar) to exact time that I wanted.

I am new to JS and I dont't know how to get this done with this source code

Full code CodePen

How it can be done?

function calculateTotalValue(length)
var minutes = Math.floor(length / 60),
seconds_int = length - minutes * 60,
seconds_str = seconds_int.toString(),
seconds = seconds_str.substr(0, 2),
time = minutes + ':' + seconds

return time;


function calculateCurrentValue(currentTime)
var current_hour = parseInt(currentTime / 3600) % 24,
current_minute = parseInt(currentTime / 60) % 60,
current_seconds_long = currentTime % 60,
current_seconds = current_seconds_long.toFixed(),
current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);

return current_time;


function initProgressBar()
var player = document.getElementById('player');
var length = player.duration
var current_time = player.currentTime;

// calculate total length of value
var totalLength = calculateTotalValue(length)
jQuery(".end-time").html(totalLength);

// calculate current value time
var currentTime = calculateCurrentValue(current_time);
jQuery(".start-time").html(currentTime);

var progressbar = document.getElementById('seekObj');
progressbar.value = (player.currentTime / player.duration);
progressbar.addEventListener("click", seek);

if (player.currentTime == player.duration)
$('#play-btn').removeClass('pause');


function seek(evt)
var percent = evt.offsetX / this.offsetWidth;
player.currentTime = percent * player.duration;
progressbar.value = percent / 100;

;

function initPlayers(num)
// pass num in if there are multiple audio players e.g 'player' + i

for (var i = 0; i < num; i++)
(function()

// Variables
// ----------------------------------------------------------
// audio embed object
var playerContainer = document.getElementById('player-container'),
player = document.getElementById('player'),
isPlaying = false,
playBtn = document.getElementById('play-btn');

// Controls Listeners
// ----------------------------------------------------------
if (playBtn != null)
playBtn.addEventListener('click', function()
togglePlay()
);


// Controls & Sounds Methods
// ----------------------------------------------------------
function togglePlay()
if (player.paused === false)
player.pause();
isPlaying = false;
$('#play-btn').removeClass('pause');

else
player.play();
$('#play-btn').addClass('pause');
isPlaying = true;


());



initPlayers(jQuery('#player-container').length);

1 Answer
1

Not sure if it can be done with "progress" element but can be possible with "range" element

First, remove the "progress" and add this

<input id="seekObj" type="range" name="rng" min="0" step="0.25" value="0" onchange="seekAudio()" oninput="seekAudio()" style="width: 99%">


After that let's add some css to make it look like a good seek bar, in your case you are using "SCSS" so here is the code

$background_color_1: #df7164;

input[type=range]
-webkit-appearance: none;
-moz-apperance: none;
border-radius: 6px;
height: 6px;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #df7164), color-stop(0%, #F5D0CC));
background-image: -moz-linear-gradient(left center, #DF7164 0%, #DF7164 0%, #F5D0CC 0%, #F5D0CC 100%);
&:focus
outline: none;
border: none;

&::-webkit-slider-thumb
-webkit-appearance: none !important;
background-color: $background_color_1;
height: 13px;
width: 13px;
border-radius: 50%;

&::-moz-range-thumb
-moz-appearance: none !important;
background-color: $background_color_1;
border: none;
height: 13px;
width: 13px;
border-radius: 50%;


input[type="range"]
&::-moz-range-track
border: none;
background: none;
outline: none;




All done now, so we have to do some changes into JS as well as HTML to make it work

Add these functions in JS

function setupSeek()
seek.max = player.duration;

function seekAudio()
isSeeking=true;
player.currentTime = seek.value;
isSeeking=false;



Move the "player" and "seek" element retrieval to top as well as add a seek status holder

var isSeeking=false;
var seek = document.getElementById("seekObj");
var player = document.getElementById("player");


Now add some code inside "initProgressBar()" function to make the "range" element work

if(!isSeeking)
seek.value = player.currentTime;



By This point everything is done, we just need to call the functions from so HTML, so let's do the changes, From audio element, we need to call the "setUpSeek" so for that just add this to "audio"

ondurationchange="setupSeek()"


Now, we are done, you can check the CodePen for a better understanding

Some more improvements to make the slider work in a better way.

Add this Javascript code, This will make the seek bar work look and feel like a native mobile seek bar

function SetSeekColor()
try
var val = ($("#seekObj").val() - $("#seekObj").attr('min')) / ($("#seekObj").attr('max') - $("#seekObj").attr('min'));
var percent = val * 100;
$("#seekObj").css('background-image',
'-webkit-gradient(linear, left top, right top, ' +
'color-stop(' + percent + '%, #df7164), ' +
'color-stop(' + percent + '%, #F5D0CC)' +
')');

$("#seekObj").css('background-image',
'-moz-linear-gradient(left center, #DF7164 0%, #DF7164 ' + percent + '%, #F5D0CC ' + percent + '%, #F5D0CC 100%)');

catch(e)



To Make the dragging perfectly you may need to add a third party plugin/js, You can find one here

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.