5244 sujets

Sémantique web et HTML

Bonjour,
Comment met-on du son sur une page web sans que la barre son s'affiche et que l’utilisateur ait à cliquer dessus ?
Merci beaucoup !

upload/1603363582-81417-barreson.png
Modifié par js_html (22 Oct 2020 - 12:46)
Modérateur
js_html a écrit :
Bonjour,
Comment met-on du son sur une page web sans que la barre son s'affiche et que l’utilisateur ait à cliquer dessus ?
Merci beaucoup !

upload/1603363582-81417-barreson.png


Suffit de chercher un peu.... rtfm<audio>
Modifié par niuxe (22 Oct 2020 - 13:52)
Modérateur
Bonjour,

C'est une mauvaise pratique, et dans le cas général, les navigateurs font tout pour l'interdire. Donc la réponse est : on ne peut pas.

Il faut soit laisser la barre des "controls", soit ajouter un bouton (ou tout autre élément capable de détecter une action de l'utilisateur) qui permettra à l'utilisateur de lancer le son.

Par exemple:
Html
<audio id="CaSaoule">
<source src="CaSaoule.mp3" type="audio/mp3" />
</audio>
<button>Go</button>

Javascript en fin de page :

var magic = function(){document.querySelector('#CaSaoule').play();};
document.querySelector('button').addEventListener("click",magic);


Dans certains cas, on pourra espérer lancer le son automatiquement (c'est compliqué). On pourra pour plus d'information lire :
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Amicalement,
Modifié par parsimonhi (22 Oct 2020 - 14:08)
Modérateur
oups, j'ai répondu à côté.... Smiley ohwell

@parsimonhi: un gros +1
Modifié par niuxe (22 Oct 2020 - 14:22)
@parsimonhi Merci !
C'est quoi le code JS pour, avec un bouton, arrêter le son ?
Merci !
Modifié par js_html (22 Oct 2020 - 15:25)
Modérateur
Bonjour,

Pour l'arrêter il faut faire un autre bouton en remplaçant par exemple play() par pause().

Par exemple :
<audio id="CaSaoule">
<source src="CaSaoule.mp3" type="audio/mp3" />
</audio>
<button id="start">Start</button>
<button id="stop">Stop</button>


var magicStart = function(){document.querySelector('#CaSaoule').play();};
var magicStop = function(){document.querySelector('#CaSaoule').pause();};
document.querySelector('#start').addEventListener("click",magicStart);
document.querySelector('#stop').addEventListener("click",magicStop);


Amicalement,
Meilleure solution