Discussion :

[mazertys17]

Bonjour,

J'ai un petit problème d'audio javascript.
Celui ci fonctionne parfaitement dés que le joueur effectue une action,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
document.addEventListener('mousedown',onMouseDown);
function onMouseDown(event){
 
    var audio = new Audio('audio.wav');
    audio .play();
}

mais s'il est lancé depuis un interval par exemple, alors là il ne fonctione pas et dit dans la console :

NotSupportedError: The media resource indicated by the src attribute or assigned media provider object was not suitable.

Pourtant si je joue ce son dans un clic comme plus haut, il fonctionne.

Avez vous une idée de ce qui a pu se passer ?

Merci si vous pouvez m'éclairer.

[Watilin]

Normalement, l’élément <audio> est capable de lire du wav. Comme ta console indique “the media resource […] was not suitable”, je vois deux causes possibles au problème :
A. Le wav est encodé de façon inhabituelle. Tu peux utiliser l’outil MediaInfo pour voir l’encodage du fichier. J’ai vu dans une page de doc que Firefox peut lire du PCM 8 bits ou 16 bits, c’est probablement le cas pour les autres navigateurs également.
B. Le serveur ne sert pas le fichier, ou l’envoie avec des en-têtes HTTP bizarres (par exemple un mauvais type MIME). Tu peux utiliser l’onglet réseau de la console pour avoir plus d’infos.
J’espère que ces maigres infos pourront t’aider

[mazertys17]

Merci pour ta réponse.

J'ai essayé avec des mp3 et même problème.
Pourtant quand je joue le même son, depuis un évent comme "onmousedown", il marche, mais pas depuis un autre endroit.
Donc je suppose que ce n'est pas un problème de son en lui même puisqu'il peut être joué et marche bien selon la circonstance.

[Watilin]

Toutes mes excuses, j’avais lu ta question un peu trop vite et j’ai zappé ce passage.

mais s'il est lancé depuis un interval par exemple, alors là il ne fonctione pas

Je viens de tester moi-même de jouer un son depuis un setInterval sous Firefox, et la console a affiché deux messages, un d’avertissement et un d’erreur.

La lecture automatique n’est autorisée que lorsqu’elle a été approuvée par l’utilisateur, que le site est activé par l’utilisateur, ou que le média est muet.
NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Je traduis le message d’erreur au cas où des non anglophones passent par là :

La méthode play n’est pas autorisée par le navigateur ou la plateforme dans le contexte actuel, possiblement parce que l’utilisateur a refusé la permission.

Curieusement, j’ai un prototype de jeu avec un cycle principal basé sur setTimeout et qui est parfaitement capable de jouer des sons. La différence est qu’il utilise AudioContext, mais ce n’est pas logique que les navigateurs interdisent une méthode et pas l’autre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
"use strict";
 
const req = new XMLHttpRequest();
req.responseType = "arraybuffer";
 
req.onerror = () => {
  console.warn("Échec du chargement de l’audio");
};
 
// Note : je te conseille de coder un mini système de cache pour éviter
// d’avoir à refaire la requête et le décodage à chaque fois que tu veux
// lire le son.
 
req.onload = () => {
  const acx = new AudioContext();
  acx.decodeAudioData(req.response, (decodedData) => {
    // crée un « nœud d’entrée » dans le contexte audio
    const node = acx.createBufferSource();
 
    // nourrit le nœud avec les données décodées
    node.buffer = decodedData;
 
    // connecte le nœud à la sortie audio
    node.connect(acx.destination);
 
    // joue le son
    node.start(0);
  }, (error) => {
    console.warn("Erreur lors du décodage", error);
  });
};
 
req.open("GET", "audio.wav");
req.send();

[mazertys17]

Merci Watilin.

J'ai testé ce code, cela fonctionne, mais de la même façon.
En fait si je clique avant que le son soit lancé, il marche, mais si au contraire il n'y a aucune interaction alors il me dit dans la console :

NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Mais en fait c'est pas tout à fait vrai puisque ce même code fonctionne s'il y a eu interaction avant de lire le son.

Donc j'ai l'impression que c'est une façon de faire en sorte que les sites webs ne jouent pas le son automatiquement si l'utilisateur n'est pas en train de naviger dessus...car effectivement celà pourrait vite devenir cacophonique.
Cependant une fois que la musique est lancée, je peux changer d'onglets et le son continue d'être audible.


Il va faloir trouver une combine pour faire en sorte que le son soit joué quoiqu'il arrive mais j'avoue que je ne vois pas trop comment faire...

[Invité]

Bonjour,

...mais s'il est lancé depuis un interval....
...mais pas depuis un autre endroit...

• Peux-tu expliquer ce que ça veut dire : "depuis un interval" ? "un autre endroit" ?
• Donner un exemple ?

[mazertys17]

jreaux62 Ok!

En fait, j'utilise la fonction setInterval qui var tourner en boucle et en fonction de tel ou tel chose il va se déclencher des son par ex.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
setInterval(function () {
    ...
    if ( bidul ){ 
         var audio = new Audio('monson.mp3');
         audio.play();
   }
 
},10);

Et ça marche...seulement si l'utilisateur a cliqué avant que la fonction se lance...en tout cas sur les navigateurs que j'ai pu testé.
(sans quoi il se passe ce écrit plus haut).

[Invité]

Tu es bien gentil.....

... mais comment veux-tu qu'on t'aide si tu ne donnes pas un code suffisamment complet :

• qui reproduit le problème
• et qu'on peut TESTER ??

[mazertys17]

jreaux62 OK, pas de pb :

Tout simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
setInterval(function () {
 
    var audio = new Audio('son.mp3');
    audio.play();
 
},1000);

avec un son quelconque qui est censé se jouer toutes les secondes.

Si j'ouvre la page il ne se passe rien. Mais dés que je clique, alors là le son joue en boucle.

[Watilin]

Tu as une erreur qui parle de la méthode play même avec mon code qui utilise node.start ? Sous quel navigateur ?

Concernant Firefox, avec un profil vierge (aucune permission spéciale qui pourrait parasiter les tests), le son est joué et je n’ai pas de message d’erreur. Pour Chrome, j’ai obtenu un message d’avertissement lors du chargement de la page :

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

Traduction :

L’AudioContext n’a pas été autorisé à démarrer. Il doit être réactivé (ou créé) après une interaction de l’utilisateur sur la page.

(Note : j’ai eu beaucoup de mal à obtenir ce message une deuxième fois, il a fallu que je crée un nouveau profil. Je suppose qu’il y a des moyens plus simples.)

Après une rapide recherche, je suis tombé sur cette doc : autoplay policy changes, où on peut lire notamment que l’AudioContext a une propriété .state qui peut être :

• "running" : les sons peuvent être joués ;
• "suspended" : les sons sont temporairement bloqués ;
• (il y a aussi "closed" mais on s’en fout).

On peut se servir de ça pour déterminer de manière fiable si les sons ne sont pas autorisés, et utiliser la méthode .resume() après une interaction explicite de l’utilisateur ou de l’utilisatrice, comme dans l’exemple donné :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

J’ai aussi appris que la méthode .play() de l’élément <audio> renvoyait en fait une promesse, et on peut appeler le .catch() de cette promesse pour déterminer si le son a été bloqué, et utiliser le même genre d’astuce que ci-dessus pour rejouer le son.

[Invité]

Si je ne m'abuse, les (bons) navigateurs sont configurés pour NE PAS jouer de son à l'ouverture d'une page.

Ça vaut pour les vidéos, ça doit être pareil pour les fichiers audio.