Play sound in hidden tag

Question

I am trying to set the sound on a webpage.

I found this code. This is working code when a div displayed, but I want to be hidden and working. In this case, it does not work, because it is hidden with the style attribute. How to make it invisible and play sound at the same time?

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

Answer 1

I agree with the mood in the comments above - this one can be quite annoying. We can only hope that you will give the user the opportunity to turn off the music.

But...

HTML

 <audio autoplay="true" src="http://www.vorbis.com/music/Epoq-Lepidoptera.ogg"> 

CSS

 audio { display:none; } 

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

Feed here

Answer 2

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

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

Answer 3

I am trying to connect audio that should automatically start and will be hidden. It is very simple. Just a few lines of HTML and CSS. Check this!! Here is a piece of code that I used in the body.

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

Answer 4

The way I achieved this, which is not visible (A terrible 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> 

Answer 5

I hope that people will let them turn off things like music, like at the touch of a button. Sometimes it's pretty cool. Use

<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 repeating a lot, but I decided to use the hidden tag.

Hope this helps.

Answer 6

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

This automatically plays, hides music and decreases music, even if the system volume is high to avoid noise. Put this in a script:

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

Answer 7

Usually I put a regular sound tag and then put autoplay="true" and I do not add: controls = "true", and this usually works for me

I put this in a snippet and also made jsfiddel here

Hope this helps :)

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

<a class="run-snippet btn btn-primary" href="javascript:void(0);"><i class="fas fa-play-circle"></i> </a><a class="close-snippet" href="javascript:void(0);"><i class="far fa-times-circle"></i> </a><div class="clearfix"></div>

Answer 8

You should learn the HTML 5 audio element.