Search code examples
javascriptlit-html

How can I autoplay audio using lit-html?

I'm currently making a game and I want to include a background music. I added this to the body

<audio autoplay loop>
    <source src="assets/Tree_of_Life" type="audio/wav" />
    Your browser does not support the audio element.
  </audio>

But when I run lit-html, it won't play. I tried making it a template

const BackgroundMusic = (src) => {
  return html` <audio autoplay loop>
    <source src="${src}" type="audio/wav" />
    Your browser does not support the audio element.
  </audio>`;
};

But again it doesn't work, how would I be able to autoplay this music with lit html?

Solution

  • A few possible fixes :

    1. Add the .wav extension at the end of your filename

    2. Try in another browser and see if it's a browser problem. If it is, there are a few other ways to do that using an iframe for example : see here

    3. Remove the autoplay loop attributes and launch the sound with javascript