Wie kann ich mit JavaScript die Länge einer .mp3 Datei ermitteln?

Hallo!

Auf meiner Website wird Musik abgespielt und ich hätte gerne dass dann ein Timer dabei ist der Aussagt wie lange die Musik schon spielt. Also z. B. 5:24 / 7:00

Zurzeit sieht mein Code so aus:

function play1() {
    var audio = new Audio('Music/001.mp3');
    audio.play();
    audio.addEventListener('ended', (event) => {
        play2();
    });
}

play2() ist dann einfach das nächste Lied.

Wie kann ich das machen?

3 Antworten

Von Experte MrAmazing2 bestätigt

germanils

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik

26.05.2021, 17:09

Die Gesamtlänge findest Du mit duration raus:

https://www.w3schools.com/tags/av_prop_duration.asp

Die aktuelle Position mit currentTime

https://www.w3schools.com/tags/av_prop_currenttime.asp

Woher ich das weiß:Berufserfahrung – Entwicklung von Apps und Websites

Pascali309

26.05.2021, 17:11

Ja genau das meine ich doch hab den Command aber nd so schnell gefunden

JFhatFragen

Beitragsersteller

26.05.2021, 17:12

@Pascali309

Danke trotzdem!

JFhatFragen

Beitragsersteller

26.05.2021, 17:12

Danke! Das ist sehr hilfreich!

Pascali309

26.05.2021, 17:12

const createBar = require("string-progressbar");
const { MessageEmbed } = require("discord.js");


const { LOCALE } = require("../util/EvobotUtil");
const i18n = require("i18n");


i18n.setLocale(LOCALE);


module.exports = {
  name: "np",
  description: i18n.__("nowplaying.description"),
  execute(message) {
    const queue = message.client.queue.get(message.guild.id);
    if (!queue) return message.reply(i18n.__("nowplaying.errorNotQueue")).catch(console.error);


    const song = queue.songs[0];
    const seek = (queue.connection.dispatcher.streamTime - queue.connection.dispatcher.pausedTime) / 1000;
    const left = song.duration - seek;


    let nowPlaying = new MessageEmbed()
      .setTitle(i18n.__("nowplaying.embedTitle"))
      .setDescription(`${song.title}\n${song.url}`)
      .setColor("#F8AA2A")
      .setAuthor(message.client.user.username);


    if (song.duration > 0) {
      nowPlaying.addField(
        "\u200b",
        new Date(seek * 1000).toISOString().substr(11, 8) +
          "[" +
          createBar(song.duration == 0 ? seek : song.duration, seek, 20)[0] +
          "]" +
          (song.duration == 0 ? " ◉ LIVE" : new Date(song.duration * 1000).toISOString().substr(11, 8)),
        false
      );
      nowPlaying.setFooter(
        i18n.__mf("nowplaying.timeRemaining", { time: new Date(left * 1000).toISOString().substr(11, 8) })
      );
    }


    return message.channel.send(nowPlaying);
  }
};

//So hab ich das vllt kannst damit was anfangen

JFhatFragen

Beitragsersteller

26.05.2021, 17:15

Ich finde das ziemlich kompliziert... Ist das nicht komplizierter als es sein müsste?

webhorst

28.05.2021, 14:20

@JFhatFragen

var au = document.createElement('audio');

au.src = "https://bla.bla/myaudio.mp3";

au.addEventListener('loadedmetadata', function(){
    var duration = au.duration;
    alert("Länge: " + duration + " Sekunden");
},false);

Müsstest dir das eben dann noch in Minuten umrechnen

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

26.05.2021, 17:13

hier alle methoden die audio so liefert

https://www.w3schools.com/jsref/dom_obj_audio.asp

länge ist wohl duration und aktuelle zeit ist currentTime

Ähnliche Beiträge

Wie kann ich mit JavaScript ALLE aktuell laufenden Geräusche beenden?

