Hoe speel je een mp3 af met Javascript?

Ik heb een directory op mijn website met verschillende mp3’s.
Ik maak dynamisch een lijst van hen op de website met behulp van php.

Ik heb ook een functie voor slepen en neerzetten en ik kan een lijst met die mp3’s selecteren om af te spelen.

Als ik die lijst geef, hoe kan ik dan op een knop (Afspelen) klikken en de website de eerste mp3 van de lijst laten afspelen? (Ik weet ook waar de muziek op de website staat)


Antwoord 1, autoriteit 100%

Als je een versie wilt die werkt voor oude browsers, heb ik deze bibliotheek gemaakt:

// 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;
    }
}

Documentatie:

Soundheeft drie argumenten. De sourceurl van het geluid, het volume(van 0tot 100), en de loop(trueom te herhalen, falseom niet te herhalen).
stoptoestaan startna (in tegenstelling tot remove).
initstel het volume en de lus van het argument opnieuw in.

Voorbeeld:

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

Antwoord 2, autoriteit 92%

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


Antwoord 3, autoriteit 29%

U zult waarschijnlijk het nieuwe HTML5 audio-element willen gebruiken om een audio-object te maken, de mp3 te laden en af te spelen.

Vanwege inconsistenties in de browser is deze voorbeeldcode een beetje lang, maar met een beetje tweaken zou het aan uw behoeften moeten voldoen.

//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);
}

Bewerken:

Als u Flash-ondersteuning wilt toevoegen, voegt u een object-element toe aan de audio-tag.


Antwoord 4, autoriteit 7%

Probeer deze audiospeler-scriptgenerator :

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


Antwoord 5, autoriteit 7%

U kunt <audio>gebruiken HTML5-tag om audio af te spelen met JavaScript.

Maar dit is geen oplossing voor meerdere browsers. Het wordt alleen ondersteund in moderne browsers. Voor compatibiliteit tussen browsers moet je daarvoor waarschijnlijk Flash gebruiken (bijvoorbeeld jPlayer).

Verenigbaarheidstabel voor browsers vindt u op de link die ik hierboven vermeldde.


Antwoord 6, autoriteit 4%

Je zou SoundManager 2kunnen proberen: het zal transparant omgaan met de <audio>tag waar het wordt ondersteund en gebruik Flash waar het niet wordt ondersteund.


Antwoord 7

Ervan uitgaande dat de browser MP3-weergave ondersteunt en vrij nieuw is om nieuwere JavaScript-functies te ondersteunen, raad ik aan om jPlayer te bekijken .
Je kunt een korte demo zelfstudiezien over hoe je het kunt implementeren.


Antwoord 8

Jquery-plug-in voor audio-mp3-speler http://www.jplayer.org/0.2.1 /demo’s/


Antwoord 9

Geniet ervan 😉

<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="https://mediaplayer.yahoo.com/js"></script>
</body>
</html>

Other episodes