Partage
  • Partager sur Facebook
  • Partager sur Twitter

Jouer un son en Javascript

25 mai 2018 à 23:42:03

Bonjour !

Je me suis récemment remis au JS, avec NodeJS en back-end et la balise canvas en front-end. J'essaie de jouer un son dans le code via la méthode indiquée sur W3School: https://www.w3schools.com/graphics/game_sound.asp

J'ai donc fait ça:

var Sound = function(src)
{
	var sound = document.createElement("audio");

	sound.src = src;
	sound.setAttribute("preload", "auto");
	sound.setAttribute("controls", "none");
	sound.style.display = "none";
	document.body.appendChild(sound);

	this.play = function()
	{
		sound.pause();
		sound.currentTime = 0;
		sound.play();
		console.log(src + " is playing");
	}
	this.stop = function()
	{
		sound.stop();
	}
}

Je l'appelle ici:

var onChangeSound = new Sound("/assets/fx/on_change.mp3");

 Et plus loin dans une fonction qui gère les events claviers:

if (une touche est pressée)
    onChangeSound.play();

Sur Chrome et Firefox, je n'ai aucun son. J'ai essayé avec Edge et... Ça marche. Du coup j'y comprends pas grand chose. 
A chaque appui sur une touche, j'ai bien le message: "/assets/fx/on_change.ogg is playing" qui s'affiche dans la console, quel que soit le navigateur. Le son fonctionne aussi très bien sur l'exemple de W3School, du coup je reconnais que quelques explications ne me feraient pas de mal ! :)

Merci d'avance !

  • Partager sur Facebook
  • Partager sur Twitter
26 mai 2018 à 17:31:14

Bonjour dj-volts,

J'ai fait des tests ton script semble ok sur mes navigateurs,

https://codepen.io/Zonecss/pen/GdVrVg

Par compte, il y a un truc étrange (mais je suis pas expert) pourquoi il te parle ogg alors que c'est du mp3

tu n’aurais pas un pb d'encodage

  • Partager sur Facebook
  • Partager sur Twitter
Découvrez les Css avec la zonecss.fr
26 mai 2018 à 21:18:14

Ah oui, c'est peut-être ça le problème !

J'ai convertit un .ogg en .mp3, c'est juste un lapsus que j'ai fait en recopiant le message ! ;)

C'est bien .mp3 qui est affiché, je ne sais pas si ça change grand chose que le fichier soit convertit du .ogg au .mp3 ? Ton exemple fonctionne mais de mon côté ça ne marche toujours pas... Mais si ça fonctionne sur tous les navigateurs c'est que le problème doit venir de moi, ce qui est plutôt "rassurant" ! (Même si ça m'embête un peu de faire mes tests de son sur Edge... >.< )

  • Partager sur Facebook
  • Partager sur Twitter
27 mai 2018 à 8:00:11

Bonjour dj-volts,

Testes ton code avec un sons de mes exemples, si cela marche :

C'est que c'est ton mp3 qui est mal encodé

Si c'est comme la video le mp3 est reconnu par tout le monde

https://developer.mozilla.org/fr/docs/Web/HTML/Formats_pour_audio_video

  • Partager sur Facebook
  • Partager sur Twitter
Découvrez les Css avec la zonecss.fr
27 mai 2018 à 12:24:13

Tes exemples fonctionnent, c'est donc mes fichiers qui sont mal encodés...

Merci beaucoup !

  • Partager sur Facebook
  • Partager sur Twitter
10 mars 2021 à 22:45:49

const son = new Audio("son.mp3");
son.play();
son.volume = 0.5;
moi je fais comme ca
  • Partager sur Facebook
  • Partager sur Twitter
10 mars 2021 à 22:48:00

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter