Du son dans vos pages web avec SoundManager 2 !

OpenClassrooms

Formation

En Semi-présenciel Paris

Prix sur demande

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Les meilleurs cours en Sonorisation

Afficher tout

Afficher tout

Description

  • Typologie

    Formation

  • Méthodologie

    En semi-présentiel

  • Lieu

    Paris

Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Les sites et dates disponibles

Lieu

Date de début

Paris ((75) Paris)
Voir plan
7 Cité Paradis, 75010

Date de début

Consulter

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Le programme

Introduction du cours

Vous avez peut-être entendu dire qu'il était difficile de mettre du son dans les pages web. En combinant Javascript et les balises <object> ... ça devient vite compliqué.
Alors beaucoup se rabattent sur Flash.

Mais voilà ! SoundManager 2 est une bibliothèque Javascript qui, utilisant Flash, permet de lire des sons très facilement en Javascript ! :)

Dans ce mini-tuto, vous allez donc découvrir les possibilités offertes par SoundManager 2.

Pour bien comprendre ce tuto, il est conseillé de connaître au moins les bases du Javascript. Si besoin, consultez le big tuto à ce sujet :
Tout sur le Javascript

La base pour bien démarrerInstallation de SoundManager 2

Bon, la première étape pour utiliser SoundManager2, c'est de le télécharger ! :)
Rendez-vous donc sur la page de téléchargement du site officiel et cliquez sur le bouton Download pour récupérer la toute dernière version.

Première étape une fois téléchargé, dézippez le fichier !
Ouvrez ensuite le dossier qui contient normalement un certain nombre de choses :

  • Un dossier "demo"

  • Un dossier "doc"

  • Un dossier "script"

  • Un dossier "src"

  • Un dossier "swf"

  • Un fichier "index.html"

  • Et enfin un fichier "license.txt"

(Remarquez en passant le dossier "doc", qui contient la documentation de SoundManager 2 hors-ligne.)

Ici, les dossiers qui nous intéressent sont les dossiers "script", "src" et "swf". Vous pouvez par exemple les déplacer dans un dossier qui servira de dossier test pour ce mini-tuto.

Voilà, c'est tout ce qu'il y a besoin de faire pour utiliser SoundManager 2 ! :) On va pouvoir, sans plus attendre, passer à la pratique. :pirate:

Initialisation

Ca y est, on y est ! On va pouvoir mettre du son dans nos pages web !

Mais pour que la bibliothèque fonctionne bien, il faut l'initialiser. Voici comment ça marche.

Prenons un fichier XHTML de base :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Premiers pas avec SoundManager 2</title> </head> <body> </body> </html>

La première étape consiste à inclure le script principal de SoundManager.

<script type="text/javascript" src="script/soundmanager2.js"></script>

Et en dessous, on va mettre ceci :

<script type="text/javascript"> soundManager.url = 'swf/'; </script>

Cette première ligne sert à définir l'emplacement du répertoire "swf" dont on a parlé précédemment. Mettez donc l'emplacement qu'il a chez vous.

Ceci peut suffire pour démarrer, mais on va quand même ajouter une deuxième ligne, pour contrôler les éventuelles erreurs :

<script type="text/javascript"> soundManager.url = 'swf/'; soundManager.debugMode = true; </script>

Voilà. :p On peut commencer pour de bon.

Premiers sonsLire un son (de façon simple et directe...)

Voici donc notre page actuelle :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Mes premiers pas avec SoundManager 2</title> <script type="text/javascript" src="script/soundmanager2.js"></script> <script type="text/javascript"> soundManager.url = 'swf/'; soundManager.debugMode = true; </script> </head> <body> </body> </html>

Bon, je ne vous fais pas attendre plus longtemps : pour lire un son, il suffit d'écrire ça :

soundManager.play('premier_son','musique/son.mp3');

Le premier paramètre sera l'id du son créé. Mettez ce que vous voulez.
Le deuxième paramètre, c'est le lien relatif vers le son. Tout simplement.

Mais attendez ! Pour que ça marche, il faut attendre que SoundManager soit chargé. On met donc :

soundManager.onload = function() { soundManager.play("premier_son","musique/son.mp3"); }

