Web Son

NSI web et interactivité

Découverte du javascript 2

Utilisation de sons dans une page web

On se bornera ici à introduire les instructions minimales qui permettent de charger un son contenu dans un fichier pour ensuite demander sa lecture par le navigateur internet lors d’un événement.

Partir par exemple du résultat de l’activité NSI_web_interactivite.pdf

Les sons (une multitude est disponible gratuitement sur internet) peuvent être stocker dans des fichiers sous format très variés. Les fonctions disponibles dans javascript permettent normalement d’en charger la plupart en mémoire de manière utilisable par le navigateur.

On trouve aisément sur internet un modèle de fonction pour charger un fichier. Pour ce type de travail de « bas niveau » en informatique il ne faut « JAMAIS REINVENTER LA ROUE ». Réécrire soi-même ces fonctions est « possible » mais prend beaucoup de temps. Si votre objectif est plus complexe et que ce que réalise la fonction fournie vous convient n’hésiter pas à l’employer.

Fonction proposée sur le site World Wide Web consortium :

//source : https://www.w3schools.com/graphics/game_sound.asp

//fonction qui charge le fichier donné en argument et y associe 2 autres fonctions : play() et stop()

function sound(src) {

  this.sound = document.createElement("audio");

  this.sound.src = src;

  this.sound.setAttribute("preload", "auto");

  this.sound.setAttribute("controls", "none");

  this.sound.style.display = "none";

  document.body.appendChild(this.sound);

  this.play = function(){

    this.sound.play();

  }

  this.stop = function(){

    this.sound.pause();

  }

}

Très grossièrement ce code utilise des fonctions prédéfinies dans la page web (comme les fonctions des modules python) :

createElement() permet de créer dynamiquement un nouvel élément HTML (image, son, texte…)

on initialise quelques paramètres (src, controls, display) pour indiquer la fichier à lire pour le son, demander à ce qu’il n’y ait pas de boutons de contrôle sur la page (« controls », « none »)

et enfin on ajoute le son comme balise HTML « enfant » (=inclus) dans le corps de la page (body.appendChild(this.sound)

avant notre fonction dessiner() on va demander à charger le fichier « son_rebond.mp3 » :

sonRebond = new sound("son_rebond.mp3");

ensuite dans la partie du code qui permet de gérer les rebonds on utilise la fonction « play() » à chaque changement de direction :