Wenn eine neue Audio startet sollen erst alle noch laufenden Audios beendet werden, damit man immer nur eine hört und nicht mehrere. Mein Code sieht zurzeit so aus:

function play1() {
    var audio = new Audio('Music/1.mp3');
    audio.play();
    audio.addEventListener('ended', (event) => {
        play2();
    });
}

function play2() {
    var audio = new Audio('../002/Music/1.mp3');
    audio.play();
    audio.addEventListener('ended', (event) => {
    });
}

und es gibt jeweils 1 Knopf für play1 und play2 zum starten.

...zum Beitrag

Ton abspielen Javascript?

Hallo,

Ich möchte auf meiner html Seite einen Sound abspielen, wenn ein Button geklickt wird. Die Seite läuft über den Localhost.

html:

 <script src="script.js"></script>
    <script src="anmeldungj.js"></script>
   <script src="/socket.io/socket.io.js"></script>
    <audio id="ringtone" src="Sound2.mp3"></audio>

JavaScript

var RingSound;
var Sound = new Audio('Sound2.mp3')
RingSound = document.getElementById("ringtone");
...
function Send() {
    if (delay && messageInput.value.replace(/\s/g, "") != "") {
        delay = false;
        setTimeout(delayReset, 1000);
        socket.emit("send", messageInput.value);
        messageInput.value = "";
        RingSound.play();
        Sound.play();
    }
}

Der Pfad stimmt:

Es wird aber kein Sound abgespielt, ich habe es über zwei Varianten versucht.

Ich hoffe jemand kann mir helfen

Jannik

...zum Beitrag

Könnt ihr mir bei folgendem JavaScript Problem helfen?

programmieren ist mein jüngstes und schwierigstes hobby, ich würd mich freuen wenn ich dieses Problem lösen könnte. Ich möchte, dass jeder Name, der im Eingabefeld eingegeben wird unten erscheint.

danke im voraus.

https://jsfiddle.net/6wcf9j5e/

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form class="guestList" action="index.html" method="post">
      <label>Your Name: </label>
      <input type="text" name="" value="..." id="nameInput;" />
      <input type="submit" name="" value="submit" onclick="pushArray();"/>
    </form>
    <div id="addName"></div>
    <script type="text/javascript" src="dailyrepead.js">
    </script>
  </body>
</html>

JS:

var guestList = [];
var count = document.getElementById("nameInput");
function pushArray() {
  guestList.push(count);
  document.getElementById("addName").innerHTML += guestList[count] +"<br>";
}

...zum Beitrag

BMI Rechner Programm in Javascript

Hallo,

wisst ihr, was ich in meinem JavaScript-Code falsch gemacht habe (Es sind zwei Eingabefelder da, Gewicht in kg und Grösse in cm; dann berechnet und sagt, ob der Anwender Über- oder Untergewicht hat).

...
function Bmi()
    {
        var Gewicht = document.BmiFormular.Gewicht.value;
        var Groesse = document.BmiFormular.Groesse.value / 100;

        var BmiZahl = Gewicht / (Groesse * Groesse);

        var Was = (BmiZahl < 18,5) ? "Untergewicht" :
        "Normalgewicht";

        alert (BmiZahl + "\n" + "Sie haben " + Was);
    }
...

<form name="BmiFormular" action="">
<input type="text" name="Gewicht" value="Gewicht eingeben! (in kg)"        onClick="this.value=''" /><br />
<input type="text" name="Groesse" 
       value="Körpergrösse eingeben! (in cm)" 
       onClick="this.value=''" /><br /><br />

    <input type="button" width="60" value="BMI berechnen!" 
           onClick="Bmi()" />
  </form>

Die Variable BmiZahl erklärt sich von selbst, die Variable "Was" steht

...zum Beitrag

Javascript Tage zwischen zwei Daten berechnen?