Notre code complet est :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Mes premiers pas avec SoundManager 2</title> <script type="text/javascript" src="script/soundmanager2.js"></script> <script type="text/javascript"> soundManager.url = 'swf/'; soundManager.debugMode = true; soundManager.onload = function() { soundManager.play("premier_son","musique/son.mp3"); } </script> </head> <body> </body> </html>

Tester le code

Si vous ouvrez maintenant votre page dans un navigateur (avec le plugin Flash version 8 minimum), le son devrait démarrer.
En local, il arrive que Flash pose problème : allez sur le site de Flash et ajoutez le dossier actuel à la liste des dossiers de confiance.

Maintenant ça doit marcher. Sinon, c'est que vous avez fait une faute de frappe quelque part. ^^

"Ca marche, mais c'est quoi ce texte moche qui remplit ma page ?"

Vous vous souvenez de la ligne de debugMode ?

soundManager.debugMode = true;

Et bien voilà, ce texte nous dira tout ce qu'il se passe. Pratique pour détecter les erreurs. (D'ailleurs celle de Flash était normalement signalée.)

Il vous dérange ce texte ? Pour l'afficher de manière un peu plus jolie et un peu moins encombrante, ajoutez ce code CSS :

#soundmanager-debug { position:fixed; _position:absolute; /* IE <7 */ bottom:1em; right:1em; width:40em; height:30em; overflow:auto; border:1px solid #ccc; padding:1em; margin:1em; font-family:monaco,"VT-100",terminal,"lucida console",courier,system; font-size:x-small; background:#f6f6f6; opacity:0.9; color:#333; } #soundmanager-debug code { font-size:1.1em; *font-size:1em; } #soundmanager-debug div { margin-top:0.5em; }

Et voilà la "boîte de Debug" ! :) (Remarquez le petit bouton "-" en bas à droite, qui permet de masquer la boîte si nécessaire.)

Et puisqu'elle affiche les erreurs, jetez-y un coup d'oeil approfondi. Que voyez-vous ?

Citation

"premier_son" is an invalid sound ID.

