Wie spielt man eine mp3 mit Javascript ab? [duplicate]

Lesezeit: 4 Minuten

Benutzer-Avatar
aF.

Ich habe auf meiner Website ein Verzeichnis mit mehreren MP3s. Ich erstelle mit PHP dynamisch eine Liste davon auf der Website.

Ich habe ihnen auch eine Drag-and-Drop-Funktion zugeordnet und kann eine Liste dieser MP3s zum Abspielen auswählen.

Nun, wenn ich diese Liste gebe, wie kann ich auf eine Schaltfläche (Play) klicken und die Website dazu bringen, das erste MP3 der Liste abzuspielen? (Ich weiß auch, wo die Musik auf der Website ist)

  • In modernen Browsern könnten Sie verwenden HTML5 <audio>

    – Millielch

    4. Juli 2012 um 14:25 Uhr


new Audio('<url>').play()

  • Vollständige Dokumentation: developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement

    – aymericbeaumet

    14. Januar 2016 um 1:39 Uhr

  • Arbeitete als Charm … ohne Komplexität

    – Avinash

    24. März 2019 um 12:21 Uhr

  • Was ist, wenn ich mehrere Songs spielen möchte? Wird keine ausstellen new Audio für jeden einen Speicherverlust verursachen?

    – Rodrigo

    24. April 2019 um 15:34 Uhr

  • @ Rodrigo wahrscheinlich, aber es ist eine andere Frage. Das <audio> Tag funktioniert (in diesem Fall) genauso wie ein <img> Schild; Sie können die aktualisieren src -Eigenschaft, um die Datei für das Element zu ändern.

    – Krawatten

    29. April 2019 um 7:48 Uhr

Benutzer-Avatar
Mageek

Wenn Sie eine Version wünschen, die für alte Browser funktioniert, habe ich diese Bibliothek erstellt:

// source: https://stackoverflow.com/a/11331200/4298200
function Sound(source, volume, loop)
{
    this.source = source;
    this.volume = volume;
    this.loop = loop;
    var son;
    this.son = son;
    this.finish = false;
    this.stop = function()
    {
        document.body.removeChild(this.son);
    }
    this.start = function()
    {
        if (this.finish) return false;
        this.son = document.createElement("embed");
        this.son.setAttribute("src", this.source);
        this.son.setAttribute("hidden", "true");
        this.son.setAttribute("volume", this.volume);
        this.son.setAttribute("autostart", "true");
        this.son.setAttribute("loop", this.loop);
        document.body.appendChild(this.son);
    }
    this.remove = function()
    {
        document.body.removeChild(this.son);
        this.finish = true;
    }
    this.init = function(volume, loop)
    {
        this.finish = false;
        this.volume = volume;
        this.loop = loop;
    }
}

Dokumentation:

Sound nimmt drei Argumente. Das source URL des Sounds, der volume (aus 0 zu 100), und die loop (true Schleife, false nicht zu schleifen).
stop erlauben start danach (im Gegensatz zu remove).
init Setzen Sie die Argumentlautstärke und Schleife zurück.

Beispiel:

var foo = new Sound("url", 100, true);
foo.start();
foo.stop();
foo.start();
foo.init(100, false);
foo.remove();
//Here you you cannot start foo any more

  • Ist es möglich zu wissen, wann eine Musik endet?

    – aF.

    4. Juli 2012 um 16:09 Uhr

  • Hast du die Länge der Musik?

    – Mageek

    4. Juli 2012 um 18:35 Uhr

  • Browserunterstützung für einfaches Audio: caniuse.com/#search=audio

    – Lukas Lies

    30. Januar 2016 um 11:02 Uhr

  • Braucht es ein bestimmtes Audioformat? Funktioniert hier nicht mit MP3s..

    – David Lopez

    5. Oktober 2018 um 19:01 Uhr

Sie werden wahrscheinlich das neue HTML5 verwenden wollen audio Element zum Erstellen eines Audio Objekt, laden Sie die mp3 und spielen Sie sie ab.

Aufgrund von Browser-Inkonsistenzen ist dieser Beispielcode etwas langatmig, sollte aber mit ein wenig Anpassung Ihren Anforderungen entsprechen.

//Create the audio tag
var soundFile = document.createElement("audio");
soundFile.preload = "auto";

//Load the sound file (using a source element for expandability)
var src = document.createElement("source");
src.src = fileName + ".mp3";
soundFile.appendChild(src);

//Load the audio tag
//It auto plays as a fallback
soundFile.load();
soundFile.volume = 0.000000;
soundFile.play();

//Plays the sound
function play() {
   //Set the current time for the audio file to the beginning
   soundFile.currentTime = 0.01;
   soundFile.volume = volume;

   //Due to a bug in Firefox, the audio needs to be played after a delay
   setTimeout(function(){soundFile.play();},1);
}

Bearbeiten:

Um Flash-Unterstützung hinzuzufügen, würden Sie eine anhängen object Element innerhalb der audio Schild.

  • Ich weiß, diese Antwort ist 4 Jahre alt. Aber von der Liste hier ist dies die beste. Ich habe es für meine Zwecke etwas angepasst. Aber es funktioniert bei allem. Sogar IE. Und das will wirklich was heißen.

    – durbnpoisn

    6. Dezember 2016 um 18:17 Uhr

Benutzer-Avatar
Anthrazit

Sie können verwenden <audio> HTML5-Tag zum Abspielen von Audio mit JavaScript.

Dies ist jedoch keine Cross-Browser-Lösung. Es wird nur in modernen Browsern unterstützt. Für die browserübergreifende Kompatibilität müssen Sie dafür wahrscheinlich Flash verwenden (z jPlayer).

Die Browser-Kompatibilitätstabelle finden Sie unter dem oben genannten Link.

Du könntest es versuchen SoundManager 2: es wird die transparent handhaben <audio> Taggen Sie überall dort, wo es unterstützt wird, und verwenden Sie Flash überall dort, wo es nicht unterstützt wird.

Benutzer-Avatar
paulius_l

Angenommen, der Browser unterstützt die MP3-Wiedergabe und ist ziemlich neu, um neuere JavaScript-Funktionen zu unterstützen, würde ich vorschlagen, einen Blick darauf zu werfen jPlayer. Sie können eine kurze Demo sehen Lernprogramm darüber, wie man es umsetzt.

Benutzer-Avatar
Parag

Jquery-Plugin für Audio-MP3-Player http://www.jplayer.org/0.2.1/demos/

1187270cookie-checkWie spielt man eine mp3 mit Javascript ab? [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy