Getting muted audio autoplay to work on my website

Hi, I’m currently coding a website of my own and I’m having a hard time getting an audio file to autoplay while muted. As far as I understand, most browsers do allow audio files to autoplay as long as they’re muted. As is, though, the file doesn’t autoplay.
Here’s the code in question:

<audio controls loop autoplay muted id="inside">
            <source src="2022 PODCAST TT (v1 02 sept).mp3" type="audio/mp3"/>
        </audio>
1 Like

Hi @alexerobison

I am not sure what your problem is but you might find this mdn post useful:

The Embed Audio element

And to style it:

https://blog.shahednasser.com/how-to-style-an-audio-element/

I hope that helps and good luck!

1 Like

Thank you! Those resources were informational for me.

I think it’s possible it might actually be an issue of the unmute button not working properly. Here’s some of my HTML:

<audio src="2022PODCASTTT(v102sept).mp3" autoplay muted id="inside" type="audio/mp3">
        </audio>
        <a type = "button" onclick="changeImage()" onclick="play()" class="hovertext"><img alt="Toggle audio" id="play" src="Play.png"/></a>

and my javascript

function play() {
    var audio = document.getElementById('inside'); audio.muted = !audio.muted;
  }
1 Like

Not sure what the rest of your JS code looks like. Assuming you have a changeImage function that does not produce any errors when called, then you can change:

<a type = "button" onclick="changeImage()" onclick="play()" class="hovertext">

to:

<a type = "button" onclick="changeImage();play()" class="hovertext">

to get the sound file to play. However, anchor tags do not actually have a type attribute. What you should really do here is have add role="button" to the anchor element since you are not using an href attribute, so screen readers understand this is a button.

2 Likes

Thank you very much!