Cette erreur apparaît parce que le son a été lancé de la manière la plus simple qui soit... mais pas la plus correcte. (Et le debug, il n'a pas trop aimé... >_ )

Lire un son (dans les règles de l'Art)

Pour faire bien, il faut d'abord créer le son. Et seulement ensuite, le démarrer.
Pour ça on utilisera :

soundManager.createSound(Obj);

Cette méthode permet en plus d'ajouter pas mal de fonctions à notre lecture de son. On verra ça un peu plus tard, mais retenez une chose : faire comme ça, c'est mieux ! :)

Donc, voici ce qu'il faut écrire pour faire... la même chose qu'avant :

soundManager.onload = function() { soundManager.createSound( { id : "premier_son", url : "musique/son.mp3" // Attention pas de virgule ici ! }); soundManager.play("premier_son"); }

Remarquez que l'erreur du debug a disparu ! :)
Vous voulez mieux ? Encore mieux ? Voici la façon parfaite de créer un son avec SoundManager : on va utiliser l'objet SMSound retourné par la méthode createSound()...

var premier_son; // On le déclare avant, histoire qu'il soit une variable globale. soundManager.onload = function() { premier_son = soundManager.createSound( { id : "premier_son", url : "musique/son.mp3" // Attention pas de virgule ici ! }); premier_son.play(); }

Voilà pour la lecture d'un son. Je vous mets le code complet actuel (j'ai mis le CSS de la "boîte du Debug" dans un fichier externe pour ne pas encombrer le code) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Mes premiers pas avec SoundManager 2</title> <link rel="stylesheet" type="text/css" href="debug.css" /> <script type="text/javascript" src="script/soundmanager2.js"></script> <script type="text/javascript"> soundManager.url = 'swf/'; soundManager.debugMode = true; var premier_son; soundManager.onload = function() { premier_son = soundManager.createSound( { id : "premier_son", url : "musique/son.mp3" // Attention pas de virgule ici ! }); premier_son.play(); } </script> </head> <body> </body> </html>

Tester le code

Et on va maintenant pouvoir s'attaquer aux nombreuses fonctionnalités supplémentaires offertes par SoundManager. :soleil:

L'objet SMSound en détailMéthodes

Voilà, vous savez lancer un son. Mais ne nous arrêtons en si bon chemin.

L'objet SMSound, que nous avons créé précédemment, vous réserve encore quelques surprises.

play() et stop()

Et oui ! Les méthodes, vous en avez déjà utilisé une : la méthode play(). Dans le même ordre d'idée, il existe bien entendu la méthode stop().

pause(), resume() et togglePause()

Voici trois méthodes qui nous permettent facilement de mettre en pause et de relancer le son. La troisième méthode réunit les deux premières en stoppant le son s'il était en lecture et en le relançant s'il était en pause.

On peut donc facilement imaginer un code qui offrirait la possibilité de lire un son, avec en plus l'option de le mettre en pause.

Le code HTML, très simple, peut se composer de trois boutons :

<button onclick="premier_son.play();">Lire</button> <button onclick="premier_son.pause();">Pause</button> <button onclick="premier_son.resume();">Reprise</button>

Tester le code

(Pour offrir la possibilité de démarrer le son, il faut bien sûr supprimer la ligne premier_son.play() du code Javascript.)

mute() et unmute()

Ces deux propriétés vont permettre de couper le son (mode "muet") et de le réactiver. De même que précédemment, on peut créer des boutons offrant cette possibilité à l'utilisateur.

<button onclick="premier_son.play();">Lire</button> <button onclick="premier_son.mute();">Passer en mode "muet"</button> <button onclick="premier_son.unmute();">Sortir du mode "muet"</button>

Tester le code

setVolume(integer), setPan(integer) et setPosition(integer)

Nous avons ici trois propriétés permettant de modifier respectivement le volume, la balance (gauche/droite) et la position du son. Elles prennent chacune en paramètre un "integer", c'est-à-dire un nombre entier.

  • setVolume : prend en paramètre un entier entre 0 et 100.

  • setPan : prend en paramètre un entier entre -100 (son à gauche) et 100 (son à droite).

  • setPosition : prend en paramètre un entier indiquant à combien de millisecondes du début le son doit être lu.

Voyons maintenant les événements, qui nous seront très utiles par la suite.

Evénements

Les événements de l'objet SMSound vont pouvoir être placés à la création de l'objet.

onload()

L'événement onload() se produit dès que le son a fini de charger. Pratique pour tenir l'utilisateur au courant du chargement.

On pourrait par exemple mettre un petit message dans le code HTML :

<span id="loading">Chargement en cours...</span>

Et dans le javascript, lors de la création du son, on aurait ceci :

premier_son = soundManager.createSound( { id : "premier_son", url : "musique/son.mp3", onload : function() { document.getElementById("loading").innerHTML = "Chargement terminé !"; } // Attention pas de virgule ici ! }); premier_son.play();

Tester le code

onplay(), onstop(), onpause() et onresume()

Ces événements vont avec les méthodes que nous avons vu juste avant. Je ne pense pas avoir besoin de les détailler plus. On les utilise de la même manière que onload().

onbeforefinish(), onjustbeforefinish(), onfinish() et onbeforefinishcomplete()

On a là quatre événements assez similaires, qui auront lieu vers la fin de la lecture du son.

  • onbeforefinish : a lieu environ 5000 millisecondes (= 5 secondes) avant la fin de la lecture.

  • onjustbeforefinish : a lieu environ 200 millisecondes (= 0.2 seconde) avant la fin de la lecture.

  • onfinish : a lieu à la fin de la lecture.

  • onbeforefinishcomplete : a lieu encore après onfinish(), juste avant que les données du son ne soient réinitialisées.

On peut rapidement trouver une utilité à ces événements. Par exemple pour répéter le même son indéfiniment.

premier_son = soundManager.createSound( { id : "premier_son", url : "musique/son.mp3", onfinish : function() { this.play(); } // Attention pas de virgule ici ! }); premier_son.play();

Catégories liées

  • Cours web services
  • Cours dans 93
  • Cours ce 2
  • Cours erp 2
  • Cours dans patisserie chocolaterie
  • Cours technique vente dans agence
  • Cours creation site web
  • Cours programmation web langage html
  • Cours Sonorisation
  • Cours Sonorisation a distance
  • Formation a distance
  • Cours Sonorisation (75) Paris
  • Cours (75) Paris
  • Formations OpenClassrooms

Appeler le centre

180888030

Avez-vous besoin d'un coach de formation?

Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.

Du son dans vos pages web avec SoundManager 2 !

Prix sur demande

Les meilleurs cours en Sonorisation

Afficher tout

Afficher tout