Hallo, ich habe folgenden Code:

    function calcDays(){
  var tage = document.beleg.tage;
  var anreise = document.beleg.anreise.value;
  var abreise = document.beleg.abreise.value;

if( anreise && abreise && tage){
  var date1 = anreise.split(".");
  var date2 = abreise.split(".");
  var sDate = new Date(date1[2],date1[1],date1[0]);
  var eDate = new Date(date2[2],date2[1],date2[0]);
  var daysApart = Math.abs(Math.round((eDate-sDate)/86400000));
  tage.value = daysApart;
  }
}

Das Problem dabei ist, dass Javascript mit 31 Tage je Monat rechnet, d.h. wenn ich Anreise am 28.02. habe und Abreise am 01.03. werden 4 Tage ausgegeben. Was muss ich noch ändern?

Vielen Dank.

...zum Beitrag

Zwei funktionen auf ein button packen?

Wie kann ich zwei funktionen auf einen Button packen? Also ich will das bei jedem click auf meinen button

1. immer plus 1 addiert wird: onclick="pluszahl()"

2. das ein Sound abgespielt wird: onclick="play()"

Leider konnte ich nur den counter machen und frage mich jetzt wie ich den sound auch aktivieren kann

HTML:

    <span class="center">Bam?</span>
    <div onclick="custom()" class="btn-container">
        <button onclick="pluszahl()"; twoclick="play()"    class="button1">
            Bam
        </button>
    </div>

    <div id="resultArea">0</div>

JavaScript:

function play() {
  var audio = new Audio('bam.mp3');
  audio.play();
}

function pluszahl() {
  document.getElementById("resultArea").innerHTML = parseInt(document.getElementById("resultArea").innerHTML)+1;
  }

...zum Beitrag

Javascript funktion um gewisse Uhrzeit, setinterval Ressourcen Belastung?

Hallo zusammen

Ich bräuchte eine function, welche immer um die gleiche Uhrzeit, jeden Tags ausgeführt wird. Jeden Tag um 23:59

Nun habe ich eine setInterval function welche jede sekunde ausgeführt wird. wenn die aktuelle uhrzeit 23:59:0 betrifft, wird die eigentliche function ausgeführt.

Meine Frage: Ist das sehr ressourcen verbrauchend, da jede sekunde abgefragt wird?

function tick() {
  //get the mins of the current time
  var mins = new Date().getMinutes();
  var sec = new Date().getSeconds();
  var hours = new Date().getHours();
  var time_stamp = "23:59:0";
  var time_stamp = "15:20:0";
  var current_time = hours + ":" + mins + ":" + sec;
  
  if (current_time == time_stamp) {
    alert('Do stuff');
  }
  console.log('Tick ' + hours + ":" + mins + ":" + sec);
}


setInterval(tick, 1000);

...zum Beitrag

JavaScript function pausieren

Hallo nochmal,

langsam zweifle ich an meinem Verstand! Ein Fan von JavaScript werde ich in diesem Leben wohl wirklich nicht mehr...

Folgender Code:

function punktung() {
    var punkte = document.getElementById("punkte");
    if ( punkte.innerHTML.length > 3 ) {
        punkte.innerHTML = "";
        clearinterval(dots);
        setTimeout(function (){losgehts()}, 5000);
    }
    else  {
        punkte.innerHTML += ".";
    }
}

function losgehts() {
var dots = window.setInterval( function() { punktung() },500);
}

losgehts();

Das Script schreibt immer vier Punkte in ein Div und soll, nachdem die vier Punkte geschrieben wurden und die ID "Punkte" auf "" gekürzt wird, 5 Sekunden pausiert wird - danach das Gleiche wieder von vorne.

Ich lösche also den Interval "dots" und pausiere 5000 Millisekunden und rufe danach wieder die function "losgehts()" auf - warum funktioniert es aber wieder nicht? Es wird einfach keine Pause gemacht, sondern nach dem Kürzen einfach wieder von Vorne begonnen. Warum?

Über Antworten bin ich dankbar!

