it-swarm.com.de

Wie spiele ich ein MP3 mit Javascript?

Ich habe auf meiner Website ein Verzeichnis mit mehreren MP3-Dateien . Ich erstelle dynamisch eine Liste mit PHP auf der Website.

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

Wenn ich nun diese Liste gebe, wie kann ich dann auf eine Schaltfläche (Abspielen) klicken und die Website dazu veranlassen, den ersten MP3 der Liste abzuspielen? (Ich weiß auch, wo die Musik auf der Website ist)

20
aF.

Wenn Sie eine Version wünschen, die für alte Browser geeignet ist, 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 an. Die URL des Sounds, die Lautstärke (von 0 bis 100) und die Schleife (True to Loop, false nicht Loop).
stop Erlaube start nach (im Gegensatz zu remove).
init setzt das Argument volume und loop 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
20
Mageek

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

73
Ties

Sie werden wahrscheinlich das neue audio-Element von HTML5 verwenden, um ein Audio-Objekt zu erstellen, die MP3-Datei zu laden und sie abzuspielen.

Aufgrund von Inkonsistenzen im Browser ist dieser Beispielcode etwas lang, sollte jedoch mit ein wenig Optimierungsbedarf 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 die Flash-Unterstützung hinzuzufügen, fügen Sie ein object-Element innerhalb des audio-Tags hinzu.

7
Jeffrey Sweeney

Sie können das <audio> HTML5-Tag verwenden, um Audio mit JavaScript abzuspielen.

Dies ist jedoch keine Browserübergreifende Lösung. Es wird nur in modernen Browsern unterstützt. Aus Gründen der Cross-Browser-Kompatibilität müssen Sie dazu wahrscheinlich Flash verwenden (zum Beispiel jPlayer ).

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

2
antyrat

Versuchen Sie diesen Audio-Player-Skriptgenerator:

http://www.scriptgenerator.net/44/Audio-player-script-generator/

2

Sie könnten versuchen, SoundManager 2 : Der <audio>-Tag wird überall dort, wo er unterstützt wird, transparent behandelt, und Flash wird dort verwendet, wo er nicht installiert ist.

1
Haroldo_OK

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

0
Parag

Geniesse es ;)

<html>
<head>
    <title>Play my music....</title>
</head>
<body>
    <ul>
        <li>
        <a id="PlayLink" href="http://www.moderntalking.ru/real/music/Modern_Talking-You_Can_Win(DEMO).mp3" onclick="pplayMusic(this, 'music_select');">U Can Win</a>
        </li>
        <li>
        <a id="A1" href="http://www.moderntalking.ru/real/music/Modern_Talking-Brother_Louie(DEMO).mp3" onclick="pplayMusic(this, 'music_select');">Brother Louie</a>
        </li>
    </ul>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</body>
</html>
0
RAM

Angenommen, der Browser unterstützt die MP3-Wiedergabe und ist relativ neu, um neuere JavaScript-Funktionen zu unterstützen, würde ich empfehlen, einen Blick auf jPlayer . Sie können eine kurze Demo Anleitung sehen, wie man sie implementiert.

0
paulius_l