Non-slip lane

Question

I am new to JavaScript / CSS (mostly the whole world of web developers) and I am really trying to create the next widget. I created a picture of what I want to do to make it more understandable.

The Play / Pause and Stop button is ready. The Loop checkbox is not a problem. But the progress indicator is painful. Two markers should mark the point where the file starts to play, and where it stops. The progress bar should also be accessible to the click, so if I want to access a specific point in time, then it is possible.

What I tried so far

jQuery UI slider: for a progress bar and use this drag and drop slider to access a specific point in the audio file. Works great. But no markers and looks very ugly. Do not change it.

<progress> tag: not very flexible. Marker? Button press?

Tag

<div> : there seems to be no way to get the point I clicked on.

So what do you guys recommend? How do I proceed?

Answer 1

Canvas Alternative

You might want to use canvas and draw your own runtime element in it.

Here are a few canvas tutorials:

• How to create a progress bar with HTML5
• Progress bar using HTML5 canvas

---

Doing this with <progress>

To access the clicked position in DOMElement, you can continue the properties of the click event: clientX and clientY ( MDN Source ), for example:

HTML

 <div class="marker" id="StartMarker">^</div> <div class="marker" id="StopMarker">^</div> <progress id="progress" value="0" min="0" max="100">0%</progress> <form id="choice"> <button id="marker1">Beginning marker</button> <button id="marker2">Ending marker</button> <input type="hidden" id="markerValue" value="0" /> </form> 

JavaScript (not optimized)

 document.getElementById('progress').onclick = function (event, element) { /* Math.floor((event.offsetX / this.offsetWidth) * 100) */ var newProgress = event.offsetX; document.getElementById('choice').style.display = "block"; document.getElementById('markerValue').setAttribute('value', newProgress); document.getElementById('marker1').onclick = function (event) { event.preventDefault(); var newProgress = document.getElementById('markerValue').value; var progressBar = document.getElementById('progress'); var startMarker = document.getElementById('StartMarker'); var stopMarker = document.getElementById('StopMarker'); var marker = startMarker; marker.style.display = "block"; startMarker.style.display = "block"; startMarker.offsetTop = (progressBar.offsetTop + progressBar.offsetHeight + 2) + "px"; startMarker.style.left = newProgress + "px"; }; document.getElementById('marker2').onclick = function (event) { event.preventDefault(); var newProgress = document.getElementById('markerValue').value; var progressBar = document.getElementById('progress'); var startMarker = document.getElementById('StartMarker'); var stopMarker = document.getElementById('StopMarker'); stopMarker.style.display = "block"; stopMarker.offsetTop = (progressBar.offsetTop + progressBar.offsetHeight + 2) + "px"; stopMarker.style.left = newProgress + "px"; }; }; 

CSS

 .marker { position:absolute; top:24px; left:9px; display:none; z-index:8; font-weight:bold; text-align:center; } #StartMarker { color: #CF0; } #StopMarker { color:#F00; } #choice { display:none; } progress { display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; width: 300px; height: 20px; padding: 3px 3px 2px 3px; background: #333; background: -webkit-linear-gradient(#2d2d2d, #444); background: -moz-linear-gradient(#2d2d2d, #444); background: -o-linear-gradient(#2d2d2d, #444); background: linear-gradient(#2d2d2d, #444); border: 1px solid rgba(0, 0, 0, .5); border-radius: 15px; box-shadow: 0 1px 0 rgba(255, 255, 255, .2); } 

Live demo

Answer 2

Using simple blocks for this is possible. Your layout will look like this (simplified):

HTML

 <div class="progressbar"> <div class="bar"> <div class="progress" style="width: 30%;"> </div> </div> <div class="markers"> <div class="right" style="width: 70%;"> <div class="marker"> </div> <div class="left" style="width: 20%;"> <div class="marker"> </div> </div> </div> </div> </div> 

SCSS

 .progressbar { width: 20em; background: grey; .bar { height: 2em; .progress { background: blue; height: 100%; } } .markers { height: 1em; background: white; .right { height: 100%; background: red; .marker { width: 1em; height: 100%; background: green; position: relative; float: right; } .left { background: white; height: 100%; } } } } 

Operations can be quite complicated.

JQuery

 $('.bar').click(function(e){ $(this).find('.progress').css('width', (e.offsetX / this.offsetWidth)*100+'%'); }); 

will correctly install the Progressbar on clicks.

For markers, although you will need mousedown, mousemove, mouseleave events, since you got 2 of them.

Example

http://jsfiddle.net/JXauW/