Grüße, Hummel

...zum Beitrag

Bilder bei jquery/JavaScript nach bestimmter zeit austauschen?

Erstmal entschuldigung für die komische Überschrift, ich schmeiße manchmal die beiden gerne durcheinander.

Ich hab auf meiner Seite einen Timer (fürs Beispiel 30s), der mit einem Button gestartet werden. Am Anfang soll Bild1 stehen. Nachdem der Timer bei der Hälfte der Zeit angekommen ist (hier 15s) soll Bild2 dort erscheinen wo Bild1 vorher war. Ist der Timer bei 0 angekommen, wird man auf eine andere Seite weitergeleitet.

Wie mache ich das am besten?

Hier mein bisheriger Code

$(document).ready(function (e) {

var $timer = $("#timer");

var stop = false;

var timerLoop;

$( "#button_start" ).click(function() {

timerLoop = setInterval(function(){ update() }, 1000);

});

function update() {

if(!stop){

var myTime = $timer.html();

var ss = myTime.split(":");

var dt = new Date();

dt.setHours(0);

dt.setMinutes(ss[0]);

dt.setSeconds(ss[1]);

var dt2 = new Date(dt.valueOf() - 1000);

var temp = dt2.toTimeString().split(" ");

var ts = temp[0].split(":");

if(ss[0] === "00" && ss[1] === "01"){

stop = true;

clearInterval(timerLoop);

$("body").load( "./erfolgreich.html" );

}

$timer.html(ts[1]+":"+ts[2]);

//setTimeout(update, 1000);

}

});

...zum Beitrag

JavaScript: Wie kann ich ein Bild in mein Canvas einfügen?

Servus!

Ich möchte gerne ein Bild in mein Canvas einfügen. Es klappt aber nicht und die Konsole zeigt auch keine Fehlermeldungen an.

Ich habe folgenden Code:

var canvas = document.getElementById("gameScreen");
var context = canvas.getContext("2d");
var imgBall = document.getElementById('img_ball');

function make_ball() {
  imgBall = new Image();
  imgBall.onload = function() {
    context.drawImage(imgBall, 10, 10);
  }
}

make_ball();

In der HTML-Datei habe ich noch src und die id (img_ball) in das img-Tag geschrieben.

Vielleicht findet ja von euch jemand den Fehler.

Dankeschön.

...zum Beitrag

Ich habe angefangen Schere Stein Papier in JavaScript zu programmieren leider funktioniert die Ergebnis Auswertung am Ende nicht. Wo ist der Fehler?

Das ist der JS Code:

FuEingabe();
    function FuEingabe() {
    var eingabe = prompt("Bitte gib: Schere, Stein oder Papier ein!", "Schere, Stein, Papier");
}
    switch(FuEingabe()) {

        case "Schere":
        
        zufallenemyeingabe();
        break;

        case "Stein":
        
        zufallenemyeingabe();
        break;

        case "Papier":
        
        zufallenemyeingabe();
        break;

        default:

        alert("Ungültig!");

}
function zufallenemyeingabe() {
    var max = 3;
    var min = 1;
    var zufallzahl = (Math.random() * (max - min)) + min;
    console.log("Die Zufallzahl lautet: " + zufallzahl);
    var zufallzahlround = Math.round(zufallzahl);
    console.log("Die gerundete Zufallzahl heißt: " + zufallzahlround);
    var StEingabe = "non";

    switch(zufallzahlround){

        case 1:
        StEingabe = "Stein";
        break;

        case 2:
        StEingabe = "Papier";
        break;

        case 3:
        StEingabe = "Schere";
        break;

        default: 
        console.log("Error 01: Computer hat kein Ergebnis generiert!");
    }
    console.log(StEingabe);
    alert("Der Computer hat " + StEingabe) + " gewählt.";
    return StEingabe

}

function ergebnisauswertung() {
    var gewinner = "nil";
    var PlayEingabe = FuEingabe();

    if(PlayEingabe == "Schere" && zufallenemyeingabe == "Schere") { 

        gewinner = "Unentschieden!";

    }
                                                             
    if(PlayEingabe == "Schere" && zufallenemyeingabe == "Stein") {
        gewinner = "PC";

    }
                                                           
    if(PlayEingabe == "Schere" && zufallenemyeingabe == "Papier") {
        gewinner = "Player";

    }
                                                             
                                                              
     //Eigentliches Vergleichen der Wahl - Stein 
    if(PlayEingabe == "Stein" && zufallenemyeingabe == "Stein") {
        gewinner = "Unentschieden!";
        

    }
                                                           
    if(PlayEingabe == "Stein" && zufallenemyeingabe == "Schere") {
        gewinner = "Player";

    }
                                                            
    if(PlayEingabe == "Stein" && zufallenemyeingabe == "Papier") {
        gewinner = "PC";

    }
                                                            
                                                            
    //Eigentliches Vergleichen der Wahl - Papier 
    if(PlayEingabe == "Papier" && zufallenemyeingabe == "Papier") {
    gewinner = "Unentschieden!";

    }
                                                             
    if(PlayEingabe == "Papier" && zufallenemyeingabe == "Schere") { 

        gewinner = "PC";


    }
                                                             
    if(PlayEingabe == "Papier" && zufallenemyeingabe == "Stein") { 

        gewinner = "Player";

    }

    return gewinner;
                                                            
}
var gewinner = ergebnisauswertung();
console.log(gewinner);
if (ergebnisauswertung() == "Player") {
    alert("Du gewinnst!");
}

...zum Beitrag

JavaScript Textboxen die aufklappen

Kann kein JavaScript. Kann man das vielleicht so umschreiben, dass es möglich wird, in den Link auch noch etwas anderes rein zu schreiben als wie die Wörter die in dem Script abgeglichen werden. Also "[Aufklappen]" und "[Schliessen]" ...

Ich will halt, dass man auf der ganzen div-box, die um den Link liegt, drauf klicken kann..

var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) {
if (ie4) {
return document.all[id];
} else {
return document.getElementById(id);
}
}
function toggle(link, divId) {
var lText = link.innerHTML; var d = getObject(divId);
if (lText == '[Aufklappen]') {
link.innerHTML = '[Schliessen]'; d.style.display = 'block';
} else { link.innerHTML = '[Aufklappen]'; d.style.display = 'none';
}
}




