0

Olá, quero criar uma barrinha que mostre a duração e o tempo atual de reprodução dos áudios, para isso preciso pegar o tempo destes áudios e colocar numa variável pra ser usada numa propriedade do CSS mas não sei como fazer isso.

Consegui pegar a duração do áudio com javascript, mas agora não sei como transformar isso numa variável para jogar na propriedade do CSS:

html (no log do javascript aparece "O som tem 143.096 segundos")

    <audio id="player" controls autoplay> <source src="musicas/CUAT.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
    <script>
        const som1 = document.getElementById("player");
        som1.onloadeddata = function() {
        console.log("O som tem " + som1.duration + " segundos");};
    </script>

css

div.progress::after {
 animation: loading "Duração do Áudio Aqui"s ease-in-out;
 background:#2A0A29;
 content: '';
 position: absolute;
 left: 0; top: 0; bottom: 0;
 border: 0.1px solid grey;
}

Como posso colocar essa duração do áudio que o javascript me deu em uma variável que dê pra botar no meio do css?

Edit: Consegui Resolvido

4
  • ok, mudei um pouco
    – Yound
    9/12/2018 às 3:49
  • Você já tentou sem usar o evento onloadeddata ? Tenta direto console.log("O som tem " + som1.duration + " segundos");
    – NoobSaibot
    9/12/2018 às 4:29
  • Tem razão, é que meu código tava cheio de coisa aí o <javascript> tava antes da tag do <audio> daí ele fala que não loadou nada, mas coloquei o javascript depois da tag do <audio> e funcionou, falou assim "O som tem 143.096 segundos". Agora eu só preciso achar uma forma de usar essa variável que contém a quantidade de segundos fora do <javascript> pra criar minha barrinha de progresso. Obrigado pela atenção ✔ツ
    – Yound
    9/12/2018 às 4:44
  • @Yound esse problema ocorre porque o elemento não tinha sido renderizado ainda, então teria que adiciona o evento load ao documento ou adicionar o script sempre no final do documento após todos os elementos. Focamos tanto na parte de recuperar a duração que não atentamos a esse fato rsrsrs.
    – NoobSaibot
    9/12/2018 às 4:54

0

Pesquise outras perguntas com a tag .