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

Question

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?

Giving people audio that plays automatically is awful. Giving people audio without a UI to turn it off is worse than awful. — Quentin, Nov 24 '13 at 18:38
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, Nov 24 '13 at 18:53
Hey, look on the bright side -- questions like this highlight bad browser design and spur browser-makers to remove shitty features :D — Coderer, Nov 20 '15 at 14:18
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, Mar 06 '18 at 20:41

score 22 · Accepted Answer · answered Nov 24 '13 at 18:42

22

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

answered Nov 24 '13 at 18:42

Vinith

1,264
14
25

I am using audio tag and it is working perfect but when I check on mobile. Html5 audio tag not sound autoplay. how to fix it ? – huykon225 Jun 09 '17 at 02:06
If you came here using React, check my answer below. – Dan Zuzevich Mar 06 '18 at 20:34
Where could you host the mp3? – Dec 04 '18 at 21:16
Hundereds of option to store and stream MP3, common ones are amazon s3, opendrive, kiwi6 etc – Vinith Dec 20 '18 at 17:58

score 7 · Answer 2 · answered Mar 06 '18 at 20:35

7

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

autoPlay

React wants it to be camelcase!

answered Mar 06 '18 at 20:35

Dan Zuzevich

3,651
3
26
39

you're a savior! – Kyle Pennell Oct 30 '19 at 17:06

Abel Callejo · Answer 3 · 2020-03-31T03:52:52.593

"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

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

score 2 · Answer 4 · answered Feb 26 '18 at 05:22

2

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)

answered Feb 26 '18 at 05:22

Z Kubota

155
1
3
11

1

Welcome to Stack Overflow, please review: https://stackoverflow.com/help/how-to-answer – Daniel Feb 26 '18 at 05:48

score 1 · Answer 5 · edited Feb 12 '19 at 16:41

1

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.

edited Feb 12 '19 at 16:41

Shiv Singh

6,939
3
40
50

answered Apr 12 '16 at 19:33

Satya

19
1

score 1 · Answer 6 · edited Apr 21 '19 at 05:08

1

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

edited Apr 21 '19 at 05:08

Matt

1,245
2
17
32

answered Apr 20 '19 at 21:29

Hataken

19
1

score 0 · Answer 7 · answered Aug 10 '14 at 21:48

<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

score 0 · Answer 8 · edited Sep 06 '15 at 10:30

0

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

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

edited Sep 06 '15 at 10:30

Sruit A.Suk

7,073
7
61
71

answered Sep 06 '15 at 10:23

Moustafa Emad Sobhy

1

score 0 · Answer 9 · answered Nov 24 '16 at 02:00

0

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>

answered Nov 24 '16 at 02:00

Jexla

1
1

score 0 · Answer 10 · answered May 15 '21 at 19:43

0

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!"

answered May 15 '21 at 19:43

Foxxy

1
1

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

10 Answers10

"Sensitive" era

HTML5 era

Early days of HTML

References

Linked