Html 在播放器不可见时自动播放带有 HTML5 嵌入标签的音频

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20179190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:13:48  来源:igfitidea点击:

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

htmlaudiomp3autoplay

提问by Nima

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

我想自动播放 MP3 音频文件,但不希望播放器可见。

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

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

当我display:none使用 css添加到音频标签时,它根本不播放音乐。有人可以解释我在不显示播放器的情况下播放音乐吗?

回答by Vinith

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

如需进一步参考,请单击此处

回答by Dan Zuzevich

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

如果您使用的是 React,请确保将自动播放设置为,

autoPlay

React wants it to be camelcase!

React 希望它是驼峰式的!

回答by Hataken

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

在这里看到的结果:https: //hataken.000webhostapp.com/list-anime.html

回答by Z Kubota

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)

有时需要自动播放。有人曾经指出,著名的 Les Paul Google Doodle (2011) 需要自动播放,即使在您将鼠标悬停在吉他弦上时才会播放声音。如果它以一流的设计和出色的设计完成,它会很漂亮(尤其是具有沉浸式设计的电影网站)

回答by Satya

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.

它运行良好,但我想要停止和暂停按钮。所以,如果我们不想听,我们可以停下来。

回答by Jexla

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>

回答by Studio3

<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:

和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.

就像上面建议的那样,您可能应该拥有某种形式的控件。也许使用一个切换链接/复选框,通过 jquery 滑动控件。

Source: HTML5 Audio Autoplay

来源:HTML5 音频自动播放

回答by Moustafa Emad Sobhy

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

你可以使用这个代码,它对我有用

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

回答by Abel Callejo

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

今天的现代浏览器似乎(默认情况下)阻止了这些自动播放功能。它们在某种程度上被视为流行音乐。非常具有侵入性。所以是的,用户现在可以完全控制播放声音的时间。[1,2,3]

HTML5 era

HTML5时代

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

Early days of HTML

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. Jer Noble,iOS 的新 <video> 政策,WebKit,链接
  2. 在 Firefox 中允许或阻止媒体自动播放,FireFox 帮助,链接
  3. Mounir Lamouri,统一自动播放,Chromium 博客,链接
  4. 嵌入内容,万维网联盟,链接