Je souhaite ajouter une musique de fond à mon site web. J'ai essayé ce code JS :
var sound;
function initialAudio() {
'use strict';
sound = new Audio();
sound.src = '../audio/test.mp3';
sound.loop = true;
sound.play();
}
window.addEventListener("load", initialAudio);J'ai lié le JS et le HTML, mais lorsque j'ouvre le site, le son ne joue pas. Pouvez-vous m'aider ?
Vous devez utiliser un élément audio dans votre code HTML, voici comment procéder.
<!DOCTYPE html>
<html>
<body>
<audio id="audioContainer">
<source src="myMp3.mp3" type="audio/mpeg">
</audio>
<p>Click the buttons to play or pause the audio.</p>
<button onclick="playMp3()" type="button">Play Mp3</button>
<button onclick="pauseMp3()" type="button">Pause Mp3</button>
<script>
const audioContainer = document.getElementById("audioContainer");
function playMp3() {
audioContainer.play();
}
function pauseMp3() {
audioContainer.pause();
}
</script>
</body>
</html>
Il existe une bibliothèque audio en javascript appelée HOWLER.JS et il est vraiment facile à utiliser. Incluez ce fichier script :
<script src = "https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.js"></script>Ajoutez cet extrait de code à votre code html :
var sound = new Howl({
src: ['../audio/test.mp3'],
autoplay: true,
loop: true,
volume: 0.5,
});
sound.play();Pour plus d'informations, visitez le site : HOWLER.JS DOCS
Il suffit d'utiliser l'élément audio HTML5 avec l'attribut de lecture automatique. Comme mentionné dans les commentaires, la prise en charge par les navigateurs de l'élément autoplay est ténue (pour de bonnes raisons) mais elle fonctionne pour moi dans Firefox.
<audio autoplay loop>
<source src="http://soundbible.com/grab.php?id=464&type=wav"></source>
</audio>Si vous souhaitez que l'utilisateur puisse mettre l'audio en pause, il suffit d'ajouter une fonction controls attribut :
<audio autoplay controls loop>
<source src="http://soundbible.com/grab.php?id=464&type=wav"></source>
</audio>Vous pouvez également utiliser JS pour qu'un bouton situé à un autre endroit de la page joue/pause, comme indiqué dans une autre réponse.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
