Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Jul 2014
    Messaggi
    24

    barra progresso audio html5

    ciao ragazzi allora volevo fare un player audio da zero, quindi senza appoggiarmi a jplayer e script belli che pronti in giro,
    mi ritrovo in un punto di stallo ora con la progresbar che sto sostituendo (forse sbagliando) con un input range

    la prima parte di codice mi permette di aggiornare il valore del range con il tempo dell'audio che scorre

    codice:
    $(".audiocontrol").bind('timeupdate', function(){    
    var track_length = $(".audiocontrol")[counter].duration;
    var secs = $(".audiocontrol")[counter].currentTime;
    var progress = (secs/track_length) * 100;
    $('#myTime').prop("value" , progress);
    var tcMins = parseInt(secs/60);
    var tcSecs = parseInt(secs - (tcMins * 60));
    if (tcSecs < 10) { tcSecs = '0' + tcSecs; }
    $('#timecode').html(tcMins + ':' + tcSecs);
    })
    e fino a qua tutto bene, ora io vorrei poter portare avanti e indietro la traccia e ho provato una cosa del genere (in pratica la stessa che uso per il volume) ma niente
    codice:
    $("#myTime").change(function(){ 
    var tim = document.getElementById("myTime").value;
    $("audio").prop("value" , tim);
    $("#message").text(tim);
    })
    suggerimenti?


    codice HTML:
     <input type="range" min="1" max="100" step="1" id="myTime" value="0">

  2. #2
    Utente di HTML.it
    Registrato dal
    Jul 2014
    Messaggi
    24
    ho risolto così

    codice:
    $("#myTime").change(function(){                 
    var tim = document.getElementById("myTime").value;            
    var track_length = $(".audiocontrol")[counter].duration;                
    var ct = (tim / 100) * track_length;              
    $(".audiocontrol")[counter].currentTime = ct ;
    $("#message").text(ct);
    })

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.