<div>
    <div>
        <a href="javascript: void(0);" onClick="toggle(this, 'box1');">[Aufklappen]</a>
    </div>
    <div id="box1" style=display:none>
        // Inhalt aufgeklappt
    </div>
</div>

...zum Beitrag

Javascript: Funktion nur ausführen wenn bedingung stimmt?

ich habe dieses JS :

function Rechner(){
	var x=document.getElementById("laenge").value;
	var y=document.getElementById("breite").value;
	document.getElementById("flaeche").value = xy;
}

jedes input hat das Attribut :

oninput="Rechner(this.value)"

Doch er soll die flaeche im Input nur ausgeben wenn wirklich laenge und breite ausgefüllt sind. derzeit zeigt er erst noch 0 an wenn nur 1 stimmt.

wie geht das ? kann man da irgendwie noch sagen "if isset laenge & breite" ?

...zum Beitrag

[JavaScript] Wie kann ich ein Element von Anfang an unsichtbar machen?

Und nach einem erfolgreichem Login wieder sichtbar machen. Ich habe folgenden Code:

function getKey() {


  var visible = document.getElementById("download").style.display = "visible";
  var invisible = document.getElementById("download").style.display = "none";


  var key = "abc1";


  var keY = document.getElementById("key").value;


  if (key == keY) {
    visible;
    alert("r")


  } else {
    alert("w")
  }

Weder funktioniert er, noch wird das Element download wieder angezeigt.

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen