web-dev-qa-db-fra.com

Comment jouer un mp3 en utilisant Javascript?

J'ai un répertoire sur mon site Web avec plusieurs mp3 . Je crée dynamiquement une liste de ceux-ci dans le site Web en utilisant php.

J'ai aussi une fonction glisser-déposer qui leur est associée et je peux sélectionner une liste de ces mp3 à lire.

Maintenant, en donnant cette liste, comment puis-je cliquer sur un bouton (Lire) et faire en sorte que le site Web joue le premier mp3 de la liste? (Je sais aussi où se trouve la musique sur le site)

javascripthtmlmp3
20
aF.

Si vous voulez une version qui fonctionne pour l'ancien navigateur, j'ai créé cette bibliothèque:

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

Documentation:

Sound prend trois arguments. L'URL du son, le volume (de 0 à 100) et la boucle (true pour boucle, faux pour ne pas boucle).
stop permet de start après (contrairement à remove).
init rétablit le volume et la boucle de l'argument.

Exemple:

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

Vous voudrez probablement utiliser le nouvel élément HTML5 audio pour créer un objet Audio, charger le fichier mp3 et le lire.

En raison des incohérences du navigateur, cet exemple de code est un peu long, mais il devrait répondre à vos besoins avec un peu de peaufinage.

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

Modifier:

Pour ajouter la prise en charge de Flash, vous devez ajouter un élément object dans la balise audio.

7
Jeffrey Sweeney

Vous pouvez utiliser <audio> balise HTML5 pour lire des fichiers audio à l'aide de JavaScript.

Mais ce n'est pas une solution multi-navigateur. Il ne prend en charge que les navigateurs modernes. Pour la compatibilité entre navigateurs, vous devrez probablement utiliser Flash pour cela (par exemple jPlayer ).

Le tableau de compatibilité des navigateurs est fourni au lien que j'ai mentionné ci-dessus.

2
antyrat

Essayez ce générateur de script de lecteur audio:

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

2
Clément Andraud

Vous pouvez essayer SoundManager 2 : il gérera de manière transparente la balise <audio> partout où il sera pris en charge, et utilisera Flash ailleurs.

1
Haroldo_OK

Jquery plugin pour lecteur mp3 audio http://www.jplayer.org/0.2.1/demos/

0
Parag

Profitez-en ;)

<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

En supposant que le navigateur prenne en charge la lecture MP3 et soit relativement nouveau pour prendre en charge les nouvelles fonctionnalités JavaScript, je vous suggère de jeter un oeil à jPlayer . Vous pouvez voir une courte démonstration tutorial sur la façon de le mettre en œuvre.

0
paulius_l