Solution n ° 1
Ma solution ici est de créer un iframe
<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>
et audio
balise aussi pour les navigateurs non-Chrome
<audio autoplay loop id="playAudio">
<source src="audio/source.mp3">
</audio>
et dans mon script
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (!isChrome){
$('#iframeAudio').remove()
}
else {
$('#playAudio').remove()
}
Solution n ° 2:
Il existe également une autre solution de contournement pour cela selon @Leonard
Créez un iframe
qui ne joue rien juste pour déclencher la lecture automatique lors du premier chargement.
<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>
bonne source pour le fichier mp3 silence.mp3
Ensuite, lisez votre vrai fichier audio à l'aise.
<audio id="player" autoplay loop>
<source src="audio/source.mp3" type="audio/mp3">
</audio>
Personnellement, je préfère la solution n ° 2 car c'est une approche plus propre pour ne pas trop compter sur JavaScript.
Mise à jour août 2019
Solution n ° 3
Comme alternative, nous pouvons utiliser <embed>
Pour Firefox
Il semble que la lecture automatique audio fonctionne, nous n'avons donc pas besoin de l' <embed>
élément car il créera un double audio en cours d'exécution.
let audioPlaying = true,
backgroundAudio, browser;
browser = navigator.userAgent.toLowerCase();
$('<audio class="audio1" src="audio.mp3" loop></audio>').prependTo('body');
if (!browser.indexOf('firefox') > -1) {
$('<embed id="background-audio" src="audio.mp3" autostart="1"></embed>').prependTo('body');
backgroundAudio = setInterval(function() {
$("#background-audio").remove();
$('<embed id="background-audio" src="audio.mp3"></embed>').prependTo('body');
}, 120000);
}
De plus, si vous avez un événement de basculement pour votre audio, assurez-vous de supprimer l' <embed>
élément créé pour l'audio.
Remarque: après votre bascule, il redémarrera depuis le début car le <embed>
est déjà supprimé et l' <audio>
élément sera lu normalement maintenant.
$(".toggle-audio").on('click', function(event) {
audioPlaying = !audioPlaying;
$("#background-audio").remove();
clearInterval(backgroundAudio);
if (audioPlaying){
$(".audio1").play();
}
else {
$(".audio1").pause();
}
Et maintenant, assurez-vous de masquer ces éléments <audio>
et<embed>
audio, embed {
position: absolute;
z-index: -9999;
}
Remarque: diplay: none
et visibility: hidden
fera que l' <embed>
élément ne fonctionnera pas.