Hallo,
Wie hast du denn deine eigenen Controls gebastelt?
Mhh.. ich habe 'nen Play- und 'nen Pause-Button, einen Lautstärke-Regler, eine Fortschrittsanzeige und eine Zeitanzeige. Ich denke du meinst den Codeschnipsel von der Fortschrittsanzeige? Ich habe ein langes div-Element (Hintergrund schwarz). Darüber liegt ein div-Element (Hintergrund grün) und mit width (in %) zeige ich dann an wieviel von dem Track schon "durch" ist. Am Ende von diesem div (mit left in %) habe ich ein span-Element mit einem kreisförmigen Symbol.. zum verschieben eben. Dem span habe ich ein mousedown-Handler verpasst der die Klasse 'active' hinzufügt (mit window und mouseup verschwindet die Klasse dann wieder). Mit window und dem mousemove Event schaue ich dann wo ich das div & span verschiebe und auf was ich currentTime setze. Hoffe ihr versteht was ich meine... Hier das Event:
window.addEventListener('mousemove', moveCurrentTimeSlider);
function moveCurrentTimeSlider(e)
{
if (document.getElementById('spanPanel').classList.contains('active'))
{
// mouse_Pos(e) liefert ein Object mit den Eigenschaften .top und .left der aktuellen Maus Position
var pos = mouse_Pos(e),
elem = document.getElementById('divGreen'),
width = elem.offsetWidth,
left = elem.offsetLeft;
while (elem != '[object HTMLBodyElement]')
{
elem = elem.parentNode;
left += elem.offsetLeft;
}
// Positions-Prozentwert berechnen
var style_left = (pos.left - left) * (100 / width);
// Min 0% - Max 100%
if (style_left > 100) style_left = 100;
else if (style_left < 0) style_left = 0;
// Dezimalzahl auf max 3 Zahlen nach dem Komma beschränken
(style_left < 10) ? style_left = String(style_left).substr(0, 5) : style_left = String(style_left).substr(0, 6);
document.getElementById('spanPanel').style.left = style_left + '%';
document.getElementById('divGreen').style.width = style_left + '%';
var elapsedTime = (document.getElementById('audio').duration / 100) * (style_left * 1);
document.getElementById('audio').currentTime = elapsedTime;
}
}
Grüße, Lukas