Autoplay an audio with HTML5 embed tag while the player is invisible

10
votes

I want to autoplay a MP3 audio file and I don't want the player to be visible.

<div id="music"><embed src="Comfortably_Numb.mp3" autostart=true loop=false></div>

When I added display:none to the audio tag using css, it doesn't play the music at all. Could someone explain me how to play the music without displaying the player?

10
htmlaudiomp3autoplay
Giving people audio that plays automatically is awful. Giving people audio without a UI to turn it off is worse than awful. – Quentin
I know it is awful , I myself hate it but i have to it. it is a personal webpage and it's not mine. it works thank you – Nima
Hey, look on the bright side -- questions like this highlight bad browser design and spur browser-makers to remove shitty features :D – Coderer
I would like to counter the point that saying auto playing audio is awful. For example, in my React application, a user clicks an audio icon, and the HTML5 audio element appears on the screen. It would be much more "awful", if the user then had to say, "Yes, I already said I want to play some audio, but hey, let me click the play button again". It is all circumstantial. – Dan Zuzevich

10 Answers

21
votes

Alternatively you can try the basic thing to get your need,

<audio autoplay loop>
      <source src="johann_sebastian_bach_air.mp3">
</audio>

For further reference click here

7
votes

If you are using React, make sure autoplay is set to,

autoPlay

React wants it to be camelcase!

2
votes

Sometimes autoplay is needed. Someone once pointed out that the famous Les Paul Google Doodle (2011) required autoplay, even though the sound didn't play until you moused over the guitar strings. If it's done with class and great design it can be beautiful (especially movie websites with immersive design)

2
votes

You can use this simple code:

<embed src="audio.mp3" AutoPlay loop hidden>

for the result seen here: https://hataken.000webhostapp.com/list-anime.html

2
votes

"Sensitive" era

Modern browsers today seem to block (by default) these autoplay features. They are somewhat treated as pop-ops. Very intrusive. So yeah, users now have the complete control on when the sounds are played. [1,2,3]

HTML5 era

<audio controls autoplay loop hidden>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

Early days of HTML

<embed src="audio.mp3" style="visibility:hidden" />

References

  1. Jer Noble, New <video> Policies for iOS, WebKit, link
  2. Allow or block media autoplay in Firefox, FireFox Help, link
  3. Mounir Lamouri, Unified autoplay, Chromium Blog, link
  4. Embedded content, World Wide Web Consortium, link
1
votes

I used this code,

 <div style="visibility:hidden">
    <audio autoplay loop>
        <source src="Aakaasam-Yemaaya Chesave.mp3">
    </audio> 
</div>

It is working well but i want stop and pause button. So, we can stop if we don't want to listen.

0
votes
<div id="music">
<audio autoplay>
  <source src="kooche.mp3" type="audio/mpeg">
  <p>If you can read this, your browser does not support the audio element.</p>
</audio>
</div>

And the css:

#music {
  display:none;
}

Like suggested above, you probably should have the controls available in some form. Maybe use a toggle link/checkbox that slides the controls in via jquery.

Source: HTML5 Audio Autoplay

0
votes

You Could use this code, It's Works with me

<div style="visibility:hidden">
    <audio autoplay loop>
        <source src="../audio/audio.mp3">
    </audio> 
</div>
0
votes

For future reference to people who find this page later you can use:

<audio controls autoplay loop hidden>
<source src="kooche.mp3" type="audio/mpeg">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>
0
votes

What I did was this:

<div>
   <embed src="sample.mp3" autostart=true loop=false width="1px" height="1px">
</div>

You still hear the audio autoplay on the page, you dont see it, and it takes little to no space in your code! "Win-Win situation!"