I have an audio file with a button when i click on it the audio play and when i click again the audio pause i also whant when the page is load the audio play directly without clicking on the button
I tried autoplay
in the html but it didn't work
I tried allow="autoplay"
also it didn't work
I tried window.addEventListener('load')
also it didn't work
I read that i should use muted
but also it didn't work
I'm using chrome and firefox
So How can i make this audio work on refresh or on load for the page and when i click in the button the audio will be pause it and when i click again the audio will be paly
I searched on stack overflow but nothing solve my problem
let audio = document.querySelector('.music audio');
let audioBtn = document.querySelector('.music .musicBtn i');
audio.volume = 0.2;
window.addEventListener("load", () => {
audio.play();
});
audioBtn.addEventListener("click", () => {
if (audio.paused) {
audio.play();
audioBtn.classList.add('fa-volume-up');
audioBtn.classList.remove('fa-volume-mute');
} else {
audio.pause();
audioBtn.classList.add('fa-volume-mute');
audioBtn.classList.remove('fa-volume-up');
}
});
.musicBtn {
background: transparent;
padding: 1.5rem 2rem;
font-size: 3rem;
border: none;
cursor: pointer;
}
<div >
<audio id="audio" style="display:none;" src="music/music.mp3" allow="autoplay" controls autoplay loop></audio>
<button ><i ></i></button>
</div>
<script src="https://kit.fontawesome.com/9e5ba2e3f5.js" crossorigin="anonymous"></script>
CodePudding user response:
You can not, as browsers only allow playing sounds as a consequence of user-interaction. You could try to hijack any click or mouse movement to enable the plaining of sound, but there is no way to really do it on load alone.
https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
CodePudding user response:
You can try manual interaction by clicking on the play button on DOM load so that the audio plays,
if (document.readyState === 'complete') {
document.getElementById('#playButton').click();
}