18041 sujets

Questions générales et questions de débutants

[Résolu] HTML5 / Audio Player / Buzz js library

Bonjour à tous,

Je rencontre un problème (de débutant sûrement) sur l'utilisation de la librairie javascript Buzz! qui étend les fonctionnalités de la balise <audio> d'HTML5 (http://buzz.jaysalvat.com/)

Ayant du mal à trouver les réponses à mes questions dans la doc fournie, je me tourne vers ce forum.

Voici mon code :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Import the Buzz Javascript Audio library -->
<script type="text/javascript" language="javascript" src="buzz.js"></script>

<script type="text/javascript">

var monSon = new buzz.sound( "monUrl", {formats: [ "ogg", "mp3" ]}); 

function jouer(){
	monSon.play();
}

</script>

</head>

<body>

<a href="javascript:jouer();">Jouer le son</a>

</body>
</html>


Jusque là, ça fonctionne à peu près, sauf qu'en réalité, j'aurai plusieurs sons à jouer, et je voudrais donc passer en paramètre de la fonction jouer();, l'URL du son que je veux effectivement jouer : jouer(monUrl);

Problème, l'URL est défini dans le constructeur var monSon = new buzz.sound( "monUrl", {formats: [ "ogg", "mp3" ]}); qui se trouve hors de la fonction. Donc ça ne fonctionnera pas.

J'ai bien essayé de déclarer la variable monSon à l'extérieur de la fonction, puis définir l'instance à l'intérieur de la fonction, mais ça ne semble pas fonctionner :

<script type="text/javascript">

var monSon; 

function jouer(){
	monSon = new buzz.sound( "monUrl", {formats: [ "ogg", "mp3"]});
	monSon.play();
}

</script>


Bref, c'est sûrement tout bête, mais après deux jours de recherche, je tourne en rond.
Si quelqu'un a une idée, merci d'avance Smiley smile
Modifié par Kittisak (23 May 2012 - 18:40)
Est-ce que sauvegarder tes données dans un hash pourrait t'aider ?


var sons = {
	"/url/" : new buzz.sound( "/url/", {formats: [ "ogg", "mp3" ]});
}

var jouer = function( url ) {
	sons[ url ].play();
}

// utilisation
jouer( "/url/" );

Modifié par Vaxilart (23 May 2012 - 23:00)
Hello.

Ton souci est que tu passes ton paramètres url en dur, alors que tu dois le passer en paramètre de ta fonction jouer();

En simplifié : 
function jouer(url){
	var monSon = new buzz.sound(url, {formats: [ "ogg", "mp3" ]}); 
	monSon.play();
}

jouer('/url1/');
jouer('/url2/');


@Vaxilart: Ta version devrait fonctionner, mais elle a le défaut d'instancier par avance tous les objets buzz, ce qui peux être lourd si il y en a beaucoup.

En optimisant avec un cache rustique : 
var sons = {},
	jouer = function (url) {
		//Test que le son n'est pas déjà en cache
		if (!sons[ url ]) {
			//On le crée et le stocke
			sons[ url ] = new buzz.sound(url, {formats: [ "ogg", "mp3" ]});
		}
	
		//On le joue dans tous les cas
		sons[ url ].play();
	};

// utilisation
jouer( "/url1/" );
jouer( "/url2/" );
Hello,

Merci pour vos réponses

@Florian-R :

C'est effectivement ce que j'aimerais faire, mais dès lors que je déclare la variable monSon à l'intérieur de la fonction jouer(), il ne se passer plus rien. Si je sors la déclaration de variable à l'extérieur de la fonction, ça marche, mais je ne peux plus passer l'url en paramètre.

Je me dis qu'il faudrait déclarer la fonction à l'extérieur et définir la propriété indiquant l'url à l'intérieur de la fonction, mais je ne trouve pas la syntaxe. Quelque chose du genre :



var monSon ;

function jouer(url){
	var monSon = new buzz.sound(url, {formats: [ "ogg", "mp3" ]}); 
	monSon.play();
}

jouer('/url1/');
jouer('/url2/');


ou bien



var monSon = new buzz.sound() ;

function jouer(url){
        monSon.src = url;
        monSon.formats = ["ogg", "mp3"]; 
	monSon.play();
}

jouer('/url1/');
jouer('/url2/');


Mais bon là je raisonne en Action Script...


@Vaxilart :

Je ne comprends cette syntaxe, mais je vais me renseigner. Celà dit, en copiant/collant le code, ça ne fonctionne pas non plus Smiley decu
Vraiment bizarre, je viens de me faire une petite page de test en local, et ça fonctionne bien.

Pour info, j'avais mis les deux appels à jouer() pour l'exemple, mais dans ton cas tu dois les ajouter sur un event au click sur ton lien (au passage, faire ça sur un href, c'est pas terrible, et mieux vaut utiliser un <button>).

Tu n'aurais pas une page en ligne, qu'on puisse vérifier que l'erreur ne vient pas d'autre part?
Tu n'as pas mis le fichier ogg, qui donne une 404 (voir l'onglet console de Firebug). Le format mp3 n'est pas pris en compte par Firefox. Par contre, ton bouton play fonctionne sous Chrome.

Le bouton stop ne fonctionnera pas, car ta variable monSon a pour portée ta fonction jouer(), elle est non définie dans stopper();
Arrrrr, je fais toujours l'erreur de ne pas tester sur d'autre navigateur, et je suis sous Safari.

Donc effectivement, en déclarant la variable à l'exterieur et en définisant les propriétés à intérieur de la fonction, ça fonctionne (jouer et stopper) sur Firefox et Chrome :

http://www.serialrecords.com/test/

(ça m'a même résolu un autre problème : avant je devais cliquer deux fois pour rejouer un titre après l'avoir stopper).

Du coup, tu saurais pourquoi ça ne fonctionne pas sous Safari ?

PS : j'ai aussi rajouté le fichier .ogg.
Aucune idée, et je ne peux pas vérifier sous Safari.

Tu as bien mis au même emplacement un ogg et un mp3 avec le même nom? Safari ne prend pas en compte le ogg.
Oui les deux formats sont côte à côte.

Et comme dit plus haut, si je définis la variable monSon à l'extérieur de la fonction jouer(), ça marche sous Safari. Mais je ne peux plus modifier la variable en utilisant le paramètre de fonction.

Serait-il possible que ça vienne d'un bug dans la librairie Buzz ?
Salut, base toi sur la deuxième méthode que Florian te suggère dans son post. Ainsi tu utiliseras un objet global pour y ranger tes différents sons. Et ce faisant, tu y auras accès à partir de tes deux fonctions.
D'ailleurs, je viens de tester, ça marche sur Safari PC... j'ai donc l'impression que ça ne marche pas seulement sur Safari Mac Smiley decu

Et Safari Mac lit bien le mp3 puisqu'avec l'autre méthode (définition de la variable son en dehors de la fonction), ça marche.
Bizarre.

Tu as vérifié la console de Safari? De ce que j'en ai vu Buzz est plutôt bien foutu sur ces retours d'erreurs, ça devrait t'aiguiller.
Ma foi, d'après la console, l'objet monSon existe bien. Ensuite il y a toute une chiée de propriétés aux quelles je ne comprends pas grand chose. J'ai repéré les url .mp3 et .ogg parmi tout ça. Donc a priori, je dirais que tout semble normal.

Mais je viens de tomber la dessus :

http://stackoverflow.com/questions/9920297/html5-audio-canplay-event-doesnt-fire-on-safari-mac-desktop

Je vais essayer de me tourner cers cette piste, mais si quelqu'un y comprend quelque chose, je ne suis pas contre quelques explications Smiley smile
Bon bah voilà la solution (ou du moins UNE solution) :

Il faut mettre l'option autoplay sur true.


var monSon;

function jouer(url){
	monSon = new buzz.sound( url, {formats: [ "ogg", "mp3" ], autoplay:true});
	monSon.play();
}

function stopper(){
		monSon.stop();
	}


Merci à tous les deux pour votre aide Smiley smile
Sujet clos
Aller à