Ein Audioplayer um mehrere mp3´s abzuspielen

1 schlitzebube

Das ist der Audioplayer

<script>
function abspielen() {
new Audio("Datei.mp3").play();
}
</script>
<body>
<input type="button" value="abspielen" onclick="abspielen()">
</Body>

Ich würde gerne einen Audioplayer für mehrere mp.3 Dateien verwenden.
Dazu brauche ich eine ID.
In der function setzte ich statt Datei.mp3 eine ID ein und im Input auch.
<script>
function abspielen() {
new Audio = document.getElementById("id1").play();
}
</script>
<body>
<input type="button" value="abspielen" id="id1" onclick="abspielen()">
</Body>
Kann man das so lassen?
Jetzt habe ich aber kein mp.3 mehr ggg.
Ich habe im input onclick="abspielen("Datei.mp3")"> versucht. Geht aber nicht.

Was mache ich falsch?

2 Jörg Kruse

Ich habe im input onclick="abspielen("Datei.mp3")"> versucht. Geht aber nicht.

Der Ansatz ist ja nicht schlecht. Die Funktion muss halt entprechend erweitert werden, dass sie den Dateinamen als Argument aufnimmt:

function abspielen(DateiName) {
    new Audio(DateiName).play();
}

Eine ID würde nur benötigt, wenn du statt mit onclick mit einem Event Listener arbeiten würdest.

Außerdem: die doppelten Anführungszeichen beenden das onclick Attribut, deswegen solltest du den Dateinamen in einfache Anführungszeichen einschließen:

onclick="abspielen('Datei.mp3')"

3 schlitzebube

Ich bin jetzt einen Schritt weiter und es gibt gleich ein neues Problem.

<script>
function abspielen(lied) {
new Audio (lied).play();
}
</script>
<body>
<input type="button" value="abspielen" onclick="abspielen('Datei1.mp3')">
<input type="button" value="abspielen" onclick="abspielen('Datei2.mp3')">
</body>

Ich hatte ja geschrieben mehrere mp3´s abspielen. Wenn ich die Buttons nacheinander anklicke werden beide abgespielt. Ich dachte ich habe einen Player und der kann nur eine Datei laden. Wenn ich den zweiten button anklicke würde die erste Datei automatisch gelöscht.
Was muß ich wissen, lesen, mir ansehen um das Problem zu lösen?

4 Jörg Kruse

Mit jedem "new Audio" erzeugst du ein neues Objekt. Du könntest dieses in einer Variable speichern und am Anfang der Funktion abfragen, ob diese bereits existiert und falls ja, ob das betreffende Lied nicht pausiert. Falls zutreffend, wird das Abpielen des Lieds mittels pause() beendet. Danach wird die Variable mit einem neuen Obejkt überschrieben

function abspielen(lied) {
    if (typeof(audio) != "undefined" && audio.paused === false) {
        audio.pause();
    }
    audio = new Audio(lied);
    audio.play();
}

5 Jörg Kruse

Besser ist wahrscheinlich noch so:

function abspielen(lied) {
    if (typeof(audio) != "undefined" && audio.paused === false) {
        audio.setAttribute('src', lied);
        audio.load();
    } else {
        audio = new Audio(lied);
    }
    audio.play();
}

D.h. wenn das Audio-Objekt vorhanden ist, dann wird darin das neue Lied geladen, ansonsten wird das Audio-Objekt neu erstellt

nach oben

Ein Audioplayer um mehrere mp3´s abzuspielen

Beitrag schreiben (als Gast)