Comment lire un mp3 en utilisant Javascript? [dupliquer]
Cette question a déjà une réponse ici:
- lire le fichier mp3 en utilisant javascript 2 réponses
j'ai un répertoire sur mon site avec plusieurs mp3. Je crée dynamiquement une liste d'entre eux sur le site Web en utilisant php.
j'ai aussi une fonction drag and drop associée à eux et je peux sélectionner une liste de ceux mp3 à jouer.
maintenant, en donnant cette liste, Comment puis-je cliquer sur un bouton (Lecture) et faire passer le site Web au premier mp3 de la liste? (Je sais aussi où la musique est sur le site)
9 réponses
Si vous voulez une version qui fonctionne pour les vieux navigateur, j'ai fait de cette bibliothèque:
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 (à boucle, faux pas de boucle).stop autoriser start après (contrairement à remove).init re-régler l'argument du volume et de la boucle.
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
vous voudrez probablement utiliser le nouveau HTML5 audio élément pour créer un Audio objet, charger le mp3, et de les faire jouer.
en raison des incohérences du navigateur, ce code d'exemple est un peu long, mais il devrait s'adapter à vos besoins avec un peu de retouche.
//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);
}
Edit:
pour ajouter le support Flash, vous ajouteriez un object élément à l'intérieur de l' audio balise.
essayez ce générateur de script de lecteur audio:
http://www.scriptgenerator.net/44/Audio-player-script-generator/
Vous pouvez utiliser <audio> étiquette HTML5 pour lire l'audio en utilisant JavaScript.
mais ce n'est pas une solution de navigation croisée. Il a pris en charge seulement dans les navigateurs modernes. Pour la compatibilité entre navigateurs, vous aurez probablement besoin D'utiliser Flash pour cela (par exemple jPlayer).
Le tableau de compatibilité des navigateurs est fourni au lien I mentionné ci-dessus.
Vous pouvez essayer SoundManager 2: il permettra de gérer de manière transparente les <audio> marquez où il est supporté, et utilisez Flash partout où il ne l'est pas.
en Profiter ;)
<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>
plugin Jquery pour l'audio, lecteur mp3 http://www.jplayer.org/0.2.1/demos/