[html] Playing Sound In Hidden Tag

I am trying to set sound on web page.

I found this code. It is working code when the div is visible but I want to be hidden and working. In this case it is not working because it is hidden with style attribute. How to make it not visible and playing sound at the same time ?

<div style="display:none">
   <embed src="sound.mp3"/> 
</div>

I agree with the sentiment in the comments above — this can be pretty annoying. We can only hope you give the user the option to turn the music off.

However...

audio { display:none;}

<audio autoplay="true" src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg">

The css hides the audio element, and the autoplay="true" plays it automatically.

That's how I achieved it, which is not visible (HORRIBLE SOUND....)

<!-- horrible is your mp3 file name any other supported format.-->
<audio controls autoplay hidden="" src="horrible.mp3" type ="audio/mp3"">your browser does not support Html5</audio>

<audio autoplay> <source src="file.mp3" type="audio/mpeg"> </audio>

It removes the auto play bar but still plays the music. Invisible sounds!

<audio id="audio" style="display:none;" src="mp3/Fans-Mi-tooXclusive_com.mp3" controls autoplay loop onloadeddata="setHalfVolume()">

This auto-plays, hides the music and reduces the music even if system volume is high to avoid noise. Place this in script:

<script>
    function setHalfVolume() {
        var myAudio = document.getElementById("audio");
        myAudio.volume = 0.2;
    }
</script>

Usually, what I do is put the normal audio tag, and then put autoplay="true" and I don't add: controls ="true" and that usually works for me

I put this in a snippet and also made a jsfiddel here

Hope this helps :)

<audio autoplay="true" _x000D_
src="https://res.cloudinary.com/foxyplays989/video/upload/v1558369838/LetsGo.mp3"> _x000D_
</audio>

I hope people would allow them to turn things such as music off, as for button clicks, Sometimes, those are pretty cool. Use the

<audio controls autoplay hidden="hidden"> <source src="*file here*" type="*file extension (.mp3 .ogg etc.)*"> <!--This displays an error to users that don't have it supported--> Your browser does not support the audio element. </audio>

As you can see, I don't like to repeat myself much, But I decided with the hidden tag.

Hope this helps.

I have been trying to attach an audio which should autoplay and will be hidden. It's very simple. Just a few lines of HTML and CSS. Check this out!! Here is the piece of code I used within the body.

<div id="player">
    <audio controls autoplay hidden>
     <source src="file.mp3" type="audio/mpeg">
                unsupported !! 
    </audio>
</div>