Html Question posted in
Some basic documentation can be found here.

why unable to implement audio property in simple (HTML , CSS , JS ) website online

Actually, my problem is ,its not auto playing the audio in song (chinese.mp3)file. I gave it on github.

no error (console)

no glitch in website .

but, just audio is missing.

can you help me out?

—-link of my Memory Mania game project:-

github

—its online (netlify) hosted link :-
Link

I have tried :

<div class="music">
        <audio autoplay>
          <source src="./songs/chinese.mp3" type="audio/mp3" id="myaudio" />
          Your browser does not support the audio element.
        </audio>
</div>

even in some past commits applied this:


<audio autoplay id="myaudio">
          <source src="./songs/chinese.mp3" type="audio/mp3" allow="autoplay"/>
          Your browser does not support the audio element.
        </audio>

js used:


// ---------------    auto - play    --------------------
var x = document.getElementById("myaudio").autoplay;
Tags:

2

Answers


  1. 0

    browsers do not run the audio directly, it is like a protection system, you have to activate the audio, in some browsers like Firefox you will see the icon in the search bar, enable the audio and enjoy!

    Login or Signup to reply.
  2. 0

    The answer is the browser waits to autoplay by default. Yogi’s comment has a very relevant link.

    Additionally I found https://stackoverflow.com/a/66606484/21496013 which tries to play the audio every 5 seconds. This is one possible solution.

    // --------------- volume controls ----------------
//var audio = document.getElementById("myaudio");
//audio.volume = 0.5;
// ---------------    auto - play    --------------------
//var x = document.getElementById("myaudio").autoplay;

const tryToPlay = setInterval(() => {
  const audio = document.querySelector(".audioElement")

  audio.play()
      .then(() => {
          clearInterval(tryToPlay);
      })
      .catch(error => {
          console.info('User has not interacted with document yet.');
      });
}, 5000);
          <div class="music">
        <audio autoplay class="audioElement">
          <source src="./songs/chinese.mp3" type="audio/mp3" id="myaudio"/>
          Your browser does not support the audio element.
        </audio>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search